Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Laravel 8 Socialite Login dan Register Facebook

8 min read

Tutorial Login Register Auth Laravel 8 Facebook
Loading...

Tutorial Laravel 8 Socialite Login dan Register Menggunakan Facebook. Pada kesempatan kali ini ilmucoding akan membahas login dan register menggunakan Facebook di Laravel 8. Library yang akan digunakan adalah Socialite dan akan dihubungkan ke Laravel 8. Pustaka yang satu ini sudah sangat familiar digunakan oleh developer yang ingin web applicationnya terhubung dengan salah satu sosial media terbesar di dunia.

Zaman sekarang, banyak user yang tidak mau repot membuat akun baru pada situs-situs lainnya. Mereka tidak mau pusing soal register dan login dengan akun yang baru. Menurut saya pribadi, lebih enak buat 1 akun saja di media sosial, lalu akun tersebut bisa terhubung dengan situs lainnya. Dengan begitu tidak perlu repot-repot bikin akun baru lagi.

Dari problematika itu, kini hadir Package Socialite yang sudah mendukung Laravel 8. Salah satu pustaka yang dapat mengatasi permasalahan yang kita bahas sebelumnya.

Nah, Facebook akan kita jadikan sosial media untuk melakukan register dan login. Di sini, akan diberikan panduan step by step untuk membuat Laravel 8 Socialite Facebook.

Penasaran gimana caranya?

Yuk ikuti tutorial ini sampai habis…

Baca Juga: Tutorial Membuat Auth Sederhana di Laravel 8

Loading...
ilustrasi socialite laravel 8
Sumber Gambar: Freepik

Ilustrasi Udin Ikutan Register

Di negeri antah berantah, Udin hidup dengan fasilitas digital yang lengkap. Mau ke mana aja, beli apa aja, dan mau ngapain aja tinggal “klik” dari smartphonenya.

Suatu pagi Udin membeli bakso semangkuk via app GoBakso, tapi ia harus mendaftar karena belum punya akun di sana.

“No Problemkata si Udin.

Tinggal masukin nama, email sama password. Beres.

Besoknya Udin beli pakaian di app marketplace UshopLapakPedia. Kebetulan belum punya akun juga.

Yaudah lah si Udin register dulu.

“Santuy….” kata si Udin.

Loading...

Beres beli pakaian, Udin mendaftar di salah satu perguruan tinggi.

Hmmm … Udin udah mulai mikir nih banyak banget form yang mesti di isi.

Register lagi.

Selesai ngisi form yang panjang itu, Udin ngedumel karena saking banyaknya form yang harus diisi.

Sambil ngedumel, dia beli Es Cendol untuk mendinginkan kepala di app BeliEsAja.

Lupa buat akun, Udin ngisi form lagi buat register.

Besoknya …

Loading...

“Kenapa sih ga bikin satu akun aja buat semuanya? Ribet banget harus daftar mulu dan gonta ganti password.”

Problem Solved Laravel 8 Socialite Facebook, Google, and Many More
Sumber Gambar: Medium

Laravel Socialite jawaban dari kegelisahan si Udin.

Sekarang Udin tinggal bikin satu akun di media sosial, lalu kalau mau register di web atau app lain, tinggal pakai akun yang sudah ada aja.

Nggak pake ribet.

Baca Juga: Tutorial Membuat Auth Sederhana di Laravel 7

Laravel 8 Socialite with Facebook

Setelah kita tahu mengapa dan apa yang menjadi masalah user selama ini, kita akan mempelajari cara membuat sistem login dan register menggunakan Facebook.

Berikut panduan step by step cara membuat fitur login dan register dengan Facebook di Laravel 8:

Loading...

Step 1: Persiapan Belajar Laravel 8 Socialite with Facebook

Sekedar informasi, agar tutorial ini berjalan dengan lancar, pastikan kita memenuhi system requirement sebagai berikut ini:

  • Minimal PHP Versi 7.3
  • Tersedia Composer
  • Aktifkan Web Server
  • Buka Text Editor

