Membuat Fitur Login dengan Akun Google di Jetstream Laravel 8

Admin・ 16 Oktober 2021

8 min read ・ 3221 views

Laravel Jetstream Google Authentication - Pada saat daftar akun atau login di suatu platform atau sistem, pasti kamu sering melihat adanya opsi register atau login menggunakan akun-akun media sosial seperti google, facebook, github, twitter atau yang lainnya. Nah, di artikel ini saya akan share tutorial cara membuat fitur register atau login (authentication) menggunakan akun google di jetstream laravel 8. Untuk membuat fitur google authentication di jetstream laravel 8 kali ini, saya akan menggunakan socialstream package.

Oke, mari kita langsung saja ke koding untuk membuat fitur google authentication atau register dan login menggunakan akun google di jetstream laravel 8. 👇 👨‍💻

Step 1: Install Laravel

//via Laravel Installer
composer global require laravel/installer
laravel new laravel-jetstream-google-authentication

//via Composer
composer create-project laravel/laravel laravel-jetstream-google-authentication

Pada langkah yang pertama ini, kita perlu menginstall laravel versi terbaru (saat ini versi 8) yang akan kita gunakan untuk membuat google authentication atau register dan login menggunakan akun google di jetstream laravel 8. Untuk installasi laravel bisa menggunakan laravel installer atau menggunakan composer seperti contoh di atas.

Silahkan memilih salah satu cara yang ingin digunakan untuk installasi laravel. Dari kedua contoh perintah installasi laravel di atas, akan sama-sama menghasilkan atau generate laravel project dengan nama laravel-jetstream-google-authentication.

Step 2: Setup Database

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_jetstream_google_authentication
DB_USERNAME=root
DB_PASSWORD=

Selanjutnya, buat database baru untuk kita gunakan pada percobaan ini. Jika kamu menggunakan xampp sebagai local development, silahkan buat database baru di localhost/phpmyadmin. Disini saya beri contoh, saya membuat database baru dengan nama laravel_jetstream_google_authentication. Kemudian jangan lupa juga untuk menyesuaikan DB_DATABASE pada file .env seperti pada contoh di atas.

Step 3: Buat Client ID & Secret ID

Untuk dapat menggunakan google untuk authentication atau register dan login di laravel project, kita memerlukan Client ID dan Client Secret yang bisa kita dapatkan di Google Cloud Platform. Bagaimana cara mendapatkannya ? simak langkah-langkahnya di bawah ini.

• Kunjungi https://console.cloud.google.com
• Create Project

Silahkan klik dropdown "Select a project", kemudian klik new project.

Kemudian, inputkan nama project yang akan dibuat. Sebagai contoh, disini saya akan membuat project baru dengan nama codelapan.

• Create Oauth Concent Screen

Setelah selesai membuat project baru, langkah selanjutnya yaitu kita membuat OAuth concent secreen. Arahkan ke APIs & Services, kemudian klik OAuth Concent Secreen.

Untuk user type, kita bisa pilih external atau silahkan disesuaikan dengan fungsi dari aplikasi laravel yang kamu buat. 

Kemudian, isi form-input yang tersedia seperti gambar di atas. Untuk privacy policy dan terms of service, kita akan menggunakan link bawaan dari jetstream. Jadi, untuk saat ini, kamu bisa mengisinya seperti gambar di atas.

• Create Oauth Client ID

Oke, setelah selesai di langkah Oauth concent secreen, sekarang kita langjutkan dengan membuat credentials Oauth Client ID. Klik menu Credentials yang ada di sidebar, kemudian klik Create Credentials, lalu klik OAuth client ID.

Untuk application type, kita bisa memilih Web application. Kemudian isi name dan authorized redirect URLs. Untuk URls, kita bisa isi dengan http://127.0.0.1:8000/oauth/google/callback. Jika form input sudah terisi semua, lanjutkan dengan klik button Create.

Maka kita sudah berhasil membuat OAuth client yang akan kita gunakan untuk membuat google authentication di jetstream laravel 8. Client id dan secret id seperti gambar di atas, akan kita gunakan untuk menghubungkan google dengan laravel pada langkah-langkah berikutnya. 

