How to Integrate Login & Registration using Facebook in Yii2 Framework?

Nowadays, it’s common to use your social media accounts to directly login to various websites. For customer’s convenience, many sites provide the facility to login using the social media account so that the user doesn’t need to maintain number of usernames and passwords, and can use only one for every site. I can help you to integrate these steps without you needing to hire backend developers for that. Here’s how.

If you want to integrate the Facebook authentication in Yii2, then follow these simple steps and your job’s done:

• Facebook account (Create a developer account if you don’t have one.)
• Create Facebook app

Click on Create App ID to create your app.

Click choose platform

Then you can go to app dashboard, there you will get App ID and App Secret.

          And click next. You can add site URL through settings too.

• If you don’t have yii2-authclient extension installed, then get it installed using the command:

composer require –prefer-dist yiisoft/yii2-authclient

• Now, configure yii2-authclient in your config/main.php.

<?php
'authClientCollection' => [

'class' => 'yii\authclient\Collection',

'clients' => [

'facebook' => [

'class' => 'yii\authclient\clients\Facebook',

'authUrl' => 'https://www.facebook.com/dialog/oauth?display=popup',

'clientId' => 'APP CLIENT ID',

'clientSecret' => 'APP CLIENT SECRET',

'attributeNames' => ['name', 'email', 'first_name', 'last_name'],

],

],

],

In clients array, auth client classes and configurations are passed. We are passing auth client class for facebook. Default authUrl is automatically provided by Yii2-authclient, you can also provide a custom one. ‘clientId’ and ‘clientSecret’ are two most important parameters to make your configuration complete.

Replace APP CLIENT ID with App ID and APP CLIENT SECRET with App secret. Additionally, you can also provide scope. Scope is set to email, which will give you other data like public profile etc. We don’t need scope parameter here, as we are only authenticating Facebook user.

In attributeNames , you can pass the name of fields as parameter that you want to get from Facebook. We have only passed name, email, first_name and last_name. Other parameters that you can pass to retrieve more information about the user are given here.

In SiteController, write the following code,

<?php
public function actions()

{

return [

'auth' => [

'class' => 'yii\authclient\AuthAction',

'successCallback' => [$this, 'oAuthSuccess'],

],

];

}

         Here, we are handling interaction between yii2-authclient and our controller.

         successCallback is most important configuration. We provide action name that will be called when the authentication is successful. We are passing oAuthSuccess as successCallback.

7. Define the oAuthSuccess action in controller,

<?php
public function oAuthSuccess($client) { 
     $userAttributes = $client->getUserAttributes(); 
} 

You can get the elements of $userAttributes with $userAttributes[’email’]

$client->getUserAttributes() returns the data that you passed in attributeNames in step  5.

8. For displaying a social media button,

<?= yii\authclient\widgets\AuthChoice::widget([

'baseAuthUrl' => ['site/auth']

]) ?>

          authUrl above should be the url to auth action that we defined in SiteController. Above code will generate social media links with proper urls for you.

• Okay now the final and the most important step is to activate your Facebook app so that you can use it in your website. All you need to do is to go to the App Review and make your app public by selecting Yes as given in the below image.

• Now your App is ready to be used by your website.

Wasn’t that easy? As I said, you won’t need Back-End Developers to get it done for you. You’re welcome. Now you can get Facebook authentication integrated in your own Yii2 website. If you want to add anything to this blog or have a feedback, you may feel free to add a comment on this post.