Laravel 8 memiliki persyaratan PHP yaitu 7.3 ke atas. Nah, untuk versi PHP yang saat ini ilmucoding gunakan adalah Versi 7.3. Kita bisa download di situs resminya. Silahkan download PHP 7.3 sekarang apabila belum memilikinya.

Sedangkan composer diperlukan untuk menyiapkan installasi Laravel 8 Socialite. Jadi software ini tidak boleh dilewatkan ya.

Kalau web server sih bisa menggunakan XAMPP, WAMP, Laragon, dll. Banyak rekomendasi yang tidak disebutkan. Jadi, bebas aja ya.

Kalau Text Editor sih udah ga salah lagi ya, Visual Studio Code jawabannya. Tapi kalau spec perangkatmu kecil bisa menggunakan sublime text saja.

Kita lanjut ya ….

Step 2: Installasi Laravel 8

Kita akan melakukan installasi Laravel 8 menggunakan composer.

Loading...

Caranya buka terminal / command prompt, masuk ke direktori project, lalu ketik:

composer create-project --prefer-dist laravel/laravel laravel_8_socialite_facebook

Contoh lengkapnya seperti ini:

Masuk ke direktori project, misalnya D:

D:

Buat folder baru, misalnya:

mkdir belajar_laravel_8

Masuk ke direktori belajar Laravel 8:

cd belajar_laravel_8

Terakhir, ketik command untuk menginstall Laravel 8 nya:

composer create-project --prefer-dist laravel/laravel laravel_8_socialite_facebook

Tunggu sampai proses installasi Laravel 8 Socialite selesai ya.

Loading...

Step 3: Install Package Laravel Socialite

Kembali buka terminal / command prompt nya, lalu masuk ke directori project.

cd laravel_8_socialite_facebook

Kemudian install Laravel 8 Socialite dengan Command seperti ini:

composer require laravel/socialite

Tunggu sampai proses requirement selesai.

Step 4: Modifikasi Table User dan Jalankan Migrate

Sekedar mengingat kenangan masa lalu, #eh, Laravel telah menyediakan migration table users apabila pertama kali install.

Sedangkan untuk menerapkan Socialite Facebook di Laravel, kita memerlukan tambahan field baru, yaitu facebook_id.

Field ini berfungsi untuk menampung facebook id setiap user yang nanti akan mendaftar / login.

