Membuat Google Authentication dengan Laravel Socialite

Laravel Socialite adalah library yang mempermudah integrasi login menggunakan berbagai penyedia layanan pihak ketiga, seperti Google, Facebook, dan lainnya. Artikel ini akan membahas langkah-langkah membuat fitur Google Authentication di Laravel.

Langkah 1: Instalasi Laravel

Buat proyek Laravel baru menggunakan Composer:

composer create-project laravel/laravel google-auth

Langkah 2: Instalasi Socialite

Tambahkan Socialite ke proyek Laravel Anda:

composer require laravel/socialite

Langkah 3: Konfigurasi Google API

Buka Google Cloud Console Akses Google Cloud Console
Buat Proyek Baru

Klik "Create Project" dan beri nama proyek Anda.

Aktifkan OAuth Consent Screen

Buka menu APIs & Services > OAuth consent screen.
Pilih "External" dan isi detail aplikasi seperti nama, email, dan lainnya.

Buat Credentials

Buka menu APIs & Services > Credentials dan pilih "Create Credentials > OAuth 2.0 Client IDs".
Pilih "Web Application" dan tambahkan Authorized redirect URIs seperti:

http://localhost:8000/auth/google/callback

5.Simpan Client ID dan Client Secret

Langkah 4: Konfigurasi Laravel

Tambahkan kredensial Google ke file .env:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_REDIRECT_URI=http://localhost:8000/auth/google/callback

Edit file config/services.php:

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

Langkah 5: Buat Controller untuk Google Auth

Buat controller GoogleController:

php artisan make:controller GoogleController

Isi controller itu dengan code berikut:

<?php

namespace App\Http\Controllers;

use Laravel\Socialite\Facades\Socialite;
use Illuminate\Support\Facades\Auth;
use App\Models\User;

class GoogleController extends Controller
{
    public function redirectToGoogle()
    {
        return Socialite::driver('google')->redirect();
    }

    public function handleGoogleCallback()
    {
        $googleUser = Socialite::driver('google')->stateless()->user();

        $user = User::updateOrCreate(
            ['email' => $googleUser->email],
            [
                'name' => $googleUser->name,
                'google_id' => $googleUser->id,
                'password' => bcrypt('password'),
            ]
        );

        Auth::login($user);

        return redirect()->route('home');
    }

    public function logout()
    {
        Auth::logout();
        return redirect()->route('login');
    }
}

Langkah 6: Tambahkan Route

Edit file routes/web.php:

use App\Http\Controllers\GoogleController;

Route::get('/', function () {
    return view('welcome');
})->name('home');

Route::middleware('guest')->group(function () {
    Route::get('/login', function () {
        return view('auth.login');
    })->name('login');
    Route::get('/auth/google', [GoogleController::class, 'redirectToGoogle'])->name('google.login');
    Route::get('/auth/google/callback', [GoogleController::class, 'handleGoogleCallback']);
});

Route::middleware('auth')->group(function () {
    Route::get('/dashboard', function () {
        return view('dashboard');
    })->name('dashboard');
    Route::post('/logout', [GoogleController::class, 'logout'])->name('logout');
});

Langkah 7: Tambahkan Kolom google_id pada Tabel Users

Tambahkan migrasi baru untuk kolom google_id:

php artisan make:migration add_google_id_to_users_table --table=users

Edit migrasi file:

public function up()
{
    Schema::table('users', function (Blueprint $table) {
        $table->string('google_id')->nullable()->unique();
    });
}

Migrasikan:

php artisan migrate

Langkah 8: Buat Tampilan Login dan Dashboard

Tampilan Login Buat file resources/views/auth/login.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <h2 class="text-center">Login</h2>
                <a href="{{ route('google.login') }}" class="btn btn-danger w-100">Login with Google</a>
            </div>
        </div>
    </div>
</body>
</html>

Tampilan Dashboard Buat file resources/views/dashboard.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2>Welcome, {{ auth()->user()->name }}</h2>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="btn btn-danger">Logout</button>
        </form>
    </div>
</body>
</html>

Langkah 9: Uji Aplikasi

Jalankan server lokal:

php artisan serve

2.Buka URL berikut di browser:

Login: http://127.0.0.1:8000/login
Dashboard: http://127.0.0.1:8000/dashboard

3.Pastikan login dan logout berjalan dengan baik.