Login Dengan Social Media di Laravel Menggunakan Socialite #6 : Membuat OAuth Dengan Socialite - Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat OAuth menggunakan Laravel Socialite.
Pada seri tutorial kali ini kita semua akan belajar dengan 2 provider saja yaitu facebook dan GitHub, meskipun begitu untuk implementasinya dengan provider lain saja saja.
Langkah 1 - Membuat Controller SocialAccount
Silahkan teman-teman jalankan perintah dibawah ini untuk membuat Controller Socialite :
php artisan make:controller Auth/SocialiteController
Setelah berhasil, silahkan teman-teman buke filenya di App/Http/Controllers/Auth/SocialiteController.php dan silahkan teman-teman ubah kodenya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\SocialAccount;
use App\User;
use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;
class SocialiteController extends Controller
{
/**
* @param $provider
* @return \Symfony\Component\HttpFoundation\RedirectResponse
*/
public function redirectToProvider($provider)
{
return Socialite::driver($provider)->redirect();
}
/**
* @param $provider
* @return \Illuminate\Http\RedirectResponse
*/
public function handleProvideCallback($provider)
{
try {
$user = Socialite::driver($provider)->user();
}catch (Exception $e) {
return redirect()->back();
}
$authUser = $this->findOrCreateUser($user, $provider);
Auth()->login($authUser, true);
return redirect()->route('home');
}
/**
* @param $socialUser
* @param $provider
* @return mixed
*/
public function findOrCreateUser($socialUser, $provider)
{
$socialAccount = SocialAccount::where('provider_id', $socialUser->getId())
->where('provider_name', $provider)
->first();
if ($socialAccount) {
return $socialAccount->user;
} else {
$user = User::where('email', $socialUser->getEmail())->first();
if (! $user) {
$user = User::create([
'name' => $socialUser->getName(),
'email' => $socialUser->getEmail()
]);
}
$user->socialAccounts()->create([
'provider_id' => $socialUser->getId(),
'provider_name' => $provider
]);
return $user;
}
}
}
Langkah 2 - Menambahkan Route
Setelah kita berhasil membuat Controller beserta fungsi-fungsinya, sekarang kita lanjutkan untuk membuat sebuah route.
Silahkan teman-teman buka file routes/web.php dan silahkan teman-teman tambahkan kode dibawah ini :
/**
* socialite auth
*/
Route::get('/auth/{provider}', 'Auth\SocialiteController@redirectToProvider');
Route::get('/auth/{provider}/callback', 'Auth\SocialiteController@handleProvideCallback');
Langkah 3 - Menambahkan Button Login Facebook & GitHub
Selanjutnya kita akan menambahkan button Facebook & GitHub di dalam Auth Project kita. Silahkan teman-teman buka file resources/views/auth/login.blade.php dan ubahlah menjadi seperti berikut ini :
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Login') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
<hr>
<a href="/auth/facebook" class="btn btn-primary">
Login Dengan Facebook
</a>
<a href="/auth/github" class="btn btn-dark">
Login Dengan GitHub
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
kemudian teman-teman juga buka file resources/views/auth/register.blade.php dan ubahlah menjadi seperti berikut ini :
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Register') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('register') }}">
@csrf
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete=“email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Register') }}
</button>
<hr>
<a href="/auth/facebook" class="btn btn-primary btn-block">
Register Dengan Facebook
</a>
<a href="/auth/github" class="btn btn-dark btn-block">
Register Dengan GitHub
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Langkah 4 - Uji Coba Tampilan
Sekarang Silahkan teman-teman jalankan projectnya dengan perintah dibawah ini :
php artisan serve
Jika berhasil teman-teman akan melihat kurang lebih tampilannya seperti berikut ini :
CATATAN ! : disini kita belum bisa menggunakan fungsi Auth dengan Socialite, karena kita belum mendapatkan CLIENT ID dan SECRET ID dari masing-masing provider.
Di artikel selanjutnya kita akan belajar bagaimana cara mendapatkan CLEINT ID dan SECRET ID tersebut dari masing-masing provider seperti Facebook & GitHub.
Terima Kasih