Halo Talenta Digital! Selamat datang kembali di blog Ruang Developer. Pada kesempatan ini kita akan belajar membuat fitur login with google menggunakan laravel socialite ya.
Social Authentication
Ketika kamu ingin membuat akun pada sebuah website, terkadang kamu akan menemukan sebuah tombol tambahan yang menawarkan kamu untuk membuat akun atau login menggunakan salah satu akun sosial media kamu. Contohnya seperti berikut ini:
Social authentication adalah cara alternatif yang ditawarkan kepada pengguna untuk melakukan proses autentikasi menggunakan akun social media mereka, contohnya seperti Google, Facebook, Twitter, dan lain-lain. Dengan menautkan akun sosial media, pengguna biasanya tidak perlu repot-repot untuk membuat kata sandi lagi karena cukup login menggunakan akun sosial media saja. Namun, ada juga beberapa website yang mengharuskan pengguna untuk membuat kata sandi tambahan setelah berhasil terautentikasi menggunakan akun sosial media. Hal ini biasanya bertujuan untuk keamanan tambahan atau agar pengguna juga dapat diautentikasi menggunakan kata sandi seperti biasa.
Laravel Socialite
Socialite adalah sebuah library tambahan yang memudahkan kita untuk menggunakan social authentication pada aplikasi laravel kita. Socialite mendukung beberapa akun sosial media seperti Google, GitHub, Facebook dan lain-lain. Kamu juga bisa menambahkan driver tambahan jika akun sosial media yang kamu inginkan tidak tersedia.
Lebih lengkapnya kamu dapat mengunjungi website berikut:
Menyiapkan Project di Google Cloud Platform
Karena postingan ini kita membuat fitur login menggunakan Google, maka kita harus menyiapkan project Google Cloud Platform (GCP) terlebih dahulu. Silahkan sambil 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 lalu tekan tombol create.
Di sini kita akan diminta untuk 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 bisa mencoba proses autentikasinya. Kemudian lanjut lagi tekan save and continue.
Kita akan diarahkan ke bagian summary untuk memeriksa kembali data yang sudah disimpan. Nah, sampai saat ini OAuth consent screen kita sudah siap. Berikutnya kita lanjut untuk 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 saat membuat Client ID, pilih web application pada bagian application type.
Berikutnya, kita bisa 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 bisa melakukan redirect ke tempat yang benar setelah berhasil mengautentikasi pengguna.
Karena ini penting, kita bisa 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 aman ya. Kita akan memerlukannya nanti.
Client ID:
486671231122-rol5restjdjjv848455ra1uq7minkdsi.apps.googleusercontent.com
Client Secret:
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
Jangan menggunakann kredensial punya saya ya! Tidak akan bisa karena setelah selesai membuat postingan ini akan saya hapus.
Menyiapkan Project Laravel
Setelah membuat OAuth Consent Screen dan Credentials di GCP, kita lanjut bagian koding ya. Pada bagian ini kita akan membuat project laravel, menginstall socialite, modifikasi database migration, dan lain-lain.
Yuk lanjut!
Membuat Project
Membuat 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 untuk 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 kamu ya, jangan lupa aktifkan mysql server dan buat databasenya.
Install Socialite
Setelah membuat dan menyiapkan project, berikutnya kita akan install dan konfigurasi socialite untuk 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 untuk 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. Tidak akan bisa karena setelah selesai membuat postingan ini akan saya hapus.
Modifikasi Database Migration dan Model
Berikutnya kita akan memodifikasi database migration dan model untuk tabel users.
Buka database migration untuk 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 tidak menggunakan password? Karena kita akan membuat 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 tidak memerlukannya untuk project kita saat ini.
Kalau semuanya sudah, kita bisa jalankan migrasi untuk project kita
php artisan migrate
Tunggu proses migrasi selesai.
Socialite Controller
Membuat controller baru untuk socialite.
php artisan make:controller SocialiteController
Kita akan menyiapkan tiga buah method yaitu redirect, callback, dan logout.
- Method
redirectakan digunakan untuk meredirect user ke halaman login OAuth milik Google. - Method
callbackakan digunakan untuk tempat user di redirect setelah terautentikasi. Pada method ini juga kita akan mengelola data user yang kita dapatkan dari Google untuk kita simpan ke dalam database aplikasi kita. - Method
logoutkita gunakan untuk 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();
// Jika tidak ada 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('/');
}
// Jika ada 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. Namun, pada intinya, di method ini kita mengelola data user, cek apakah user sudah ada di dalam database, jika tidak da maka akan dibuat user baru berdasarkan data user dari Google. Jika user sudah ada 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() untuk logout seperti biasa, 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();
// Jika tidak ada 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('/');
}
// Jika ada 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 membuat 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;
// Untuk menampilkan halaman
Route::get('/', function () {
return view('index');
})->name('index');
// Untuk redirect ke Google
Route::get('login/google/redirect', [SocialiteController::class, 'redirect'])
->middleware(['guest'])
->name('redirect');
// Untuk callback dari Google
Route::get('login/google/callback', [SocialiteController::class, 'callback'])
->middleware(['guest'])
->name('callback');
// Untuk 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 membuat view sederhana yang berisi tombol-tombol yang diperlukan. Supaya sedikit lebih keren, kita akan menggunakan bantuan dari bootstrap ya. Buat file baru di dalam folder resources/views/index.blade.php, kemudian isi kodenya seperi ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Larasocial</title>
<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">Navbar</span>
</div>
</nav>
<div class="container py-5">
<div class="row">
<div class="col-lg-5 mx-auto">
<h1 class="text-center btn-block">Larasocial</h1>
<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">Logout</button>
</form>
@else
<a href="{{ route('redirect') }}" class="btn btn-danger"
>Login With Google</a
>
@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 untuk mulai login. Kita akan dialihkan ke halaman milik Google.
Pilih akun Google yang sudah didaftarkan sebelumnya sebagai test user pada GCP.
Jika 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 bisa coba untuk logout dan login kembali. Pastikan juga proses logout dan login yang berulang menggunakan akun Google yang sama tidak menambah user baru ke dalam database.
Source code: Klik di sini
Video Demonstrasi
Kesimpulan
Sekarang kita sudah bisa login menggunakan Google di aplikasi laravel kita. Tentu ini masih sangat sederhana ya. Berikutnya kamu bisa mengembangkannya lagi seperti menambahkan fitur login dengan Facebook, membuat fitur agar user bisa login menggunkan email dan kata sandi selain menggunakan akun sosial media, dan lain-lain.