✔ Laravel 5.5 Socialite : Login With Twitter, Facebook, Google, Github, Linkedin Etc #Part1

Laravel 5.5 tutorial for beginners, this lesson will show you how to create simple login or register with social media like twitter, facebook, Google, Github, Linkedin etc using socialite package in Laravel 5.5.

Video Tutorial Laravel 5.5 Socialite Login with Twitter 

Create Project Socialite Login/Register with Twitter

 composer create-project laravel/laravel socialitelogin 

Create Database and setup connection to the Laravel prjoect.

next we need to use Laravel Authentication, please run this artisan command,

 php artisan make:auth 

Next, run Laravel migration

 php artisan migrate 

There are many different sites and packages which you can integrate on your site to provide social login functionality. Laravel has released its own package name Socialite which you can use in your projects. Currently socialite support following social logins:

1. Facebook
2. Twitter
3. LinkedIn
4. Github
5. Google

Installing and Setting Up Socialite

Now in your laravel project run the following command to install Laravel Socialite.

 composer require laravel/socialite 

Once the package is installed open 'app/config.php' file and add the following line in providers array.

 Laravel\Socialite\SocialiteServiceProvider::class, 

Now add the following line in aliases array.

 'Socialite' => Laravel\Socialite\Facades\Socialite::class, 

Now Socialite is setup in your app. Let’s now handle our Login controller to handle social login request.

Modifying LoginController

In this tutorial I am keeping in mind that you have created an auth system using laravel auth command. Now open ‘app/Http/Controllers/Auth/LoginController.php’ file. Now add the following methods in it.

 <?php namespace AppHttpControllersAuth; use AppHttpControllersController; use IlluminateFoundationAuthAuthenticatesUsers; use Socialite; use AppUser; use Auth;  class LoginController extends Controller {     use AuthenticatesUsers;     protected $redirectTo = '/home';     public function __construct()     {         $this->middleware('guest')->except('logout');     }      public function socialLogin($social) {       return Socialite::driver($social)->redirect();     }      public function handleProviderCallback($social){       $userSocial = Socialite::driver($social)->user();       $user = User::where(['email' => $userSocial->getEmail()])->first();       if ($user) {         Auth::login($user);         return redirect()->action('HomeController@index');       } else {         return view('auth.register', ['name' => $userSocial->getName(),'email'=> $userSocial->getEmail()]);       }     } } 

Creating Routes for Social Login in Laravel

Now open routes/web.php file and add the following routes in it.

 <?php  Route::get('/', function () {     return view('welcome'); }); Auth::routes(); Route::get('/home', 'HomeController@index')->name('home'); Route::get('/login/{social}','AuthLoginController@socialLogin')         ->where('social','twitter|facebook|linkedin|google|github'); Route::get('/login/{social}/callback','AuthLoginController@handleProviderCallback')         ->where('social','twitter|facebook|linkedin|google|github'); 

Updating Login Page

For social login buttons I am going to use Social Buttons for bootstrap. Now open resources/views/auth/login.blade.php and add a following div in form after csrf field.

 @extends('layouts.app')  @section('content') <div class="container">     <div class="row">         <div class="col-md-8 col-md-offset-2">             <div class="panel panel-default">                 <div class="panel-heading">Login</div>                  <div class="panel-body">                     <form class="form-horizontal" method="POST" action="{{ route('login') }}">                         {{ csrf_field() }}                          <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">                             <label for="email" class="col-md-4 control-label">E-Mail Address</label>                              <div class="col-md-6">                                 <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>                                  @if ($errors->has('email'))                                     <span class="help-block">                                         <strong>{{ $errors->first('email') }}</strong>                                     </span>                                 @endif                             </div>                         </div>                          <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">                             <label for="password" class="col-md-4 control-label">Password</label>                              <div class="col-md-6">                                 <input id="password" type="password" class="form-control" name="password" required>                                  @if ($errors->has('password'))                                     <span class="help-block">                                         <strong>{{ $errors->first('password') }}</strong>                                     </span>                                 @endif                             </div>                         </div>                          <div class="form-group">                             <div class="col-md-6 col-md-offset-4">                                 <div class="checkbox">                                     <label>                                         <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me                                     </label>                                 </div>                             </div>                         </div>                          <div class="form-group">                             <div class="col-md-8 col-md-offset-4">                                 <button type="submit" class="btn btn-primary">                                     Login                                 </button>                                  <a class="btn btn-link" href="{{ route('password.request') }}">                                     Forgot Your Password?                                 </a>                             </div>                         </div>                          <div class="form-group">                           <label class="col-md-4 control-label">Or login with</label>                           <div class="row">                           </div>                           <div class="col-md-8 col-md-offset-2">                             <a href="{{ url('login/twitter') }}" class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i> Twitter</a>                             <a href="{{ url('login/facebook') }}" class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>                             <a href="{{ url('login/google') }}" class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i> Google</a>                             <a href="{{ url('login/linkedin') }}" class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i> Linkedin</a>                             <a href="{{ url('login/github') }}" class="btn btn-social-icon btn-github"><i class="fa fa-github"></i> Github</a>                           </div>                         </div>                     </form>                 </div>             </div>         </div>     </div> </div> @endsection 

