Cara dan Langkah-Langkah Instalasi OAuth Google pada Laravel

Halo temen-temen! Kali ini kita bakal bahas cara dan langkah-langkah instalasi OAuth Google di Laravel. Buat temen-temen yang pengen bikin aplikasi Laravel dengan login pake akun Google, artikel ini bakal ngebantu kamu dari awal sampe akhir. Siap? Yuk, kita mulai!

1. Persiapan Awal

a. Instal Laravel
Pertama-tama, pastiin temen-temen udah punya Laravel terinstal di sistem temen-temen. Kalo belum, bisa ikutin perintah di bawah ini buat install Laravel:

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

b. Instal Package Socialite
Laravel udah nyediain package buat integrasi OAuth, namanya Socialite. Temen-temen bisa install pake Composer:

composer require laravel/socialite

2. Konfigurasi Google API Console

a. Buat Proyek Baru
Kunjungi Google API Console, terus login pake akun Google temen-temen. Kemudian pilih APIs & Services

Kemudian pilih ENABLE APIS AND SERVICES

Lalu silahkan cari Google+ api

Kemudian pilih yang ini

Silahkan pilih Enable, kemudian tunggu hingga prosesnya selesai

Setelah itu, silahkan pilih tab Credentials

Lalu, silahkan pilih CREATE CREDENTIALS

Kemudian, silahkan pilih OAuth Client ID

Lalu sesuaikan inputan seperti berikut :

Application type: Web application
Name: Nama sesuai keinginan temen-temen
Authorized redirect URIs: Isi dengan http://localhost:8000/auth/google/callback (atau URL callback aplikasi temen-temen) dikarenakan disini kita masih menggunakan lokal, jadi kita pakai localhost saja

Setelah itu pilih CREATE

Setelah itu akan muncul credential seperti berikut yang akan kita gunakan pada .env Laravel :

Setelah itu, simpen Client ID dan Client Secret yang muncul.

3. Konfigurasi Laravel

a. Silahkan Tambah Konfigurasi di .env
Buka file .env di root proyek Laravel temen-temen, terus tambahin konfigurasi berikut:

GOOGLE_CLIENT_ID=client-id-yang-dikasih-google
GOOGLE_CLIENT_SECRET=client-secret-yang-dikasih-google
GOOGLE_REDIRECT=http://localhost:8000/auth/google/callback

b. Konfigurasi Socialite
Buka file config/services.php, terus tambahin konfigurasi berikut:

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

4. Bikin Controller dan Routes

a. Bikin Controller
Bikin controller baru pake artisan command:

php artisan make:controller GoogleController

Buka app/Http/Controllers/GoogleController.php dan isi dengan kode berikut:

<?php

namespace App\Http\Controllers;

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

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

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

        $finduser = User::where('email', $user->email)->first();

        if ($finduser) {
            Auth::login($finduser);
        } else {
            $newUser = User::create([
                'name' => $user->name,
                'email' => $user->email,
                'google_id' => $user->id,
                'password' => encrypt('my-google')
            ]);

            Auth::login($newUser);
        }

        return redirect()->intended('dashboard');
    }
}

b. Bikin Routes
Buka file routes/web.php dan tambahin routes berikut:

use App\Http\Controllers\GoogleController;

Route::get('auth/google', [GoogleController::class, 'redirectToGoogle']);
Route::get('auth/google/callback', [GoogleController::class, 'handleGoogleCallback']);

5. Modifikasi Model User

a. Tambahin Kolom google_id
Jalankan perintah migrations untuk menambahkan kolom google_id

php artisan make:migration add_google_id_to_users_table

Kemudian silahkan buka file migration yang baru saja dibuat, lalu tambahkan baris kode ini:

$table->string('google_id')->nullable();

Jalankan migrasi buat update database schema:

php artisan migrate

6. Uji Coba Aplikasi

a. Jalankan Server Laravel
Jalankan server Laravel temen-temen:

b. Akses URL Google Auth
Buka browser dan akses URL http://localhost:8000/auth/google. Temen-temen bakal diarahkan ke halaman login Google.

Nanti kalau udah berhasil bakal ada data temen-temen di tabel users

Kesimpulan

Itu dia langkah-langkah buat instalasi OAuth Google di Laravel. Dengan mengikuti tutorial ini, temen-temen bisa bikin fitur login dengan Google di aplikasi Laravel temen-temen. Semoga bermanfaat dan selamat mencoba, Sobat Koding! Kalau ada pertanyaan atau kendala, jangan ragu buat komentar di bawah. Happy coding! 🎉

Blog