Membuat Social Login di Laravel 8 Dengan Socialite

Membuat Social Login di Laravel 8 Dengan Socialite

Socialite Laravel 8Pernahkah Anda saat register disuatu platform, kita diminta memasukkan nama, email, password dan lain-lain. Hal tersebut rasanya kurang nyaman. Bisakan kita login atau register hanya sekali klik tanpa perlu memasukkan seperti nama, email atau password ? tentu bisa, di laravel kita bisa membuat fitur register dengan social media seperti facebook, github dan lain-lainnya.

Di artikel kali ini, kita akan sama-sama belajar bagaimana cara membuat fitur login dengan social media di laravel versi 8 menggunakan package socialite. Di percobaan ini, kita akan memulainya dari nol atau mulai dari menginstall project laravel 8. OK, berikut ini adalah langkah-langkah membuat fitur login dengan social media di laravel 8 menggunakan package socialite:

1. Install project laravel baru dengan buka terminal kemudian masuk ke direktori dimana project akan di install dan jalankan command composer create-project laravel/laravel socialite. Dengan command tersebut, akan membuatkan kita folder project laravel dengan nama socialite.

2. Buka project yang telah diinstall dengan command cd socialite.

3. Disini kita akan mecobanya dengan laravel ui. Jalankan command di bawah ini untuk installasi laravel ui.

composer require laravel/ui

Kemudian jalankan command di bawah ini untuk install tampilan ui front end scaffolding.

php artisan ui bootstrap --auth

4. Selesai langkah nomor 3, selanjutnya jalankan command npm install && npm run dev.

5. Masuk file file user migration atau di direktori database/migrations/[timestamp]_create_users_table.php, sesuaikan kode tersebut sehingga menjadi seperti di bawah ini.


<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique()->nullable();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password')->nullable();
            $table->rememberToken();
            $table->timestamps();
        });
    }

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

Di file user migration ini, kita menambahkan kondisi nullable pada field email dan password. Kenapa kedua field tersebut diberikan kondisi nullable ? karena user tidak wajib memasukkan data email dan password, user bisa saja register atau login menggunakan social provider.

6. Satu user bisa saja mempunyai lebih dari 1 akun dengan social provider yang berbeda, untuk itu kita akan membuat model dan migration baru dengan nama Social. Jalankan command php artisan make:model Social -m untuk membuat file model dan migration Social.

7. Buka file social migration di database/migrations/[timestamp]_create_socials_table.php dan sesuaikan kodenya menjadi seperti di bawah ini.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateSocialsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('socials', function (Blueprint $table) {
            $table->id();
            $table->bigInteger('user_id');           
            $table->string('provider_name')->nullable();
            $table->string('provider_id')->unique()->nullable();   
            $table->timestamps();
        });
    }

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

8. Selanjutnya membuat relasi table antara tabel user dengan tabel social. Pertama buka model user terlebih dahulu di App\Models\User.php kemudian tambahkan kode public function seperti di bawah ini.

public function social() {
        return $this->hasMany('App\Models\Social');
     }

Dilanjutkan dengan model social yang ada di App\Models\Social.php dan tambahkan public function seperti di bawah ini.

public function user() {
        return $this->belongsTo('App\Models\User');
    }

9. Migration. Selanjutnya di langkah nomor 9, jalankan command php artisan migrate untuk migrasi table ke database.

10. Untuk mengintegrasikan authorization, kita memerlukan Socialite package. Untuk itu jalankan command di bawah ini untuk installasi socialite package.

composer require laravel/socialite

11. Konfigurasi social account. Di artikel ini, kita akan sama-sama belajar bagaimana cara membuat social login dengan facebook dan github. Untuk itu, kita perlu mendapatkan kredensial dari kedua provider tersebut.

Kita mulai dari facebook terlebih dahulu, klik disini untuk memulainya.

Membuat Social Login di Laravel 8 Dengan SocialiteSebelumnya, di percobaan ini kita akan coba menjalankan project laravel menggunakan ngrok, karena kebanyakan case login dengan facebook akan error jika tidak ada ssl atau htttps. Seperti gambar di atas, saya menjalankan project dengan ngrok di port 8000 (perintah; ngrok http 8000).

Membuat aplikasi facebook

Membuat Social Login di Laravel 8 Dengan SocialiteSilahkan kunjungi developers.facebook.com/async/registration untuk memulai membuat aplikasi facebook untuk mendapatkan ID kredensial yang diperlukan. Di halaman awal ketika kita mengunjungi link yang telah saya sebutkan diawal akan nampak seperti gambar di atas. Di langkah ini silahkan masuk ke akun facebook Anda atau jika sudah bisa langsung klik lanjut atau next.

Membuat Social Login di Laravel 8 Dengan Socialite
Kemudian di langkah verifikasi email seperti gambar di atas, silahkan klik konfirmasi email atau perbarui email terlebih dahulu.

Membuat Social Login di Laravel 8 Dengan SocialiteDi langkah ini, Anda bisa memilih yang mana paling sesuai dengan Anda. Kemudian klik selesaikan pendaftaran.

OK, sampai disini kita bisa langsung saja membuat aplikasi baru dengan menekan tombol buat aplikasi.

Saat muncul pop up atau modal seperti gambar di atas, silahkan pilih opsi Membuat Pengalaman Terhubung dan klik lanjutkan.

Membuat Social Login di Laravel 8 Dengan SocialiteMasukkan nama aplikasi pada form dan klik buat aplikasi.

Membuat Social Login di Laravel 8 Dengan SocialiteKemudian setelah berhasil membuat aplikasi baru, anda akan di arahkan halaman seperti gambar di atas. Pilih Masuk Facebook dan klik siapkan.

Membuat Social Login di Laravel 8 Dengan SocialiteDi langkah ini, silahkan pilih opsi web atau seperti yang ditunjukkan pada gambar di atas.
Membuat Social Login di Laravel 8 Dengan Socialite

Masuk ke halaman pengaturan seperti gambar di atas. Pada form Redirect URI OAuth Valid, masukkan URL https yang di dapat dari ngrok (bagian forwarding), diikuti dengan /auth/facebook/callback.

Dan sekarang, silahkan masuk ke file config/services.php dan tambahkan baris kode di bawah ini.

'facebook' => [
        'client_id' => env('FACEBOOK_CLIENT_ID'),  // Your Facebook App ID
        'client_secret' => env('FACEBOOK_CLIENT_SECRET'), // Your Facebook App Secret
        'redirect' => env('FACEBOOK_CALLBACK_URL'),
    ],

Jangan lupa juga, update di file .env dengan menambahkan bari kode seperti di bawah ini.

FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
FACEBOOK_CALLBACK_URL=