Laravel Socialite

Source: https://github.com/laravel/socialite

I want to practice ‘socialite’ app given by Laravel 5.3 documentation. Installation:

1. Open hosts file and Add a new domain ‘socialite.app’ at the file
   
   teddy@teddy-K43SJ:~/Homestead$ sudo gedit /etc/hosts

   1	teddy@teddy-K43SJ:~/Homestead$ sudo gedit /etc/hosts

   
   Add this line in the file:
   
   192.168.10.10 socialite.app

   1	192.168.10.10  socialite.app

2. Edit ‘Homestead.yaml’ file in ~/.homestead/ to add the new domain ‘socialite.app’ and set the mapping
   
   ... sites: ... - map: socialite.app to: /home/vagrant/Code/socialite/public ...

   1 2 3 4 5 6

   ... sites:     ...     - map: socialite.app       to: /home/vagrant/Code/socialite/public ...

3. Start vagrant with ‘vagrant up’ or if it already started up, refresh it with ‘vagrant provision’ then go into the ssh with ‘vagrant ssh’
4. Go into ‘Code’ directory then create a new laravel project ‘socialite’
   
   vagrant@homestead:~$ cd Code/ vagrant@homestead:~/Code$ composer create-project --prefer-dist laravel/laravel socialite Installing laravel/laravel (v5.3.16) - Installing laravel/laravel (v5.3.16) Loading from cache ... > php artisan key:generate Application key [base64:KYHaOwFIHGLog5xgPO5v1qjP/MDMKO9OL6ajTQGdQ4Q=] set successfully.

   1 2 3 4 5 6 7 8

   vagrant@homestead:~$ cd Code/ vagrant@homestead:~/Code$ composer create-project --prefer-dist laravel/laravel socialite Installing laravel/laravel (v5.3.16)   - Installing laravel/laravel (v5.3.16)     Loading from cache ... > php artisan key:generate Application key [base64:KYHaOwFIHGLog5xgPO5v1qjP/MDMKO9OL6ajTQGdQ4Q=] set successfully.

5. Test it at our browser with http://socialite.app/. If the laravel screen is showed up, we are on the right path.
6. Go into the new project ‘socialite’ root directory then add a dependency ‘laravel/socialite’
   
   vagrant@homestead:~/Code$ cd socialite/ vagrant@homestead:~/Code/socialite$ composer require laravel/socialite Using version ^2.0 for laravel/socialite ./composer.json has been updated Loading composer repositories with package information Updating dependencies (including require-dev) - Installing guzzlehttp/promises (1.3.0) Loading from cache - Installing psr/http-message (1.0.1) Loading from cache - Installing guzzlehttp/psr7 (1.3.1) Loading from cache - Installing guzzlehttp/guzzle (6.2.2) Loading from cache - Installing league/oauth1-client (1.7.0) Downloading: 100% - Installing laravel/socialite (v2.0.20) Downloading: 100% Writing lock file Generating autoload files > Illuminate\Foundation\ComposerScripts::postUpdate > php artisan optimize Generating optimized class loader The compiled class file has been removed.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

   vagrant@homestead:~/Code$ cd socialite/ vagrant@homestead:~/Code/socialite$ composer require laravel/socialite Using version ^2.0 for laravel/socialite ./composer.json has been updated Loading composer repositories with package information Updating dependencies (including require-dev)   - Installing guzzlehttp/promises (1.3.0)     Loading from cache     - Installing psr/http-message (1.0.1)     Loading from cache     - Installing guzzlehttp/psr7 (1.3.1)     Loading from cache     - Installing guzzlehttp/guzzle (6.2.2)     Loading from cache     - Installing league/oauth1-client (1.7.0)     Downloading: 100%             - Installing laravel/socialite (v2.0.20)     Downloading: 100%           Writing lock file Generating autoload files > Illuminate\Foundation\ComposerScripts::postUpdate > php artisan optimize Generating optimized class loader The compiled class file has been removed.

   
    