Jadi, kita lakukan modifikasi pada folder database/migrations/***users.php.

Loading...
<?php

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

class CreateUsersTable extends Migration
{
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('facebook_id')->nullable();
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Kemudian, modifikasi lagi pada model User.

Buka file app/Models/User.php, pada bagian $fillable, tambahkan field facebook_id.

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    protected $fillable = [
        'name',
        'facebook_id',
        'email',
        'password',
    ];

    protected $hidden = [
        'password',
        'remember_token',
    ];

    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

Oke, sampai sini modifikasi tablenya sudah selesai.

Sekarang waktunya untuk konfigurasi database di .env, buat database bernama db_laravel_8_socialite, lalu modifikasi kodenya:

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

Pastikan sudah terkoneksi dengan web server ya.

Selanjutnya jalankan migrate dengan command:

php artisan serve

Selesai deh konfigurasi tablenya.

Loading...

Berikut hasilnya:

Sudah ada field facebook_id di table users.

Baca Juga: Tutorial Kirim Email dengan Mailtrap di Laravel 8

Step 5: Membuat Authentication Basic di Laravel 8

Pada step ini sebenarnya ilmucoding sudah membahas bagaimana membuat sistem login / authentication yang sederhana menggunakan Laravel 8. Akan tetapi, tidak mengapa dijelaskan kembali bagaimana membuat authentication generator yang telah disediakan Laravel.

Berikut langkah pertamanya, ketik command ini di terminal / command prompt:

Loading...
composer require laravel/ui

Perintah di atas berfungsi untuk menyiapkan package UI yang telah dipisahkan oleh Laravel.

Kemudian ketik command di bawah ini untuk generate scaffold auth menggunakan bootstrap.

Loading...
php artisan ui bootstrap --auth

Selanjutnya, ketik perintah ini untuk melanjutkan:

npm install && npm run dev

Sangat disarankan untuk menginstall Node Js versi 12.14 ke atas ya.

Step 6: Mendaftarkan Aplikasi di Facebook Developer

Silahkan kunjungi situs Facebook Developer.

Kemudian klik tombol Buat Aplikasi atau Buat Aplikasi Baru.

Setelah muncul pop up, pilih Membuat Pengalaman Terhubung seperti gambar di bawah ini dan klik Lanjutkan.

Kemudian isi nama aplikasi dan emailmu ya.

Lanjut …

Loading...

Pilih Masuk Facebook dan klik Siapkan.

Kalau muncul halaman seperti ini di skip aja dulu ya. Nanti kalau memang sudah production baru pilih Web dan isi data dengan benar sampai tahap production.

Skip ke sini dulu ya. Pilih Pengaturan -> Dasar.

Nanti kita akan ditampilkan ID Aplikasi dan Kunci Rahasia Aplikasi yang sangat dibutuhkan nanti. Jadi, simpan baik-baik ya.

Kemudian masuk ke Menu Masuk Facebook -> Pengaturan.

Masukan URL Redirect OAuth yang Valid di kolom sebelah ya.

https://localhost:8000/auth/facebook/callback

Ga tahu kenapa harus https ya. Disuruh sama facebook. Hehehe.

Loading...

Step 7: Konfigurasi Service Laravel 8 Socialite with Facebook

Langkah berikutnya buka .env dan tambahkan kode di bawah ini:

FB_ID=1115178748907518
FB_SECRET=kunci rahasia app facebook mu
FB_URL=https://127.0.0.1:8000/auth/facebook/callback

Simpan.

Sekarang kita buka file config/services.php, dan tambahkan kode berikut ini:

// Sosial Media
'facebook' => [
    'client_id'     => env('FB_ID'),
    'client_secret' => env('FB_SECRET'),
    'redirect'      => env('FB_URL'),
],

Tambahkan juga kode ini di providers pada file config/app.php ya:

Laravel\Socialite\SocialiteServiceProvider::class, 

Sekalian kode ini di aliases:

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

Tahap ini sudah selesai.

Mari kita lanjut ….

Loading...

Step 8: Modifikasi Route

Buka routes/web.php dan kemudian tambahkan kode berikut ini:

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('auth/facebook', [App\Http\Controllers\Auth\LoginController::class, 'facebook']);
Route::get('auth/facebook/callback', [App\Http\Controllers\Auth\LoginController::class, 'facebook_callback']);

Simpan.

Step 9: Modifikasi Auth Login Controller

Lanjut buka app/Http/Controllers/Auth/LoginController.php dan kita tambahkan 2 function, yaitu facebook() dan facebook_callback().

Berikut kodenya:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Auth;
use Hash;
use Socialite;
use App\Models\User;

class LoginController extends Controller
{

    use AuthenticatesUsers;

    protected $redirectTo = RouteServiceProvider::HOME;

    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    public function facebook()
    {
        return Socialite::driver('facebook')->redirect();
    }

    public function callback_facebook()
    {
        try {
    
            $user = Socialite::driver('facebook')->stateless()->user();

            /// lakukan pengecekan apakah facebook id nya sudah ada apa belum
            $isUser = User::where('facebook_id', $user->id)->first();
            
            /// jika sudah ada, langsung login
            if($isUser){
                
                Auth::login($isUser);
                return redirect('/home');

            } else { /// jika belum ada, register baru

                $createUser = new User;
                $createUser->name =  $user->getName();

                /// mendapatkan email dari facebook
                if($user->getEmail() != null){
                    $createUser->email = $user->getEmail();
                    $createUser->email_verified_at = \Carbon\Carbon::now();
                }  
                
                /// tambahkan facebook id
                $createUser->facebook_id = $user->getId();

                /// membuat random password
                $rand = rand(111111,999999);
                $createUser->password = Hash::make($user->getName().$rand);

                /// save
                $createUser->save();
                
                /// login
                Auth::login($createUser);
                return redirect('/home');
            }
    
        } catch (Exception $exception) {
            dd($exception->getMessage());
        }
    }
}

Nah, penjelasan kodenya sudah ada di dalam kodingannya ya.

Selanjutnya kita buat tampilannya nih.

Silahkan buka file resources/views/auth/login.blade.php, tambahkan kode berikut ini:

Loading...
@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
                                <div class="form-group row mt-5">
                                    <div class="col-md-12">
                                        OR <a href="{{ url('/auth/facebook') }}" class="btn btn-primary"><i class="fa fa-facebook"></i> Login dengan Facebook</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Simpan ya.

Lalu buka file resources/views/auth/register.blade.php, tambahkan kode 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>
                                OR <a href="{{ url('/auth/facebook') }}" class="btn btn-primary"><i class="fa fa-facebook"></i> Register dengan Facebook</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Simpan lagi.

Step 10: Testing Laravel 8 Socialite with Facebook

Sekarang coba jalankan command ini:

php artisan serve

Kemudian buka URL:

https://127.0.0.1:8000/login

Hasilnya:

Klik tombol Login dengan Facebook.

Loading...

Nanti akan tampil seperti ini:

Hasil login socialite laravel 8 facebook

Lanjutkan aja ….

… dan taraaaaa …. Sudah sejauh ini malah error. Wkwkwkwk.

Sambungan gagal login socialite laravel 8 facebook

Tapi tenang, ga perlu panik.

Hal ini terjadi karena facebook memaksa untuk menggunakan httpsnya. Lalu localhost ini belum support sama https.

Jadi, kalau nanti sudah production, pasti bisa lah ya asalkan domain nanti sudah https.

Namun jika muncul pilihan advance, itu bagus. Klik aja. Teruskan.

Loading...

Nanti akan berhasil meski di localhost.

Langkah Apa yang Saya Lakukan untuk Mengatasinya?

1# Saya upload file project ke hosting dengan domain: https://laravel-8-socialite-facebook.ilmukoding.com/.

2# Menambahkan route untuk ketentuan layanan, privasi policy dan link hapus akun facebook (ini wajib jika ingin mengubah ke mode production)

Route::get('/kebijakan-privasi', function() {
    echo "Halaman kebijakan privasi";
});
Route::get('/ketentuan-layanan', function() {
    echo "Halaman kebijakan privasi";
});
Route::get('/hapus-akun-facebook', function() {
    echo "Halaman hapus akun facebook";
});

3# Pasang link di atas di dalam Dashboard Facebook

https://laravel-8-socialite-facebook.ilmukoding.com/kebijakan-privasi
https://laravel-8-socialite-facebook.ilmukoding.com/ketentuan-layanan 
https://laravel-8-socialite-facebook.ilmukoding.com/hapus-akun-facebook 

dan ini …

4# Ubah setting halaman URL callback di Dashboard Facebook dan di .env dari:

Loading...
https://127.0.0.1:8000/auth/facebook/callback

Menjadi:

https://laravel-8-socialite-facebook.ilmukoding.com/auth/facebook/callback 

5# Selesai.

Sekarang demo program sudah bisa kamu coba di situs ini:

 https://laravel-8-socialite-facebook.ilmukoding.com 

Selamat belajar… Coba buat situsmu sendiri ya.

Penutup

Demikianlah tutorial membuat sistem login dan register menggunakan Laravel 8 dan Socialite. Fitur Auth Laravel 8 Socialite ini sangat dibutuhkan oleh banyak orang. Memudahkan siapa saja masuk tanpa harus mendaftar lagi.

Semoga artikel ini bermanfaat.

Aamiin.

Loading...

Download Source Code

NB:

Jika kamu memiliki solusi lain untuk mengatasi problem di atas, silahkan share via kolom komentar ya.

Loading...

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.