Facebook Login Tutorial dengan Laravel 5.7 dan Socialite

Hari ini kita akan membahas bagaimana login menggunakan akun Facebook di Laravel 5.7 dan menyimpan data user kedalam database MySQL menggunakan official package Socialite .

Sebelum memulai, pastikan anda sudah familiar dengan PHP Framework Laravel (dokumentasi lengkap cek di official website Laravel) dan telah memahami atau minimal sudah membaca package Socialite.

Kali ini, kita akan menggunakan laravel versi 5.7, untuk tahapan instalasi dan penjelasan lengkapnya bisa lihat di documentation Laravel 5.7 . dan socialite yang support versi 5.7.

Pertama, kita download file Laravel 5.7 via CLI menggunakan perintah berikut ini :

composer create-project --prefer-dist laravel/laravel tes-socialite "5.7.*"

Jika download sudah selesai, jangan lupa untuk setting file .env ya, sesuaikan dengan alamat dan nama database yang kalian gunakan

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Coba kita testing dengan menjalanakan perintah berikut :

php artisan serve

Secara default, laravel memiliki 2 file migration, sebelum kita menjalankan perintah migration, tambahkan kode berikut ini pada folder app/providers/AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Schema;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Schema::defaultStringLength(191);
    }
}

Setelah kita setting file AppServiceProvider, selanjutnya kita jalankan perintah migration

php artisan migrate

Jika migration berhasil, cek database anda maka akan muncul tabel baru sesuai migration file yang anda miliki. Next, kita perlu fitur user otentikasi, jalankan perintah ini untuk mengaktifkan fiture tersebut

php artisan make:auth

Jika berhasil, akan muncul beberapa file baru seperti tampilan (resources/views/auth), model dan kontroller.

Sekarang, kita akan install package Socialite, jalankan perintah berikut ini :

composer require laravel/socialite

Tunggu hingga proses instalasi dan download file selesai.

Buka file app.php (config/app.php), dan pada section “providers”, tambahkan kode berikut ini

<?php

// app.php

'providers' => [
    // Other service providers...

    Laravel\Socialite\SocialiteServiceProvider::class,
],

Masih di file app.php tambahkan kode berikut ini di section “alias”

<?php

// app.php

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

Next, kita pindah dulu ke konfigurasi Facebook, untuk mengintegrasikan Laravel dan Facebook Login, kita perlu token key, caranya coba kunjungi website Facebook for Developer lalu login menggunakan akun facebook anda.

Perhatikan di bagian menu dashboard, pilih menu Aplikasi Saya (Indonesia)

Maka akan muncul list aplikasi yang telah kita buat, secara default ini masih kosong ya klo belum pernah pakai sebelumnya. Pilih card Tambahkan Sebuah Aplikasi Baru

Selanjutnya anda akan diminta untuk memberikan nama aplikasi (tanpa spasi contoh : login-socialitie) juga alamat email facebook anda.

Next, pilih tombol Buat ID Aplikasi, maka id aplikasi anda akan muncul (hati-hati, kode ini rahasia yaa). Selanjutnya, akan muncul layanan-layanan facebook yang bisa kita gunakan, karena kita ingin menggunakan layanan login facebook, maka pilih layanan Masuk Facebook/Facebook Login.

Saat muncul tampilan seperti ini, skip (lewati) saja dulu.

Arhkan ke menu Pengaturan/Setting -> Dasar/Basic. kita mau mengambil ID Aplikasi dan Kunci Rahasia (secret key). di halaman ini kita juga bisa menambahkan data-data aplikasi lainnya seperti log, URL , dll (tidak wajib diisi).

Kembali ke project Laravel, buka file config/services.php, dan tambahkan kode berikut ini :

<?php

// services.php

'facebook' => [
    'client_id' => 'xxxxxxx',
    'client_secret' => 'xxxxxxxx',
    'redirect' => '',
],

Client ID dan Secret Client isikan sesuai yang sudah didapatkan dari Facebook Developers.

Selanjutnya, buatlah kontroller baru dengan perintah sebagai berikut :

php artisan make:controller SocialAuthFacebookController

Buka file SocialAuthFacebookController , dan isikan kode berikut

<?php


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Socialite;
use App\Services\SocialFacebookAccountService;

class SocialAuthFacebookController extends Controller
{
  /**
   * Create a redirect method to facebook api.
   *
   * @return void
   */
    public function redirect()
    {
        return Socialite::driver('facebook')->redirect();
    }

