Google+ oAuth and Laravel in 60 seconds

In one of previous tutorials I wrote about Social Sign-in with Socialite Laravel package. Now I will show you how easy it is, to implement new authentication provider in existing project. I noticed that many Laravel users are struggling with Google+ oAuth so I will show you needed steps for connecting Laravel with Google+ oAuth mechanism.

You can find entire code used in this tutorial on Github

First I will visit Google Developers Console and create new project there. After few seconds application is created, and I will visit left sidebar and dropdown APIs & auth. In APIs tab I will select Google+ API and enable it on the next page. Now my application will be able to use Google+ for Sign-in process.

Google Developers Console - APIs Tab

Google Developers Console - APIs Tab

I will need credentials for this app so I will visit Credentials tab and choose first option oAuth and click Create new Client ID button. On next page I need to fill few fields, but only required one is application name. On next page I will select Web application and proceed, and after that I will need to insert my application URLs and callback URL. As you remember from Laravel 5 Social and Email Authentication tutorial I am using only 2 types of routes to handle logins with Socialite providers.

$s = 'social.';
Route::get('/social/redirect/{provider}',   ['as' => $s . 'redirect',   'uses' => 'Auth\[email protected]']);
Route::get('/social/handle/{provider}',     ['as' => $s . 'handle',     'uses' => 'Auth\[email protected]']);

First route is the link that will be behind login button on my site, and it will redirect user to Google for social authentication. Second route is callback URL, where Google will redirect user after successful sign-in process. So in redirect URIs field of Client ID Creation window I will enter http://tuts1.dev/social/handle/google.

Client ID Creation

Client ID Creation

After this my app will get new set of API keys.

Google App Keys

Google App Keys

After this all I need to do is add these keys to .env and services.php file and create login buttons on login and register pages.


GOOGLE_ID=15385807761-rmch7meueerdtdbltgvhts9l47t3ou98.apps.googleusercontent.com
GOOGLE_SECRET=TFhMdQ_LheO3MEn3KHradDnO
GOOGLE_REDIRECT=http://www.tuts1.dev/social/handle/google


    'google' => [
        'client_id'     => env('GOOGLE_ID'),
        'client_secret' => env('GOOGLE_SECRET'),
        'redirect'      => env('GOOGLE_REDIRECT')
    ]

Now I need to modify views/partials/socials.blade.php file and add new button for Google+ login, like this:

<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
        <a href="{{ route('social.redirect', ['provider' => 'google']) }}" class="btn btn-lg waves-effect waves-light btn-block google">Google+</a>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <a href="{{ route('social.redirect', ['provider' => 'github']) }}" class="btn btn-lg waves-effect waves-light btn-block github">GitHub</a>
    </div>
</div>

That's it, Google+ Sign-in is now working.

Google oAuth Sign-in Implemented

Google oAuth Sign-in Implemented

You can find entire code used in this tutorial on Github
Online computer science courses to jumpstart your future.
WP Engine Managed WordPress Hosting

Trending

Newsletter

Subscribe to our newsletter for good news, sent out every month.

Tags