Step 4: Install Jetstream

composer require laravel/jetstream
php artisan jetstream:install livewire
npm install && npm run dev

Oke. Sekarang waktunya kita untuk menginstall jetstream di laravel project kita untuk membuat authentication system. Untuk menginstall jetstream di laravel project kita, pastikan sudah masuk ke direktori project dengan cd laravel-jetstream-google-authentication, lalu jalankan perintah-perintah seperti di atas secara berurutan.

Step 5: Install Socialstream

composer require joelbutcher/socialstream
php artisan socialstream:install
npm run dev

Di artikel ini, saya membagikan contoh cara membuat google authentication di jetstream laravel 8 menggunakan package yang namanya socialstream. Jadi pada langkah ini, kita akan menginstall socialstream package tersebut. Jalankan perintah-perintah seperti di atas secara berurutan untuk menginstall social stream di laravel project kita.

php artisan migrate

Kemudian, jalankan perintah php artisan migrate untuk memigrasi semua file migration ke database yang telah kita buat pada langkah sebelumnya.

Step 6: Setup Socialstream

Ok, pada step keenam ini kita akan melakukan setup atau konfigurasi untuk socialstream.

config/socialstream.php

'providers' => [
    Providers::google(),
],

Yang pertama, silahkan buka file di config/socialstream.php. Karena di artikel ini saya fokuskan untuk membahas membuat google authentication di jetstream laravel, jadi pada providers, kita bisa pakai provider google seperti kode di atas.

config/services.php

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect' => env('GOOGLE_REDIRECT'), // e.g. 'https://your-domain.com/oauth/{provider}/callback'
],

Kemudian, buka file services.php dan tambahkan provider google seperti kode di atas.

.env

GOOGLE_CLIENT_ID=367341232266-l7hucpo5ggttn6b51oallq709qqeejr.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=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
GOOGLE_REDIRECT=https://7c57-36-68-61-211.ngrok.io/oauth/google/callback

Selanjutnya, buka file .env dan tambahkan GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET dan GOOGLE_REDIRECT.

GOOGLE_CLIENT_ID dan GOOGLE_CLIENT_SECRET, silahkan diisi dengan ID yang telah kita dapatkan pada langkah awal tadi, yaitu saat step nomor 3.

Step 7: Testing

Setelah melalui proses-proses yang dimulai dari membuat Google Client ID dan Secret ID, install laravel, setup database, install jetstream, install socialstream dan hingga langkah yang terakhir yaitu melakukan konfigurasi, maka sekarang waktunya kita untuk testing. Silahkan jalankan laravel project kita terlebih dahulu dengan menjalankan perintah php artisan serve, lalu buka laravel project pada browser. Coba masuk ke halaman register, di halaman register sudah terdapat icon google. Nah, coba klik icon google tersebut, maka nanti akan ada tampilan seperti gambar di atas.

Coba lihat gambar di atas, terdapat link privacy policy dan terms of service. Jika link-link tersebut diklik, maka akan diarahkan ke URL http://127.0.0.1:8000/privacy-policy dan http://127.0.0.1:8000/terms-of-service. Untuk mengaktifikan kedua link atau halaman tersebut, kita bisa masuk ke file config/jetstream.php, lalu uncomment pada Feature::termsAndPrivacyPolicy() seperti kode di bawah ini.

config/jetstream.php

'features' => [
    Features::termsAndPrivacyPolicy(),
    // Features::profilePhotos(),
    // Features::api(),
    // Features::teams(['invitations' => true]),
    Features::accountDeletion(),
],

Baiklah, cukup sekian artikel dengan topik bahasan membuat google authentication (socialite) di jetstream laravel 8 kali ini. Jika teman-teman ada cara lain yang lebih baik atau lebih mudah dari apa yang telah saya tuliskan di artikel ini, teman-teman bisa share pada form komentar di bawah ini. Semoga artikel ini bisa membantu teman-teman, selamat mencoba dan sampai jumpa di artikel berikutnya. 👋 🚀

👨‍💻 Explore: Socialstream Package 📦