    /**
     * Return a callback method from facebook api.
     *
     * @return callback URL from facebook
     */
    public function callback(SocialFacebookAccountService $service)
    {
        $user = $service->createOrGetUser(Socialite::driver('facebook')->user());
        auth()->login($user);
        return redirect()->to('/home');
    }
}

Next buat route, buka file Route/Web.php, dan tambahkan kode route baru sebagai berikut :

Route::get('/redirect', 'SocialAuthFacebookController@redirect');
Route::get('/callback', 'SocialAuthFacebookController@callback');

Selanjutnya, buka file config/services.php, isikan kode berikut :

<?php

// services.php

'facebook' => [
    'client_id' => 'xxxxxxx',
    'client_secret' => 'xxxxxxx',
    'redirect' => 'http://localhost:8000/callback',
],

Tahap terakhir, kita harus melakukan modifikasi file blade

Pertama kita modifikasi file blade login (resources/views/auth/login.blade.php)

@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>
                        <br />
                        <p style="margin-left:265px">OR</p>
                        <br />
                        <div class="form-group">
                            <div class="col-md-8 col-md-offset-4">
                              <a href="{{url('/redirect')}}" class="btn btn-primary">Login with Facebook</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Jika diperhatikan, baris kode diatas tidak banyak merubah blade default login Laravel, hanya menambahkan button / tombol Login with Facebook.

Selanjutnya, kita akan membuat file migration dan model untuk mengindentifikasi dan menyimpan user detail akun facebook. Jalankan perintah berikut :

php artisan make:model SocialFacebookAccount -m

Cek file migration database/migrations/create_social_facebook_account_table.php, masukkan kode berikut ini

<?php

 // create_social_facebook_accounts.php

 use Illuminate\Support\Facades\Schema;
 use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Database\Migrations\Migration;

 class CreateSocialFacebookAccountsTable extends Migration
 {
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('social_facebook_accounts', function (Blueprint $table) {
          $table->integer('user_id');
          $table->string('provider_user_id');
          $table->string('provider');
          $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('social_facebook_accounts');
    }
 }

Lalu jalankan perintah migration untuk memperbarui tabel pada database dengan perintah berikut ini :

php artisan migrate:refresh

Perintah diatas dilakukan untuk mengulang seluruh migration yang sudah dijalankan. Namun apabila anda hanya ingin melakukan migrate pada file migration baru, cukup gunakan perintah php artisan migrate.

Cek file model App/SocialFacebookAccount.php kita akan memberikan perintah relasi data, ikuti dan ketikan kode berikut ini :

<?php

// SocialFacebookAccount.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class SocialFacebookAccount extends Model
{
  protected $fillable = ['user_id', 'provider_user_id', 'provider'];

  public function user()
  {
      return $this->belongsTo(User::class);
  }
}

Selanjutnya buatlah folder baru didalam folder App dengan nama folder Services. Lalu tambahkan sebuah file baru didalam folder Services, yaitu SocialFacebookAccountService.php (dibuat manual, tidak menggunakan perintah command line). Ketikan kode berikut ini :

<?php

namespace App\Services;
use App\SocialFacebookAccount;
use App\User;
use Laravel\Socialite\Contracts\User as ProviderUser;

class SocialFacebookAccountService
{
    public function createOrGetUser(ProviderUser $providerUser)
    {
        $account = SocialFacebookAccount::whereProvider('facebook')
            ->whereProviderUserId($providerUser->getId())
            ->first();

        if ($account) {
            return $account->user;
        } else {

            $account = new SocialFacebookAccount([
                'provider_user_id' => $providerUser->getId(),
                'provider' => 'facebook'
            ]);

            $user = User::whereEmail($providerUser->getEmail())->first();

            if (!$user) {

                $user = User::create([
                    'email' => $providerUser->getEmail(),
                    'name' => $providerUser->getName(),
                    'password' => md5(rand(1,10000)),
                ]);
            }

            $account->user()->associate($user);
            $account->save();

            return $user;
        }
    }
}

And Finally, coba jalankan aplikasi laravel anda menggunakan perintah php artisan serve.

Jika konfigurasi kita berhasil, maka saat user menekan tombol Login with Facebook, akan muncul popup halaman Facebook dan meminta permission untuk mengakses facebook.

Good Luck, selamat mencoba, saran atau pertanyaan selanjutnya bisa dituliskan di kolom komentar ya…