Yii2, login with Facebook, quick start guide

March 17, 2019 66 Yehor Rykhnov

Before we begin, let us see once more what authentication and authorization are, because many people confuse these concepts (and I am not an exception).

Authentication - confirmation of the authenticity of something or someone for that or whom he is trying to give himself away, with the help of some unique information, in our case - with a login and password.

Authorization is the verification and determination of the authority to perform certain actions (for example, viewing data) in accordance with the previously performed authentication.

Facebook will authenticate the user and then the site will authorize or register (if necessary) the user according to data from Facebook.

Thus, we will simplify the user to enter the site instead of entering the username and password it will be enough to press one button - "login with Facebook".

And so first we need to create an application for authorization using Facebook, here: https://developers.facebook.com/apps/.

Maybe creating an application and configure it on Facebook should be step 1 but since this step is not described here just know that it must be completed in order to log in via Facebook to the site.

Step 1. Install yii2-authclient

Next, open the console, go to the folder with the project and install yii2-authclient using composer. 

  1. composer require --prefer-dist yiisoft/yii2-authclient

Step 2. Connect and configure yii2-authclient

Set up yii2-authclient, open the config/main.php settings file and add code to components: 

  1. //...
  2. 'authClientCollection' => [
  3.     'class' => 'yii\authclient\Collection',
  4.     'clients' => [
  5.         'facebook' => [
  6.             'class' => 'yii\authclient\clients\Facebook',
  7.             //'authUrl' => 'https://www.facebook.com/dialog/oauth?display=popup',
  8.             'clientId' => 'APP_CLIENT_ID',
  9.             'clientSecret' => 'APP_CLIENT_SECRET',
  10.             'attributeNames' => ['name', 'email', 'first_name', 'last_name'],
  11.         ],
  12.     ],
  13. ],
  14. //...

In attributeNames, you can pass the field name as a parameter that you want to get from Facebook. Parameters that can be passed to get more information about the user here: https://developers.facebook.com/docs/graph-api/reference/user.

Step 3. Configure the controller

In SiteController, add an interaction between yii2-authclient and the controller. We add the following code to the actions method: 

  1. <?php
  2. public function actions() {
  3.     return [
  4.         'auth' => [
  5.             'class' => 'yii\authclient\AuthAction',
  6.             'successCallback' => [$this, 'oAuthSuccess'],
  7.         ],
  8.     ];
  9. }

In successCallback we give the name of the action that will be called upon successful authentication. In this example, this is oAuthSuccess.

Step 4. Add the oAuthSuccess method 

  1. <?php
  2. public function oAuthSuccess($client) {
  3.     $userAttributes = $client->getUserAttributes();
  4.     echo $userAttributes['email'];
  5. }

Here we make registration, authorization or what you need on the site to enter.

Step 5. Display the button of login with Facebook

To display the button, use following code: 

  1. <?= yii\authclient\widgets\AuthChoice::widget([
  2.     'baseAuthUrl' => ['site/auth']
  3. ]) ?>

Now we can test everything and switch the application (here: https://developers.facebook.com/apps/) from test to public status.

Facebook