Provide Authentication in a Yii2 Application using Reactjs frontend

问题

I am working with a Yii2 API and a reactjs fronted. I want to implement authentication in my api such that only authenticated users using the Bear authentication class can access my API functions. I have implemented my Before actions as follows :

//Yii::$app->response->format = Response::FORMAT_JSON;
    /*directly include pagination info in the request body to simplify client development*/
public $serializer = [
    'class' => 'yii\rest\Serializer',
    'collectionEnvelope' => 'items',
];

public static function allowedDomains()
{
    return [
      // '*'   // star allows all domains
       'http://localhost:3000',
       'http://localhost:4200',
       'http://192.168.8.101:3000',
    ];
}  

public function behaviors()
{
    return array_merge(parent::behaviors(), [
        // For cross-domain AJAX request
        'corsFilter'  => [
            'class' => \yii\filters\Cors::className(),
            'cors'  => [
                // restrict access to domains:
                'Origin'=> static::allowedDomains(),
                'Access-Control-Request-Method'    => ['POST','GET','PUT','OPTIONS', 'PATCH','DELETE'],
                'Access-Control-Allow-Credentials' => true,
                'Access-Control-Max-Age'           => 3600,// Cache (seconds)
               'Access-Control-Request-Headers' => ['Origin', 'X-Requested-With', 'Content-Type', 'accept', 'Authorization'],
                //'Access-Control-Allow-Credentials' => true,
                'Access-Control-Allow-Origin' => false,
            ],
        ],
        //authenticate the user before execute the actions
        'authenticator'=>[
            'class' => CompositeAuth::className(),
            'authMethods' => [
                HttpBasicAuth::className(),
                HttpBearerAuth::className(),
                //QueryParamAuth::className(),
            ],
            'except' => ['search'],
        ],  

    ]);
}

In my reactjs frontend, I make an API call to get data from the api using a function call getposts which is

function getposts(userId) {
const requestOptions = {
    method: 'POST',
    headers: {
        'Authorization': 'Bearer ' + user.auth_key,
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(userId)
};
//console.log('we are about to login');
return fetch(apiConstants.API_POST_URL, requestOptions)
     .then(handleResponse)
    .then(json => {
        console.log(json);
        return json;
    });

}

where auth_key is the authorization key to be used for verification. When I use the chrome browser for debug, I get a 401 error ( Unauthorized). With Access to fetch from { my URL } has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Note, I use that key in postman to get the data I need and it works well. I have changed multiple user keys ( and even pass default values) and they don't work.

Any heads on or help on this issue will be greatly appreciated. thanks

回答1:

Yii2 Bearer authentication class does not work with JavaScript frontends such as Reactjs and Angular JS. I solved this problem by changing the authentication method to QueryParmas so My fetch looks like

 return fetch(apiConstants.API_POST_URL+'?access-token='+user.auth_key, requestOptions)
     .then(handleResponse)
    .then(json => {
        console.log(json);
        return json;
    });

then in my Yii2 behaviors, I had to activated Query authentication

'authenticator'=>[
        'class' => CompositeAuth::className(),
        'authMethods' => [
            HttpBasicAuth::className(),
            HttpBearerAuth::className(),
            QueryParamAuth::className(),
        ],

来源：https://stackoverflow.com/questions/53176123/provide-authentication-in-a-yii2-application-using-reactjs-frontend

标签

javascript

reactjs

yii2