Laravel

Laravel 5.6 Socialite Google Login Tutorial

February 19, 2018

author:

Laravel 5.6 Socialite Google Login Tutorial

The only task we are going to complete in this tutorial is fetching API keys from the providers and map it in our application. This is because we completed most of the integration in the last post.

In the previous post, we worked with all the setup required for social login in any Laravel Application. We installed socialite package and integrated it. We incorporated all the required components like database, migration, models, routes, and controller.

We also created a service to handle core database operations. If you haven’t referred that, would highly recommend going through that first as most of the application logic was covered there. So let us get started with this one –

# Google Login in Laravel

To integrate Google login, we first need consent from Google regarding API key. To get that, follow the steps below:

# Google API for Socialite

1. Go to console.google.com, login and create a new project:
Create project in Google Console

2. After the project is created successfully, with Credentials tab and click on Create Credentials button:
Google Console Credentials tab

3. It will display a drop-down with various options, select OAuth client ID:
Select OAuth Client Id in Google Console

4. It will ask you to set a product name first, so click on Configure consent screen button
Click on Configure Consent Screen

5. Now add a relevant Product name shown to users and Save:
Add Product Name in Google Console

6. It will now take you back to the Create Client ID Screen, select Web Application from various radio buttons. Make sure you fill next information correctly as most of the developers face error in the application due to issues in this step. Since we are testing the application locally, we will fill localhost address, you, of course, need to change this for production apps.
Add following endpoints and click Create.

//Authorized JavaScript origins:
http://localhost:8000

//Authorized redirect URIs:
http://localhost:8000/auth/google/callback

7. On successfully Client ID generation, a screen will pop up with out Client ID and Client Secret. Copy them and place them safely in your system.
Google Console Client ID $& Client Secret

8. Here’s the final screen with the list of Client IDs for a project. You can click on edit glypicon to download or copy the credentials again in future.
List of Client IDs in Google Console

9. But we need to enable API. Go to the Dashboard tab, click view all search for Google+ API (under Social category):
Google Console Dashboard

10. Click on Enable button and in a moment, the API will be enabled:
Enable Google Plus API in Console

# Google Socialite API Registration

We have the required Client ID and Client Secret from the previous step, let us integrate them into our application. (Note, we already created application in the last post, you can clone that repo from GitHub)

In .env file of the application add:

GOOGLE_CLIENT_ID=YOUR-CLINET-ID
GOOGLE_CLIENT_SECRET=YOUR-SECRET
GOOGLE_REDIRECT=http://localhost:8000/auth/google/callback

Make sure GOOGLE_REDIRECT matches exactly as we added in the Google console redirect URI and as route endpoint in web.php

Let us use these keys and map them in services config file:

# config/services.php

<?php

return [
    ...
    'google' => [
        'client_id' => env('GOOGLE_CLIENT_ID'),
        'client_secret' => env('GOOGLE_CLIENT_SECRET'),
        'redirect' => env('GOOGLE_REDIRECT'),
    ],

];

That’s it for google login integration.

# Test Google Login

You can test the application localhost:8000/login for yourself.

Here’s our application’s login screen:
Laravel 5.6 social login screen

Here’s Google login screen, add Gmail credentials:
Google Login Screen From Laravel App

And here we are back in our application:
Successful Google Login in Laravel

You can also check the database, to see if the recorded is inserted or not:
Here’s users table:

Laravel MySQL Users table

And the social_accounts table:
Laravel MySQL Social Accounts table

Conclusion:
It was a short, to the point post to integrate Google API in Laravel. We were able to keep this post very simple to follow only because we set the ground level in the earlier post. Hope the steps were easy to follow. Any issues? Reach us in the comment section below.

Questions & Comments:

Thanks for reading. If you have any questions or suggestions, drop them in the comment section below.

Leave a comment

Your email address will not be published. Required fields are marked *