Social login is one of the easiest options for users to log into your site. At Stormpath, we’ve made social login easy for you to build by adding Facebook and Google login to the Stormpath Laravel integration.
In this tutorial, I will show you how to set up Facebook and Google to allow you to add social login into your Stormpath Laravel application. This will allow your users to log into your application with both their account stored in Stormpath, and their Facebook or Google ID. There are only a few steps to take to enable social identity providers, and in this post, I will walk you through each of these steps.
The Stormpath Laravel integration automatically looks at the Application you provide and recognizes which social providers you’ve already created. In turn, it will display the appropriate “login with” buttons on the login page.
Follow along with me to quickly get Facebook and Google up and running in your app.
Sign up for a free Stormpath account to get started with our Laravel integration.
Set Up Facebook Social Login
To allow login from Facebook, there are a few steps we first have to complete.
– Create a Facebook app
– Setup allowed URL’s
– Create Facebook directory in Stormpath
– Extra Configuration Options
Create a Facebook application
The first thing you need to do is log into the Facebook Developer Site and create a new Facebook App.
You can do this by visiting the Facebook Developer Site and clicking the “My Apps” menu at the top of the screen, then select the “Create a New App” button. You should see something like the following:
If you already have an application, you will be presented with a different screen, please click on the www icon and then Create a New App ID
Pick a Display name for your application. This is the name that will be used when presenting it to the user who is trying to log in. You can skip the Namespace as it is not needed for our example. The last thing is to pick the category of your application.
After filling out all the necessary fields, click Create App ID. Facebook will ask you to do a security check, after passing this, you should see should something similar to this:
Make note of the App ID and App Secret as you will need those once we get to the Stormpath Dashboard.
Set Up Allowed URLs
The next thing we need to do is tell Facebook what URLs we’ll be using Facebook Login from.
From the app dashboard page you’re on, click the “Settings” tab in the left menu, then click the “Add Platform” button near the bottom of the page. When prompted, select “Website” as your platform type.
In the “Site URL” box, enter your private and public root URLs. This should be something like http://localhost:8000 or http://mysite.com. If you want to allow Facebook Login from multiple URLs (local development, production, etc.) you can just click the “Add Platform” button again and enter another URL.
Lastly, click the “Save Changes” button to save the changes.
Your settings should now look something like this:
Create A Facebook Directory In Stormpath
Next, we need to input the Facebook app credentials into Stormpath Directory. This allows Stormpath to interact with the Facebook API on your behalf, which automates all OAuth flows.
To do this, you need to visit the Stormpath Admin Console Directories. When you click the “Create Directory” button you will choose “Facebook” as the provider, and enter the following information about your Facebook application:
For the “Name” field, you can insert whatever name you want.
For the “Facebook Client ID” field, insert your Facebook App ID which you got in the previous steps.
For the “Facebook Client Secret” field, insert your Facebook Client Secret which you got in the previous steps.
Make sure to click “Create” to finish creating your directory.
Next, you need to hook your new Facebook Directory up to your Stormpath Application. To do this, visit the Stormpath Admin Console, navigate to Applications, and select your application from the list.
On your application page, click the “Account Stores” tab, then click the “Add Account Store” button. From the drop down list, select your newly created Facebook Directory, then save your changes.
Stormpath Laravel Facebook Options
This step is optional as the defaults will work out of the box however you can set up new scopes as well as a different callback in the Stormpath Laravel configuration file.
Open config/stormpath.php file and find the social option.
If the config/stormpath.php file is not found, you may need to run php artisan vendor:publish to make modifications to it.
In the configuration of the social providers options, you will find a section for Facebook. Here you can set a comma seperated list of scopes to request from Facebook. In the configuration, you can also change the default callback url which will handle the actual login.
Set Up Google Social Login
Integrating Google Login is very similar to Facebook. You must create an application in the Google Developer Console, then create a Directory in Stormpath which holds settings for the Google application that you created.
To allow login from Google, there are a few steps we first have to complete.
– Create a Google app
– Setup allowed URL’s
– Create Google directory in Stormpath
– Extra Configuration Options
Create a Google application
The first thing you need to do is log into the Google Developer Console and create a new Google App.
You can do this by visiting the Google Developer Console and clicking the “Create Project” button at the top of the screen. You should see something like the following:
Pick a Project name for your application. This is the name that will be used when presenting it to the user who is trying to log in.
After filling out all the necessary fields, click Create. After Google creates your application, it will take you to your Dashboard for the application. You should now see something that looks like:
Now, we need to enabled the correct API to allow for logging in. Click on the blue box in the screen that says “Use Google APIs”. This will take you to a list of available APIs. In the middle of the screen, find “Social APIs” and click on “Google+ API”. On the overview page of the “Google+ API”, click on the blue button “Enable”.
Create Credentials
Now that you have your “Google+ API” enabled for your new Google application, you need to create credentials for it. On the left side of the screen, click “Credentials”. Now, in the middle of the screen, click on “Create credentials” and then “OAuth client ID”. You should now be presented with a screen that looks like:
This is telling you that we need to set up the consent screen before we continue. Click on the “Configure consent screen” and you will be presented with a screen that looks like:
The only field you need to fill out is the Product name. This is what will show you your users on the consent screen after click on the login with Google button. Once you fill this out, click “Save” and you will redirected back to the credentials screen. Once there, click on “Web Application”. You should now see a place to fill in Authorized redirect URI’s:
Set Up Allowed URLs
In the Autorized URI’s field, you need to fill in your full authorized URI. As an example, lets say your domain is http://jarjarbinksrocks.com/ where you have installed the Stormpath Laravel package, your authorized redirect URI will be “http://jarjarbinksrocks.com/callbacks/google”. We will go over how you can re-configure the callback a little bit later. Once done, click on the blue “Create” button. Google will then provide you with your OAuth client keys.
Create A Google Directory In Stormpath
Next, we need to input the Google app credentials into Stormpath Directory. This allows Stormpath to interact with the Google API on your behalf, which automates all OAuth flows.
To do this, you need to visit the Stormpath Admin Console Directories. When you click the “Create Directory” button you will choose Google as the provider, and enter the following information about your Google application:
For the “Name” field, you can insert whatever name you want.
For the “Google Client ID” field, insert your Google Client ID which you got in the previous steps.
For the “Google Client Secret” field, insert your Google Client Secret which you got in the previous steps.
For the “Google Authorized Redirect URI” field, insert your Google Redirect URL from the previous section. Be sure to only enter the URI you’re currently using. EG: If you’re running your app in development mode, set it to your local URL, if you’re running your app in production mode, set it to your production URL.
Lastly, be sure to click the “Create Directory” button at the bottom of the page.
Next, you need to hook your new Google Directory up to your Stormpath Application. To do this, visit the Stormpath Admin Console and then the Applications section. Select your application from the list.
On your application page, click the “Account Stores” tab, then click the “Add Account Store” button. From the drop down list, select your newly created Google Directory, then save your changes.
Stormpath Laravel Google Options
This step is optional as the defaults will work out of the box however you can set up new scopes as well as a different callback in the Stormpath Laravel configuration file.
Open config/stormpath.php file and find the social option.
If the config/stormpath.php file is not found, you may need to run php artisan vendor:publish to make modifications to it.
In the configuration of the social providers options, you will find a section for Facebook. Here you can set a comma seperated list of scopes to request from Facebook. In the configuration, you can also change the default callback url which will handle the actual login.
Test It Out
Now that you’ve plugged your Facebook and/or Google credentials into Stormpath Laravel, social login should already be working!
Open your Laravel app in a browser, and try logging in by visiting the login page (/login). If you’re using the default login page included with this library, you should see the login screen with Facebook and/or Google buttons.
Now that you have a Facebook and/or Google enabled login button, try clicking on one. Doing so will begin the OAuth flow with that provider. After logging in with that provider, they will redirect back to your callback uri and the integration will automatically set access_token and refresh_token (as long as refresh_tokens are enabled) cookies for you.
For full documentation on social login, visit our documentation page.
Let us know what you think of this addition. We love your feedback. You can contact us at support@stormpath.com or hit us up on Twitter @goStormpath.
Like what you see? Follow @goStormpath to keep up with the latest releases.