7. Configuration
   After installing the Socialite library, register the Laravel\Socialite\SocialiteServiceProvider in your config/app.php configuration file:
   
   ... 'providers' => [ ... Laravel\Socialite\SocialiteServiceProvider::class, ], ...

   1 2 3 4 5 6 7 8

   ... 'providers' => [       ...     Laravel\Socialite\SocialiteServiceProvider::class,   ], ...

   
   Also, add the Socialite facade to the aliases array in your app configuration file:
   
   ... 'aliases' => [ ... 'Socialite' => Laravel\Socialite\Facades\Socialite::class, ], ...

   1 2 3 4 5 6 7 8

   ... 'aliases' => [       ...     'Socialite' => Laravel\Socialite\Facades\Socialite::class,   ], ...

   
    
8. You will also need to add credentials for the OAuth services your application utilizes. These credentials should be placed in your config/services.php configuration file, and should use the key facebook, twitter, linkedin, google, github or bitbucket, depending on the providers your application requires. For example for facebook credentials:
   
   <?php return [ ... 'facebook' => [ 'client_id' => env('FB_APP_ID'), 'client_secret' => env('FB_APP_SECRET'), 'redirect' => env('FB_REDIRECT'), ], ];

   1 2 3 4 5 6 7 8 9 10 11 12 13

   <?php   return [       ...          'facebook' => [         'client_id' => env('FB_APP_ID'),         'client_secret' => env('FB_APP_SECRET'),         'redirect' => env('FB_REDIRECT'),     ],   ];

   
   we will use env file (.env) to store facebook credentials.
   
   FB_APP_ID=xxxxxxx FB_APP_SECRET=xxxxxx FB_REDIRECT=http://socialite.app/auth/facebook/callback

   1 2 3

   FB_APP_ID=xxxxxxx FB_APP_SECRET=xxxxxx FB_REDIRECT=http://socialite.app/auth/facebook/callback

   
   SORRY, ONLY ADMIN CAN SHOW THIS!
   REMEMBER ‘http://socialite.app/auth/facebook/callback’ IS CALLBACK URL (AFTER THE SUCCESSFUL LOGIN ON FACEBOOK). ALSO IT MUST MATCH WITH ROUTE ‘auth/facebook/callback’ IN /routes/web.php LATER!
