Hallo sahabat ONPHPID, apa kabar?
Sekarang sudah bulan Agustus dan ternyata Laravel 5.5 yang katanya release bulan juli belum jadi di release, sambil kita menunggu Laravel 5.5 release, kita menggunakan Laravel 5.4 dulu ya. Kali ini kita akan belajar membuat Aplikasi web yang kita buat menggunakan Laravel bisa login menggunakan social media seperti facebook, github, google, linkedIn dan bitbucket. Hampir semua aplikasi web sekarang ada fitur tersebut, karena user baru biasanya agak malas untuk mengisi form registrasi yang panjang. Dengan adanya oAuth2 semua itu akan menjadi lebih mudah bagi user.
Sebelum lanjut Laravel 5.4 – Login with Facebook, Google, Github, LinkedIn and Bitbucket Bahasa Indonesia, ONPHPID asumsikan teman-teman sudah tau cara mendapatkan client_id dan secret_id dari facebook, dll. Karena akan kita gunakan pada tutorial ini. Di Laravel sendiri tersedia packages Socialite yang sangat mudah menggunakannya. Bagaimana implementasi Laravel Socialite di Aplikasi web kita? yukk kita coba bersama.
Sebelumnya ONPHPID asumsikan teman-teman sudah menginstall project Laravel baru yaitu Laravel 5.4, membuat database dan sudah menjalankan
|
1 |
php artisan make:auth |
setelah itu kita install packages Laravel/Socialite dulu dengan cara
|
1 |
composer require laravel/socialite |
jika sudah selesai, teman-teman bisa buka file app.php yang berada di config/, kemudian tambahkan code berikut
app.php
|
1 2 3 4 5 6 7 8 9 |
'providers' => [ // di provider Laravel\Socialite\SocialiteServiceProvider::class, ], 'aliases' => [ // alias 'Socialite' => Laravel\Socialite\Facades\Socialite::class, ], |
kemudian buka file service.php yang berada di config/ dan tambahkan code berikut:
service.php
|
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 |
'github' => [ 'client_id' => env('GITHUB_KEY'), 'client_secret' => env('GITHUB_SECRET'), 'redirect' => env('GITHUB_CALLBACK_URL'), ], 'google' => [ 'client_id' => env('GOOGLE_KEY'), 'client_secret' => env('GOOGLE_SECRET'), 'redirect' => env('GOOGLE_CALLBACK_URL'), ], 'facebook' => [ 'client_id' => env('FACEBOOK_KEY'), 'client_secret' => env('FACEBOOK_SECRET'), 'redirect' => env('FACEBOOK_CALLBACK_URL'), ], 'bitbucket' => [ 'client_id' => env('BITBUCKET_KEY'), 'client_secret' => env('BITBUCKET_SECRET'), 'redirect' => env('BITBUCKET_CALLBACK_URL'), ], 'linkedin' => [ 'client_id' => env('LINKEDIN_KEY'), 'client_secret' => env('LINKEDIN_SECRET'), 'redirect' => env('LINKEDIN_CALLBACK_URL'), ], |
buka file .env dan isi dengan client_id dan secret_key yang teman-teman dapatkan. seperti di bawah ini
.env
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
GITHUB_KEY=689e0acd6291d228d9 GITHUB_SECRET=0d5130692bed5b9c0fde870fce30fa8e50283e GITHUB_CALLBACK_URL=http://localhost:8000/social-media/registered/github GOOGLE_KEY=1067955128684-css1sofpblgl8us9sddq98btdckbbr.apps.googleusercontent.com GOOGLE_SECRET=NHTgS98vMj6LCH5BQQz0b7 GOOGLE_CALLBACK_URL=http://localhost:8000/social-media/registered/google FACEBOOK_KEY=2428111161776 FACEBOOK_SECRET=518eb96c7e8a68f53ecbdc7a8d87d2 FACEBOOK_CALLBACK_URL=http://localhost:8000/social-media/registered/facebook BITBUCKET_KEY=LDaZHw5CP3rLkPGe BITBUCKET_SECRET=mT3Pt8QSbKh7xVexgxuEFBpQVBe3jq BITBUCKET_CALLBACK_URL=http://127.0.0.1:8000/social-media/registered/bitbucket LINKEDIN_KEY=86yzd489j7v4 LINKEDIN_SECRET=tXqkz0MnYRfOyc LINKEDIN_CALLBACK_URL=http://127.0.0.1:8000/social-media/registered/linkedin |
Setting socialite selesai, setelah itu kita tambahkan link di file login.blade.php agar dapat mengakses routing yang disediakan. Untuk itu kita tambahkan code berikut:
login.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="form-group"> <div class="col-md-12"> <center> <a href="{{ URL('social-media/register/facebook') }}" class="btn btn-info"> Facebook </a> <a href="{{ URL('social-media/register/github') }}" class="btn btn-default"> Github </a> <a href="{{ URL('social-media/register/google') }}" class="btn btn-danger"> Google </a> <a href="{{ URL('social-media/register/bitbucket') }}" class="btn btn-primary"> Bitbucket </a> <a href="{{ URL('social-media/register/linkedin') }}" class="btn btn-primary"> LinkedIn </a> </center> </div> </div> |
sekarang kita buka file Model User.php migrations user dan ubah menjadi seperti dibawah ini:
User.php
|
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 |
<?php namespace App; use App\Models\SocialAccount; use Illuminate\Notifications\Notifiable; use Illuminate\Foundation\Auth\User as Authenticatable; class User extends Authenticatable { use Notifiable; /** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'name', 'email', 'password', 'avatar' ]; /** * The attributes that should be hidden for arrays. * * @var array */ protected $hidden = [ 'password', 'remember_token', ]; public function socialAccount() { return $this->hasMany(SocialAccount::class); } } |
user_migrations.php
|
1 2 3 4 5 6 7 8 9 |
Schema::create('users', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->string('email')->unique()->nullable(); $table->string('password')->nullable(); $table->string('avatar')->nullable(); $table->rememberToken(); $table->timestamps(); }); |
setelah itu kita buat Model dan migrations baru dengan nama SocialAccount.php. Masih ingat kan cara membuatnya? jika lupa teman-teman bisa membaca lagi artikel ini.
|
1 |
php artisan make:model Models/SocialAccount -m |
SocialAccount.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php namespace App\Models; use App\User; use Illuminate\Database\Eloquent\Model; class SocialAccount extends Model { protected $fillable = [ 'user_id', 'provider_user_id', 'provider', 'created_at', 'updated_at' ]; public function user() { return $this->belongsTo(User::class); } } |
social_accounts_migrations.php
|
1 2 3 4 5 6 7 |
Schema::create('social_accounts', function (Blueprint $table) { $table->increments('id'); $table->integer('user_id')->nullable(); $table->string('provider_user_id'); $table->string('provider'); $table->timestamps(); }); |
Jika sudah teman-teman bisa melakukan migrate semua tablenya.
|
1 |
php artisan migrate |
Sekarang kita buat Trait di direktori app/Http/Trait/ dengan nama SocialCheckService.php dan buat code seperti dibawah ini:
SocialCheckService.php
|
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 39 40 41 42 43 44 45 46 |
<?php namespace App\Http\Traits; use App\User; use App\Models\SocialAccount; use Laravel\Socialite\Contracts\User as ProviderUser; trait SocialCheckService { protected function checkUser(ProviderUser $providerUser, $provider) { $account = SocialAccount::whereProvider($provider) ->whereProviderUserId($providerUser->getId()) ->first(); if ($account){ $this->updateIfExistUser($providerUser, $account->user); return $account->user; }else{ $existEmail = User::whereEmail($providerUser->getEmail())->first(); if($existEmail){ $this->updateIfExistUser($providerUser, $existEmail); $user = $existEmail; }else{ $user = User::firstOrCreate([ 'name' => $providerUser->getName(), 'email' => $providerUser->getEmail(), 'avatar' => $providerUser->getAvatar(), ]); } $account = $user->socialAccount()->create([ 'provider_user_id' => $providerUser->getId(), 'provider' => $provider, ]); } return $user; } // Jika emailnya pernah daftar update user where email sama dengan yang login private function updateIfExistUser($providerUser, $existEmail) { $existEmail->update([ 'name' => $providerUser->getName(), 'avatar' => $providerUser->getAvatar(), ]); } } |
kemudian buat controller baru dengan nama SocialiteController di app/Http/Controllers/Auth
|
1 |
php artisan make:controller Auth/SocialiteController |
dan buat menjadi seperti dibawah ini
SocialiteController.php
|
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 |
<?php namespace App\Http\Controllers\Auth; use Socialite; use Illuminate\Http\Request; use App\Http\Traits\SocialCheckService; use App\Http\Controllers\Controller; class SocialiteController extends Controller { use SocialCheckService; public function register($provider) { return Socialite::driver($provider)->redirect(); } public function registered(Request $request, $provider) { if(isset($request->error)) return redirect() ->to('login'); try { $userProvider = Socialite::driver($provider)->stateless()->user(); $user = $this->checkUser($userProvider, $provider); auth()->login($user); return redirect() ->to('/home'); // $user->token; } catch (Exception $e) { return redirect() ->to('login'); } } } |
jika sudah kita daftarkan routenya di web.php dengan menambahkan route dibawah ini:
web.php
|
1 2 3 4 |
Route::group(['prefix' => 'social-media', 'namespace' => 'Auth'], function(){ Route::get('register/{provider}', 'SocialiteController@register'); Route::get('registered/{provider}', 'SocialiteController@registered'); }); |
selesai…
waktunya kita testing, dan teman-teman akan mendapatkan error yang disebabkan oleh file SocialCheckService.php yang berada di app/Http/Trait/. Karena file tersebut belum dikenali oleh autoload composer maka kita daftarkan dulu dengan cara jalankan command berikut
|
1 2 3 |
composer dump-autoload atau composer dumpautoload |
setelah itu insyaallah aplikasi berjalan dengan normal seperti di bawah ini:
Baca Juga : Membuat Sendiri Widget Sederhana WordPress
Sekian dulu Tutorial Laravel 5.4 – Login with Facebook, Google, Github, LinkedIn and Bitbucket Bahasa Indonesia. Jika ada hal yang kurang jelas atau ingin ditanyakan dapat melalui komentar. JANGAN LUPA like FANSPAGE ONPHPID untuk update informasi dan Subscribe Channel ONPHPID Tutorial. Selamat Belajar…
