Tutorial Membuat Login Google Menggunakan Laravel dan Socialite

Posted by Ariadi on Jul 31, 2023
Photo by <a href="https://unsplash.com/@firmbee" target="_blank">Firmbee.com</a> on <a href="https://unsplash.com" target="_blank">Unsplash</a>

Photo by Firmbee.com on Unsplash

Halo teman-teman! Pada kesempatan kali ini, aku akan berbagi tutorial seru tentang cara membuat fitur login menggunakan akun Google pada website kamu dengan bantuan framework Laravel dan pustaka Socialite. Nah, langsung saja yuk kita mulai!

Sebelum kita lanjut, pastikan kamu sudah memiliki proyek Laravel yang sudah diinisialisasi. Jika belum, kamu bisa membuatnya dengan menjalankan perintah `laravel new namaprojek` pada terminal.

Langkah 1: Install Socialite

Pertama, buka terminal di direktori proyek Laravel kamu, dan ketikkan perintah berikut:

composer require laravel/socialite

Perintah di atas akan mengunduh dan menginstal pustaka Socialite yang akan kita gunakan.

Langkah 2: Konfigurasi Kredensial Google

Setelah Socialite terpasang, selanjutnya kamu perlu menambahkan kredensial akun Google pada proyek Laravel kamu. Caranya, buka file `.env` dan tambahkan kredensial berikut dengan mengisi nilai sesuai dengan informasi akun Google kamu:

GOOGLE_CLIENT_ID=isi_dengan_client_id_kamu
GOOGLE_CLIENT_SECRET=isi_dengan_client_secret_kamu
GOOGLE_REDIRECT_URL=isi_dengan_redirect_url_kamu

Kamu bisa mendapatkan `CLIENT_ID` dan `CLIENT_SECRET` dengan membuat aplikasi baru di Google Developer Console.

Langkah 3: Buat Route dan Controller

Selanjutnya, kita akan membuat route dan controller yang akan menangani proses login dengan akun Google. Buka file `routes/web.php` dan tambahkan route berikut:


Route::get('login/google', 'Auth\LoginController@redirectToGoogle');
Route::get('login/google/callback', 'Auth\LoginController@handleGoogleCallback');

Selanjutnya, buat controller dengan menjalankan perintah berikut di terminal:

php artisan make:controller Auth\LoginController

Kemudian, buka file `LoginController.php` yang ada di direktori `app/Http/Controllers/Auth` dan lengkapi method berikut:

use Illuminate\Support\Facades\Auth;
use Laravel\Socialite\Facades\Socialite;

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

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

  // Proses autentikasi atau registrasi user di sini
  // Contoh:
  // $userEmail = $user->getEmail();
  // $user = User::firstOrCreate(['email' => $userEmail]);

  Auth::login($user);

  return redirect('/home');
}

Langkah 4: Buat Tombol Login

Terakhir, tambahkan tombol login menggunakan akun Google pada tampilan (view) halaman login kamu. Buka file `resources/views/auth/login.blade.php` dan tambahkan kode berikut:

<a href="{{ url('login/google') }}" class="btn btn-google">Login dengan Akun Google</a>

Langkah 5: Testing

Selamat, kamu sudah menyelesaikan langkah-langkahnya! Untuk menguji apakah login dengan akun Google sudah berfungsi, jalankan server Laravel kamu dengan perintah `php artisan serve`, dan buka aplikasi di browser.

Jika sudah, klik tombol "Login dengan Akun Google" yang kamu tambahkan sebelumnya dan lihat bagaimana Socialite membawamu ke halaman login Google. Setelah berhasil login, kamu akan diarahkan kembali ke halaman home aplikasi.

Itulah cara mudah untuk membuat login menggunakan akun Google menggunakan Laravel dan Socialite. Semoga tutorial ini bermanfaat dan membantu kamu dalam mengembangkan proyek web kamu! Selamat mencoba! 🚀

Jika ada pertanyaan atau masukan, jangan ragu untuk bertanya pada kolom komentar di bawah. Terima kasih telah membaca, teman-teman!