9. Basic Usage
   Next, you are ready to authenticate users! You will need two routes: one for redirecting the user to the OAuth provider, and another for receiving the callback from the provider after authentication. We will access Socialite using the Socialite facade. Please create a new controller file ‘AuthController.php’ in /app/Http/Controllers/Auth/ to work with facebook login:
   
   <?php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use Socialite; class AuthController extends Controller { /** * Redirect the user to the GitHub authentication page. * * @return Response */ public function redirectToProvider() { return Socialite::driver('facebook')->redirect(); } /** * Obtain the user information from GitHub. * * @return Response */ public function handleProviderCallback() { $user = Socialite::driver('facebook')->user(); //var_dump($user); // $user->token; $data=array( 'name'=>$user->name, 'login_via'=>'Facebook' ); return view('home')->with('data',$data); //return redirect()->to('/')->with('data',$data); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

   <?php   namespace App\Http\Controllers\Auth;   use App\Http\Controllers\Controller; use Socialite;   class AuthController extends Controller {     /**      * Redirect the user to the GitHub authentication page.      *      * @return Response      */     public function redirectToProvider()     {         return Socialite::driver('facebook')->redirect();     }       /**      * Obtain the user information from GitHub.      *      * @return Response      */     public function handleProviderCallback()     {         $user = Socialite::driver('facebook')->user();         //var_dump($user);         // $user->token;         $data=array(             'name'=>$user->name,             'login_via'=>'Facebook'         );                  return view('home')->with('data',$data);         //return redirect()->to('/')->with('data',$data);     } }

   
   NOTE: DONT FORGET TO ADD ‘use App\Http\Controllers\Controller;’ BEFORE ‘use Socialite;’ BECAUSE I GOT AN ERROR ABOUT IT!
10. Creating Views. Create two new blade files. They are /resources/views/home.blade.php and /resources/views/master.blade.php:
    master.blade.php:
    
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="_token" content="{{ csrf_token() }}"/> <title>Social Login</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <style> body { padding-top : 70px; } </style> </head> <body> <div class="container"> @yield('content') </div> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </body> </html>

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

    <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="_token" content="{{ csrf_token() }}"/>     <title>Social Login</title>     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">     <style>         body {             padding-top : 70px;         }     </style> </head> <body>     <div class="container">         @yield('content')     </div>       <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </body> </html>

    
    home.blade.php:
    
    @extends('master') @section('content') @if(!empty($data)) <h1>Hello {{$data['name']}}, You logged in via {{ $data['login_via'] }}</h1> @else <div class="row"> <div class="col-md-6 col-md-offset-3"> <h2>Login Using Social Sites</h2> <a class="btn btn-primary" href="{{ url('/auth/facebook') }}">Facebook</a> </div> </div> @endif @stop

    1 2 3 4 5 6 7 8 9 10 11 12 13 14

    @extends('master')   @section('content')     @if(!empty($data))     <h1>Hello {{$data['name']}}, You logged in via {{ $data['login_via'] }}</h1>     @else     <div class="row">         <div class="col-md-6 col-md-offset-3">             <h2>Login Using Social Sites</h2>             <a class="btn btn-primary" href="{{ url('/auth/facebook') }}">Facebook</a>         </div>     </div>     @endif @stop

    
    url(‘/auth/facebook’) would redirect the page to facebookpage!
11. Set the routes. Edit /routes/web.php like this:
    
    Route::get('/', function () { //return view('welcome'); return view('home'); }); Route::get('auth/facebook', 'Auth\AuthController@redirectToProvider'); Route::get('auth/facebook/callback', 'Auth\AuthController@handleProviderCallback');

    1 2 3 4 5 6 7

    Route::get('/', function () {     //return view('welcome');     return view('home'); });   Route::get('auth/facebook', 'Auth\AuthController@redirectToProvider'); Route::get('auth/facebook/callback', 'Auth\AuthController@handleProviderCallback');

    
    We set the root (‘/’) url would open the home page (home.blade.php)
12. Test it! http://socialite.app/
    Here is the screenIf we click ‘Facebook’ link, it would redirect us to facebook page. The url would be like this: https://www.facebook.com/v2.8/dialog/oauth?client_id=166568033366882&redirect_uri=http%3A%2F%2Fsocialite.app&scope=email&response_type=code&state=es6ub834Woh7xDxTvdqru84U7kwiRJkftD83HFz7
    If I get this page Then I need to modify my facebook app to add this domain (http://socialite.app/) at ‘Site URL’ box. To do it, Open your app from https://developers.facebook.com/apps, then Click your app. Then at Settings->Basic->at Site Url fill with this domain name: http://socialite.app/. Then Save and fix any error.
    SORRY, ONLY ADMIN CAN SHOW THIS!
    Here is the oauth2 output from facebook for successful login:
    SORRY, ONLY ADMIN CAN SHOW THIS!
    Here is the callback result the successful facebook login
13. How to add the others social links (twitter, github, google plus and linkedin)?
    Please read Complete Laravel 5 Socialite tutorial to find out how to do it.
    You need to setup your apps for the above social app to get the credentials like Client ID and Client Secret and the redirect URL.
    To setup Google+ app, please read Google APIs
    To setup twitter app, please read Twitter Socialite App
    To setup github app, please read Github App
    To setup linkedin app, please read Linkedin Oauth2 App
    Then modify .env file to include above credentials:
    SORRY, ONLY ADMIN CAN SHOW THIS!
14. Here I want to make the redirect URL to be uniform like this:
    
    FB_APP_ID=XXX FB_APP_SECRET=XXX FB_REDIRECT=http://socialite.app/social/login/facebook GOOGLE_APP_ID=XXX GOOGLE_APP_SECRET=XXX GOOGLE_REDIRECT=http://socialite.app/social/login/google TWITTER_APP_ID=XXX TWITTER_APP_SECRET=XXX TWITTER_REDIRECT=http://socialite.app/social/login/twitter GITHUB_APP_ID=XXX GITHUB_APP_SECRET=XXX GITHUB_REDIRECT=http://socialite.app/social/login/github LINKEDIN_APP_ID=XXX LINKEDIN_APP_SECRET=XXX LINKEDIN_REDIRECT=http://socialite.app/social/login/linkedin

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

    FB_APP_ID=XXX FB_APP_SECRET=XXX FB_REDIRECT=http://socialite.app/social/login/facebook   GOOGLE_APP_ID=XXX GOOGLE_APP_SECRET=XXX GOOGLE_REDIRECT=http://socialite.app/social/login/google   TWITTER_APP_ID=XXX TWITTER_APP_SECRET=XXX TWITTER_REDIRECT=http://socialite.app/social/login/twitter   GITHUB_APP_ID=XXX GITHUB_APP_SECRET=XXX GITHUB_REDIRECT=http://socialite.app/social/login/github   LINKEDIN_APP_ID=XXX LINKEDIN_APP_SECRET=XXX LINKEDIN_REDIRECT=http://socialite.app/social/login/linkedin

    
    So modify our social routes in /routes/web.app like this:
    
    Route::get('social/login/redirect/{provider}', ['uses' => 'Auth\AuthController@redirectToProvider', 'as' => 'social.login']); Route::get('social/login/{provider}', 'Auth\AuthController@handleProviderCallback');

    1 2	Route::get('social/login/redirect/{provider}', ['uses' => 'Auth\AuthController@redirectToProvider', 'as' => 'social.login']); Route::get('social/login/{provider}', 'Auth\AuthController@handleProviderCallback');

    
     
15. Modify /config/services.php to get all the credentials from .env file
    
    <?php return [ ... 'facebook' => [ 'client_id' => env('FB_APP_ID'), 'client_secret' => env('FB_APP_SECRET'), 'redirect' => env('FB_REDIRECT'), ], 'twitter' => [ 'client_id' => env('TWITTER_APP_ID'), 'client_secret' => env('TWITTER_APP_SECRET'), 'redirect' => env('TWITTER_REDIRECT'), ], 'google' => [ 'client_id' => env('GOOGLE_APP_ID'), 'client_secret' => env('GOOGLE_APP_SECRET'), 'redirect' => env('GOOGLE_REDIRECT'), ], 'github' => [ 'client_id' => env('GITHUB_APP_ID'), 'client_secret' => env('GITHUB_APP_SECRET'), 'redirect' => env('GITHUB_REDIRECT'), ], 'linkedin' => [ 'client_id' => env('LINKEDIN_APP_ID'), 'client_secret' => env('LINKEDIN_APP_SECRET'), 'redirect' => env('LINKEDIN_REDIRECT'), ], ];

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

    <?php   return [       ...          'facebook' => [         'client_id' => env('FB_APP_ID'),         'client_secret' => env('FB_APP_SECRET'),         'redirect' => env('FB_REDIRECT'),     ],          'twitter' => [         'client_id' => env('TWITTER_APP_ID'),         'client_secret' => env('TWITTER_APP_SECRET'),         'redirect' => env('TWITTER_REDIRECT'),     ],          'google' => [         'client_id' => env('GOOGLE_APP_ID'),         'client_secret' => env('GOOGLE_APP_SECRET'),         'redirect' => env('GOOGLE_REDIRECT'),     ],          'github' => [         'client_id' => env('GITHUB_APP_ID'),         'client_secret' => env('GITHUB_APP_SECRET'),         'redirect' => env('GITHUB_REDIRECT'),     ],          'linkedin' => [         'client_id' => env('LINKEDIN_APP_ID'),         'client_secret' => env('LINKEDIN_APP_SECRET'),         'redirect' => env('LINKEDIN_REDIRECT'),     ],   ];

    
     
16. Modify /resources/views/home.blade.php to include all the social app
    
    @extends('master') @section('content') @if(!empty($data)) <h1>Hello {{$data['name']}}, You logged in via {{ $data['login_via'] }}</h1> @else <div class="row"> <div class="col-md-6 col-md-offset-3"> <h2>Login Using Social Sites</h2> <a class="btn btn-primary" href="{{ route('social.login','facebook') }}">Facebook</a> <a class="btn btn-primary" href="{{ route('social.login','twitter') }}">Twitter</a> <a class="btn btn-primary" href="{{ route('social.login','google') }}">Google+</a> <a class="btn btn-primary" href="{{ route('social.login','github') }}">Github</a> <a class="btn btn-primary" href="{{ route('social.login','linkedin') }}">Linkedin</a> </div> </div> @endif @stop

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

    @extends('master')   @section('content')     @if(!empty($data))     <h1>Hello {{$data['name']}}, You logged in via {{ $data['login_via'] }}</h1>     @else     <div class="row">         <div class="col-md-6 col-md-offset-3">             <h2>Login Using Social Sites</h2>             <a class="btn btn-primary" href="{{ route('social.login','facebook') }}">Facebook</a>             <a class="btn btn-primary" href="{{ route('social.login','twitter') }}">Twitter</a>             <a class="btn btn-primary" href="{{ route('social.login','google') }}">Google+</a>             <a class="btn btn-primary" href="{{ route('social.login','github') }}">Github</a>             <a class="btn btn-primary" href="{{ route('social.login','linkedin') }}">Linkedin</a>         </div>     </div>     @endif @stop

17. Modify /app/Http/Controllers/Auth/AuthController.php to add a parameter $provider
    
    ... class AuthController extends Controller { public function redirectToProvider($provider) { return Socialite::driver($provider)->redirect(); } public function handleProviderCallback($provider) { $user = Socialite::driver($provider)->user(); $data=array( 'name'=>$user->name, 'login_via'=>$provider ); return view('home')->with('data',$data); } }

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

    ...   class AuthController extends Controller {     public function redirectToProvider($provider)     {         return Socialite::driver($provider)->redirect();     }       public function handleProviderCallback($provider)     {         $user = Socialite::driver($provider)->user();         $data=array(             'name'=>$user->name,             'login_via'=>$provider         );                  return view('home')->with('data',$data);     } }

18. Run on your browserLogin via Facebook RUN WELL LIKE BEFORE!
    Login via Twitter, For the first time we are needed to authorize the applicationClick ‘Authorize app’. If nothing wrong, here is the callback resultSORRY, ONLY ADMIN CAN SHOW THIS!
    Login via Google, For the first time we are needed to authorize the applicationClick ‘Izinkan’. If nothing wrong, here is the callback result SORRY, ONLY ADMIN CAN SHOW THIS!
    Login via Github, For the first time we are needed to authorize the applicationClick ‘Authorize application’. If nothing wrong, here is the callback resultSORRY, ONLY ADMIN CAN SHOW THIS!
    Login via Linkedin, For the first time we are needed to authorize the applicationClick ‘Allow’. If nothing wrong, here is the callback resultSORRY, ONLY ADMIN CAN SHOW THIS!
19. OKAY! EVERYTHING RUN WELL. THE NEXT STEP IS TO USE DATABASE/SESSION TO SAVE THE LOGIN INFORMATION!
    For this, please read : Laravel 5.2 Socialite Facebook Login and Using Github authentication for login with Laravel Socialite.