Source Code
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:
- Github
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
Aucun commentaire:
Enregistrer un commentaire