Membuat fitur login with Google OAuth di Laravel menggunakan Laravel Socialite

15 May 2024 | Author: Back End KM#6

_{Writer : M Satria Rajendra, Back-end Developer}

Autentikasi merupakan fitur yang penting dalam sebuah website. Autentikasi yang mudah, cepat dan terintegrasi dengan platform lain sangatlah memudahkan pengguna dalam menggunakan website. 

Google merupakan salah satu platform yang sering digunakan oleh masyarakat umum. Hal tersebut tentunya dapat dimanfaatkan jika kita bisa membuat fitur one-click login menggunakan akun google tanpa perlu melakukan register dan login pada website kita yang mungkin bisa menghabiskan waktu hingga 5 menit. 

Terdapat teknologi bernama OAuth atau Open Authorization, yaitu standar terbuka untuk mendelegasikan akses. Dengan OAuth kita dapat login ke sebuah website tanpa harus membuat password baru. 

Laravel menyediakan paket untuk mengautentikasi dengan penyedia OAuth menggunakan Laravel Socialite. Saat ini Socialite mendukung otentikasi melalui beberapa platform terkenal seperti Facebook, Twitter, LinkedIn, Google, GitHub, GitLab, dan Bitbucket.

Instalasi

composer require laravel/socialite

Konfigurasi

Biasanya kita membutuhkan kredensial untuk penyedia OAuth yang kita gunakan. Untuk Google, kita perlu memiliki GOOGLE_CLIENT_ID dan GOOGLE_CLIENT_SECRET untuk web kita. Kita bisa mendapatkan kredensial tersebut dengan membuat Google API Credentials di Google APIs Console.

Buat Google API Credentials

1. Buka Credential Page

Kunjugi https://console.cloud.google.com/apis/dashboard. Ini merupakan tampilan saat halaman tersebut dibuka ketika artikel ini dirilis

2. Buat project baru

Untuk membuat fitur login with google, buatlah sebuah project baru

Isi detail project lalu klik “create”

3. Pindah ke project yang baru saja dibuat
4. Buat OAuth client ID credential

5. Configurasi consent screen dan klik tombolnya

Kamu bisa memilih apakah akan di redirect ke internal organisasi atau eksternal. Pada tutorial kali ini kita akan menggunakan eksternal

6. Edit App registration

Lengkapi data form sesuai kebutuhan

7.  buat OAuth client ID

Di sini kita dapat mengisi detail tentang aplikasi kita dan mengisi URI pengalihan resmi. Ini adalah URI yang akan kita gunakan untuk mengarahkan pengguna setelah mereka memilih akun Google untuk masuk ke web kita. Sebagai contoh di sini saya menggunakan http://127.0.0.1:8000/callback/google untuk URI callback.

8. OAuth client berhasil dibuat

9. Konfigurasi .env Laravel

Letakkan Client ID dan Client Secret key yang baru saja kita dapatkan di dalam key GOOGLE_CLIENT_ID dan GOOGLE_CLIENT_SECRET di dalam .env Laravel. Key lain yang perlu ditambahkan di .env adalah GOOGLE_REDIRECT, isi dengan callback URI yang kita gunakan di Google API Console.

GOOGLE_CLIENT_ID=11238190818-v8xxxxxxxx.apps.googleusercontent.comGOOGLE_CLIENT_SECRET=GOCSPX-cb-xxxxxxxxxxxxx
GOOGLE_REDIRECT=http://127.0.0.1:8000/callback/google

10. Perbarui config/services.php

   'google' => [
       'client_id'     => env('GOOGLE_CLIENT_ID'),
       'client_secret' => env('GOOGLE_CLIENT_SECRET'),
       'redirect'      => env('GOOGLE_REDIRECT')
   ],

11. Buat Migrasi 

Buat dua kolom bernama social_id dan social_type di tabel users. Kita dapat menambahkan migrasi tabel users atau menambahkan migrasi untuk menambahkan kedua kolom

php artisan make:migration add_social_id_and_social_type field_to_users_table

Letakkan Client ID dan Client Secret key yang baru saja kita dapatkan di dalam key GOOGLE_CLIENT 

Dan gunakan migrasi berikut

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
   public function up(): void
   {
       Schema::table('users', function (Blueprint $table) {
           $table->string('social_id')->nullable();
           $table->string('social_type')->nullable();
       });
   }

   public function down(): void
   {
       Schema::table('users', function (Blueprint $table) {
           $table->dropColumn('social_id');    // drop social_id column
           $table->dropColumn('social_type');  // drop social_type column
       });
   }
};

12. Perbarui Model User

Tambahkan value social_id dan social_type ke dalam model, sehingga menjadi seperti ini 

   protected $fillable = [
       'name',
       'email',
       'number',
       'password',
       'social_id',
       'social_type',
   ];

Setelah itu jalankan perintah php artisan migrate

13. Implementasikan login with google

Asumsikan bahwa anda sudah membuat fungsi login menggunakan laravel bawaan atau library seperti laravel breeze. Buatlah sebuah controller GoogleSocialiteController 

class GoogleSocialiteController extends Controller
{
   public function redirectToGoogle()
   {
       // redirect user to "login with Google account" page
       return Socialite::driver('google')->redirect();
   }


   public function handleCallback()
   {
       try {
           $user = Socialite::driver('google')->user();
     $finduser = User::where('email', $user->email)->where('social_id',   null)->first();
           if ($finduser) {
             return redirect('/login')->with('error', 'Email sudah terdaftar');
           }
           $finduser = User::where('social_id', $user->id)->first();


           if ($finduser)
           {
               // Log the user in
               Auth::login($finduser);


               // redirect user to dashboard page
               return redirect('/dashboard');
           } else {
               // if user not found then this is the first time he/she try to login with Google account
               // create user data with their Google account data
               $newUser = User::create([
                   'name' => $user->name,
                   'email' => $user->email,
                   'social_id' => $user->id,
                   'role' => 'user',  // fill role by whatever pattern you choose
                   'social_type' => 'google',  // the social login is using google
                   'password' => bcrypt('my-google'),  // fill password by whatever pattern you choose
               ]);
               Auth::login($newUser);
               return redirect('/dashboard');
           }
       } catch (Exception $e) {
           dd($e->getMessage());
       }
   }
}

15. Buat Route

use App\Http\Controllers\Auth\GoogleSocialiteController;
// login with google
Route::get('auth/google', [GoogleSocialiteController::class, 'redirectToGoogle']);  // redirect to google login
Route::get('callback/google', [GoogleSocialiteController::class, 'handleCallback']);    // callback route after google account chosen

16. Buat button untuk login with google

<a 
href="/auth/google"
className="flex rounded-[20px] w-full justify-center border border-transparent bg-[#DBEAFE] py-2 px-4 text-md font-medium shadow-sm hover:bg-[#115CD1]"
>
<div className="flex items-center">
Masuk dengan Google
</div>
</a>

17. Testing

Selesai. Kita telah berhasil membuat fitur autentikasi dengan opsi login dengan Google. Di sini kita menggunakan package laravel/socialite, mengintegrasikannya dengan database, membuat controller, membuat endpoint, membuat tombol, dan selesai.