Cara dan Langkah-Langkah Instalasi OAuth Google pada LaraveL

Cara dan Langkah-Langkah Instalasi OAuth Google pada LaraveL

Image description

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
Enter fullscreen mode
Exit fullscreen mode

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

composer require laravel/socialite
Enter fullscreen mode
Exit fullscreen mode

2. Konfigurasi Google API Console

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

Image description

Kemudian pilih ENABLE APIS AND SERVICES

Image description

Lalu silahkan cari Google+ api

Image description

Kemudian pilih yang ini

Image description

Silahkan pilih Enable, kemudian tunggu hingga prosesnya selesai

Image description

Setelah itu, silahkan pilih tab Credentials

Image description

Lalu, silahkan pilih CREATE CREDENTIALS

Image description

Kemudian, silahkan pilih OAuth Client ID

Image description

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

Image description

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

Image description
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
Enter fullscreen mode
Exit fullscreen mode

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'),
],
Enter fullscreen mode
Exit fullscreen mode

4. Bikin Controller dan Routes

a. Bikin Controller
Bikin controller baru pake artisan command:

php artisan make:controller GoogleController
Enter fullscreen mode
Exit fullscreen mode

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'); }
} 
Enter fullscreen mode
Exit fullscreen mode

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']); 
Enter fullscreen mode
Exit fullscreen mode

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
Enter fullscreen mode
Exit fullscreen mode

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

$table->string('google_id')->nullable();
Enter fullscreen mode
Exit fullscreen mode

Jalankan migrasi buat update database schema:

php artisan migrate
Enter fullscreen mode
Exit fullscreen mode

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.

Image description

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

Image description

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! 🎉


Discover more from Coursity

Subscribe to get the latest posts to your email.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

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