Halo Bakat Digital! Selamat datang kembali di blog Sandi Dharma. Pada kesempatan ini kita akan belajar Membikin fitur login with google menggunakan laravel socialite ya.
Social Authentication
Ketika Engkau Mau Membikin akun pada sebuah website, terkadang Engkau akan menemukan sebuah tombol tambahan yang menawarkan Engkau Kepada Membikin akun atau login menggunakan salah satu akun sosial media Engkau. Contohnya seperti berikut ini:
Social authentication adalah Metode alternatif yang ditawarkan kepada pengguna Kepada melakukan proses autentikasi menggunakan akun social media mereka, contohnya seperti Google, Facebook, Twitter, dan lain-lain. Dengan menautkan akun sosial media, pengguna biasanya Enggak perlu repot-repot Kepada Membikin kata sandi Kembali karena cukup login menggunakan akun sosial media saja. Tetapi, Terdapat juga beberapa website yang mengharuskan pengguna Kepada Membikin kata sandi tambahan setelah berhasil terautentikasi menggunakan akun sosial media. Hal ini biasanya bertujuan Kepada keamanan tambahan atau agar pengguna juga dapat diautentikasi menggunakan kata sandi seperti Normal.
Laravel Socialite
Socialite adalah sebuah library tambahan yang memudahkan kita Kepada menggunakan social authentication pada aplikasi laravel kita. Socialite mendukung beberapa akun sosial media seperti Google, GitHub, Facebook dan lain-lain. Engkau juga Dapat menambahkan driver tambahan Apabila akun sosial media yang Engkau inginkan Enggak tersedia.
Lebih lengkapnya Engkau dapat mengunjungi website berikut:
Menyiapkan Project di Google Cloud Platform
Karena postingan ini kita Membikin fitur login menggunakan Google, maka kita harus menyiapkan project Google Cloud Platform (GCP) terlebih dahulu. Silahkan Sembari dibuka Google Cloud Console dan buat project baru.
Konfigurasi OAuth Consent Screen
Dalam GCP Console, silahkan pergi ke menu API & Services > OAuth consent screen. Pilih external pada bagian user type Lewat tekan tombol create.
Di sini kita akan diminta Kepada mengisi app information, app domain, dan developer contact information. Silahkan diisi saja sesuai yang kita inginkan, kemudian tekan tombol save and continue.
Pada bagian scopes, langsung tekan save and continue saja.
Setelah itu pada bagian test user, silahkan masukkan alamat email agar nantinya Dapat mencoba proses autentikasinya. Kemudian lanjut Kembali tekan save and continue.
Kita akan diarahkan ke bagian summary Kepada memeriksa kembali data yang sudah disimpan. Nah, Tamat Begitu ini OAuth consent screen kita sudah siap. Berikutnya kita lanjut Kepada menyiapkan kredensial.
Konfigurasi Kredensial
Dalam GCP Console, silahkan pergi ke menu API & Services > Credentials, kemudian tekan tombol create credentials.
Pada popup yang muncul, pilih OAuth Client ID.
Pada Begitu Membikin Client ID, pilih web application pada bagian application type.
Berikutnya, kita Dapat lanjut untung mengisi Name, dan Authorized redirect URLs
Yang harus kita perhatikan di sini adalah bagian Authorized redirect URIs. Ini yang harus disesuaikan dengan aplikasi kita nanti agar google Dapat melakukan redirect ke tempat yang Betul setelah berhasil mengautentikasi pengguna.
Karena ini Krusial, kita Dapat catat dulu di tempat lain.
http://127.0.0.1:8000/login/google/callback
Setelah semuanya selesai diisi, tekan tombol create dan akan muncul popup berisi Client ID dan Client Secret. Catat juga dua token ini dan simpan di tempat yang Kondusif ya. Kita akan memerlukannya nanti.
Client ID:
486671231122-rol5restjdjjv848455ra1uq7minkdsi.apps.googleusercontent.com
Client Secret:
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
Jangan menggunakann kredensial punya saya ya! Enggak akan Dapat karena setelah selesai Membikin postingan ini akan saya hapus.
Menyiapkan Project Laravel
Setelah Membikin OAuth Consent Screen dan Credentials di GCP, kita lanjut bagian koding ya. Pada bagian ini kita akan Membikin project laravel, menginstall socialite, modifikasi database migration, dan lain-lain.
Yuk lanjut!
Membikin Project
Membikin project laravel baru pada folder larasocial:
composer create-project laravel/laravel larasocial
Silahkan tunggu proses selesai.
Buka folder larasocial di kode editor kesayangan, dan kita akan edit file .env Kepada koneksi database.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larasocial
DB_USERNAME=root
DB_PASSWORD=root
Sesuaikan dengan database Engkau ya, jangan lupa aktifkan mysql server dan buat databasenya.
Install Socialite
Setelah Membikin dan menyiapkan project, berikutnya kita akan install dan konfigurasi socialite Kepada project kita.
Mari kita install dengan perintah berikut:
composer require laravel/socialite
Setelah proses instalasi selesai, kita lanjut pada bagian konfigurasi socialite-nya. Silahkan buka file config/services.php dan tambahkan konfigurasi Kepada google service seperti ini:
'google' => [
'client_id' => env('GOOGLE_CLIENT_ID'),
'client_secret' => env('GOOGLE_CLIENT_SECRET'),
'redirect' => env('GOOGLE_REDIRECT_URI'),
],
Konfigurasi ini mengambil nilai dari environment variabel yang kita simpan di file .env. Karena kita belum punya, mari kita tambahkan variable-nya.
GOOGLE_CLIENT_ID=486671231122-rol5restjdjjv848455ra1uq7minkdsi.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=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
GOOGLE_REDIRECT_URI=http://127.0.0.1:8000/login/google/callback
Pastikan ketiganya berisi nilai yang sama seperti yang sudah kita buat sebelumnya ya.
Ingat! Jangan menggunakann kredensial punya saya. Enggak akan Dapat karena setelah selesai Membikin postingan ini akan saya hapus.
Modifikasi Database Migration dan Model
Berikutnya kita akan memodifikasi database migration dan model Kepada tabel users.
Buka database migration Kepada tabel users, dan ubah field tabelnya menjadi seperti ini:
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('google_id')->unique();
$table->string('name');
$table->string('email')->unique();
$table->rememberToken();
$table->timestamps();
});
Pada kode tersebut kita menghapus beberapa field seperti password, dan email_verified_at. Kenapa kita Enggak menggunakan password? Karena kita akan Membikin aplikasi yang simpel dan hanya menerima autentikasi menggunakan Google.
Kita juga menambahkan satu buah field google_id yang nantinya akan berisi identitas user dari Google.
Sekarang kita buka file app/Models/User.php dan modifikasi atribute $fillable menjadi seperti ini:
protected $fillable = [
'google_id',
'name',
'email',
];
Setelah itu hapus attribute $hidden dan $casts karena kita Enggak memerlukannya Kepada project kita Begitu ini.
Kalau semuanya sudah, kita Dapat jalankan migrasi Kepada project kita
Tunggu proses migrasi selesai.
Socialite Controller
Membikin controller baru Kepada socialite.
php artisan make:controller SocialiteController
Kita akan menyiapkan tiga buah method Yakni redirect, callback, dan logout.
- Method
redirectakan digunakan Kepada meredirect user ke halaman login OAuth Punya Google. - Method
callbackakan digunakan Kepada tempat user di redirect setelah terautentikasi. Pada method ini juga kita akan mengelola data user yang kita dapatkan dari Google Kepada kita simpan ke dalam database aplikasi kita. - Method
logoutkita gunakan Kepada proses logout user kita.
Method redirect
public function redirect()
{
return Socialite::driver('google')->redirect();
}
Class Socialite kita import dari namespace use Laravel\Socialite\Facades\Socialite;
Method callback
public function callback()
{
// Google user object dari google
$userFromGoogle = Socialite::driver('google')->user();
// Ambil user dari database berdasarkan google user id
$userFromDatabase = User::where('google_id', $userFromGoogle->getId())->first();
// Apabila Enggak Terdapat user, maka buat user baru
if (!$userFromDatabase) {
$newUser = new User([
'google_id' => $userFromGoogle->getId(),
'name' => $userFromGoogle->getName(),
'email' => $userFromGoogle->getEmail(),
]);
$newUser->save();
// Login user yang baru dibuat
auth('web')->login($newUser);
session()->regenerate();
return redirect('/');
}
// Apabila Terdapat user langsung login saja
auth('web')->login($userFromDatabase);
session()->regenerate();
return redirect('/');
}
Wah agak panjang ya, hehehe.
Method callback memang merupakan method yang paling panjan. Tetapi, pada intinya, di method ini kita mengelola data user, cek apakah user sudah Terdapat di dalam database, Apabila Enggak da maka akan dibuat user baru berdasarkan data user dari Google. Apabila user sudah Terdapat di dalam database maka akan langsung login menggunakan helper auth().
Method logout
public function logout(Request $request)
{
auth('web')->logout();
$request->session()->invalidate();
$request->session()->regenerateToken();
return redirect('/');
}
Pada method logout kita menggunakan helper auth() Kepada logout seperti Normal, regenerate token, dan redirect.
Oke, sekarang keseluruhan kode dari class SocialiteController terlihat seperti ini:
php
namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;
class SocialiteController extends Controller
{
public function redirect()
{
return Socialite::driver('google')->redirect();
}
public function callback()
{
// Google user object dari google
$userFromGoogle = Socialite::driver('google')->user();
// Ambil user dari database berdasarkan google user id
$userFromDatabase = User::where('google_id', $userFromGoogle->getId())->first();
// Apabila Enggak Terdapat user, maka buat user baru
if (!$userFromDatabase) {
$newUser = new User([
'google_id' => $userFromGoogle->getId(),
'name' => $userFromGoogle->getName(),
'email' => $userFromGoogle->getEmail(),
]);
$newUser->save();
// Login user yang baru dibuat
auth('web')->login($newUser);
session()->regenerate();
return redirect('/');
}
// Apabila Terdapat user langsung login saja
auth('web')->login($userFromDatabase);
session()->regenerate();
return redirect('/');
}
public function logout(Request $request)
{
auth('web')->logout();
$request->session()->invalidate();
$request->session()->regenerateToken();
return redirect('/');
}
}
Router
Setelah Membikin controller, sekarang kita akan meregistrasikan controller kita router. Buka file routes/web.php dan perbarui isinya menjadi seperti berikut ini:
php
use App\Http\Controllers\SocialiteController;
use Illuminate\Support\Facades\Route;
// Kepada menampilkan halaman
Route::get('/', function () {
return view('index');
})->name('index');
// Kepada redirect ke Google
Route::get('login/google/redirect', [SocialiteController::class, 'redirect'])
->middleware(['guest'])
->name('redirect');
// Kepada callback dari Google
Route::get('login/google/callback', [SocialiteController::class, 'callback'])
->middleware(['guest'])
->name('callback');
// Kepada logout
Route::post('logout', [SocialiteController::class, 'logout'])
->middleware(['auth'])
->name('logout');
View
Karena pada root path di route kita mengembalikan view bernama index, sekarang kita akan Membikin view sederhana yang berisi tombol-tombol yang diperlukan. Supaya sedikit lebih keren, kita akan menggunakan Sokongan dari bootstrap ya. Buat file baru di dalam folder resources/views/index.blade.php, kemudian isi kodenya seperi ini.
html lang="en">
head>
meta charset="utf-8" />
meta name="viewport" content="width=device-width, initial-scale=1" />
title>Larasocialtitle>
link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
head>
body>
nav class="navbar bg-primary navbar-dark shadow py-4">
div class="container">
span class="navbar-brand mb-0 h1">Navbarspan>
div>
nav>
div class="container py-5">
div class="row">
div class="col-lg-5 mx-auto">
h1 class="text-center btn-block">Larasocialh1>
div class="card mt-5">
div class="card-body">
@auth
h4>Name: {{ auth('web')->user()->name }}h4>
h4>Email: {{ auth('web')->user()->email }}h4>
hr />
form action="{{ route('logout') }}" method="post">
@csrf
button class="btn btn-dark" type="submit">Logoutbutton>
form>
@else
a href="{{ route('redirect') }}" class="btn btn-danger"
>Login With Googlea
>
@endauth
div>
div>
div>
div>
div>
script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
>script>
body>
html>
Demo
Sipp, semuanya sudah beres. Sekarang saatnya kita coba aplikasi kita. Jalankan server laravel, kemudian buka aplikasi di browser. Pastikan muncul halaman seperti ini:
Klik Login With Google Kepada mulai login. Kita akan dialihkan ke halaman Punya Google.
Pilih akun Google yang sudah didaftarkan sebelumnya sebagai test user pada GCP.
Apabila berhasil, maka kita akan diredirect kembali ke aplikasi kita. Sekarang tampilan halamannya seperti ini:
Pastikan terdapat user baru di database:
Sekarang semuanya sudah selesai, kita Dapat coba Kepada logout dan login kembali. Pastikan juga proses logout dan login yang berulang menggunakan akun Google yang sama Enggak menambah user baru ke dalam database.
Source code: Klik di sini
Video Demonstrasi
Hasil
Sekarang kita sudah Dapat login menggunakan Google di aplikasi laravel kita. Tentu ini Lagi sangat sederhana ya. Berikutnya Engkau Dapat mengembangkannya Kembali seperti menambahkan fitur login dengan Facebook, Membikin fitur agar user Dapat login menggunkan email dan kata sandi selain menggunakan akun sosial media, dan lain-lain.