What is symfony2 social login plugin?

If you are symfony developer and want to learn how to create social login using google, facebook, twitter etc.. this is a plugin that you can use in your project.

Using symfony2 social login plugin you can login using most of the social login providers. SocialLoginBundle that allows you to log on via facebook, linkedin, twitter and google however I will be adding more providers later on.

Follow the tutorial below to install the bundle.

How to install social login bundle in symfony2?

First of all go to your symfony project root directory and find composer.json file and add following line:

"require": {
   "pcb/social-login": "^1.0"
}

Once you added above line run following command to load this new bundle in your symfony project using following command in your terminal window:

composer update;

Update app/AppKernel.php file

We have to let symfony know about our social login bundle. Open app/AppKernel.php file and add following line:

new PCB\SocialLoginBundle\PCBSocialLoginBundle()

Update yml config file

Once we enabled our bundle in app/Kernel.php file we need to update our login bundle related yml configurations. Open app/config/config.yml file and add following code:

pcb_social_login:
    model_alias: BlogBundle			        # your bundle alias
    model_namespace: BlogBundle\Entity		# your entity namespace
    login_path: fos_user_security_login		# route to your login page
    facebook:
       app_id: FACEBOOK_APP_ID
       secret_id: FACEBOOK_APP_SECRET_ID
    twitter:
       app_id: TWITTER_APP_ID
       secret_id: TWITTER_APP_SECRET_ID
    linkedin:
       app_id: LINKEDIN_APP_ID
       secret_id: LINKEDIN_APP_SECRET_ID
    google:
       app_id: GOOGLE_APP_ID
       secret_id: GOOGLE_APP_SECRET_ID

Update routing file

Now, finally we have to add routings related to our login bundle. Open app/config/routing.yml file and add following route resource:

pcb_social_login:
    resource: "@PCBSocialLoginBundle/Resources/config/routing.yml"
    prefix: /   

Congratulation, you have successfully installed the bundle in your project. However now we have to add/change a little bit of code so that our bundle is working as we desired.

Update schema changes

Now, create users table by defining schema in src/BlogBundle/Resources/config/doctrine/User.orm.yml and update file with following changes:

BlogBundle\Entity\User:
    type:  entity
    table: users
    id:
        id:
            type: integer
            generator:
                strategy: AUTO               
    fields:
        firstName:
            type: string
            length: 35
            column: first_name 
            nullable: true
        lastName:
            type: string
            length: 35
            column: last_name
            nullable: true         
        authId:
            type: string
            length: 85
            column: auth_id 
            nullable: true
        authProvider:
            type: string
            length: 10
            column: auth_provider
            nullable: true    

Once you update your schema time to generate new entity and update the database using following commands.

php app/console generate:doctrine:entities BlogBundle --no-backup;
php app/console doctrine:schema:update --force;

Adding login buttons and url to login page

Finally, we have to add social login buttons to our view file. Let's put following code to our login.html.twig file:

<section id='social-plugin'>
	<a href="{{ path('pcb_social_login_url', {provider: 'facebook'}) }}">
		Sign in with Facebook
	</a>
	<a href="{{ path('pcb_social_login_url', {provider: 'twitter'}) }}">
		Sign in with Twitter
	</a>		
	<a href="{{ path('pcb_social_login_url', {provider: 'linkedin'}) }}">
		Sign in with Linkedin
	</a>	
	<a href="{{ path('pcb_social_login_url', {provider: 'google'}) }}">
		Sign in with Google
	</a>		
</section>  

That's all we need in order to enable facebook login to your project.

What happens is when user clicks on the login to facebook link they will be redirected to the facebook website where they will authenticate and will be redirected back to your login page.

On your login page all you need to check is weather or not user has an active session if yes then redirect them to appropriate home page.

Follow the sample code shown below however this could change according to your project setup I am using FOSUserBundle so I over wrote the existing loginAction to meet my requirements.

namespace BlogBundle\Controller;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\RedirectResponse;
use FOS\UserBundle\Controller\SecurityController as BaseController;

class SecurityController extends BaseController {

	public function loginAction(Request $request)
	{
		$securityContext = $this->container->get('security.context');
		$router = $this->container->get('router');
		
		// redirect admin user
		if ($securityContext->isGranted('ROLE_ADMIN')) {
			return new RedirectResponse($router->generate('admin'), 307);
		}
		
		// redirect normal user
		if ($securityContext->isGranted('ROLE_USER')) {
			return new RedirectResponse($router->generate('member'), 307);
		}

		// ....
	}
}

Above code will check to see if user is in the session before executing the login page so that when used is already logged on and if he tries to go back to the login page he will be redirected back to his home page.

If you like my tutorial please share and shot me a message if you want some more tutorials from me. Thanks a lot.

Related Posts