Updating Register Page

In register page we need to do two things. First we need to add Social Login Buttons and second we need to handle the user data comes from social logged in. First add the following div after csrf field.

 @extends('layouts.app')  @section('content') <div class="container">     <div class="row">         <div class="col-md-8 col-md-offset-2">             <div class="panel panel-default">                 <div class="panel-heading">Register</div>                  <div class="panel-body">                     <form class="form-horizontal" method="POST" action="{{ route('register') }}">                         {{ csrf_field() }}                          <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">                             <label for="name" class="col-md-4 control-label">Name</label>                              <div class="col-md-6">                                  @if(!empty($name))                                   <input id="name" type="text" class="form-control" name="name" value="{{ $name }}" required autofocus>                                 @else                                   <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>                                 @endif                                  @if ($errors->has('name'))                                     <span class="help-block">                                         <strong>{{ $errors->first('name') }}</strong>                                     </span>                                 @endif                             </div>                         </div>                          <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">                             <label for="email" class="col-md-4 control-label">E-Mail Address</label>                              <div class="col-md-6">                                  @if(!empty($email))                                   <input id="email" type="email" class="form-control" name="email" value="{{ $email }}" required>                                 @else                                   <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required>                                 @endif                                 @if ($errors->has('email'))                                     <span class="help-block">                                         <strong>{{ $errors->first('email') }}</strong>                                     </span>                                 @endif                             </div>                         </div>                          <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">                             <label for="password" class="col-md-4 control-label">Password</label>                              <div class="col-md-6">                                 <input id="password" type="password" class="form-control" name="password" required>                                  @if ($errors->has('password'))                                     <span class="help-block">                                         <strong>{{ $errors->first('password') }}</strong>                                     </span>                                 @endif                             </div>                         </div>                          <div class="form-group">                             <label for="password-confirm" class="col-md-4 control-label">Confirm Password</label>                              <div class="col-md-6">                                 <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>                             </div>                         </div>                          <div class="form-group">                             <div class="col-md-6 col-md-offset-4">                                 <button type="submit" class="btn btn-primary">                                     Register                                 </button>                             </div>                         </div>                          <div class="form-group">                           <label class="col-md-4 control-label">Or Register with</label>                           <div class="row">                           </div>                           <div class="col-md-8 col-md-offset-2">                             <a href="{{ url('login/twitter') }}" class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i> Twitter</a>                             <a href="{{ url('login/facebook') }}" class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>                             <a href="{{ url('login/google') }}" class="btn btn-social-icon btn-google-plus"><i class="fa fa-google-plus"></i> Google</a>                             <a href="{{ url('login/linkedin') }}" class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i> Linkedin</a>                             <a href="{{ url('login/github') }}" class="btn btn-social-icon btn-github"><i class="fa fa-github"></i> Github</a>                           </div>                         </div>                     </form>                 </div>             </div>         </div>     </div> </div> @endsection 

Setting Up Twitter Sign-in

You must have an twitter acount before, then go to this url http://apps.twitter.com and create new Application

Now open config/services.php file and add the following line in it.

 'twitter' => [       'client_id' => 'TrGmxtiFvMVQdghQOkAlTtVe',       'client_secret' => 'Iz2LybMy67fV4wwHw25UPzmnXcBQYxTfjGw4sK71Q0RRsRtZh5',       'redirect' => 'http://127.0.0.1:8000/login/twitter/callback'     ], 

More Laravel Video Tutorial :

See you next lessons ...

Sumber http://scqq.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: