Integrasi login dengan akun Google dapat meningkatkan pengalaman pengguna dan mempermudah proses otentikasi pada aplikasi web Anda. Dalam panduan ini, kami akan membahas langkah-langkah untuk mengintegrasikan Google Login menggunakan JavaScript ke dalam aplikasi web Laravel Anda. Proses ini akan memungkinkan pengguna untuk masuk ke aplikasi Anda menggunakan akun Google mereka.
Persiapan
Sebelum kita mulai, pastikan Anda telah memenuhi persyaratan berikut:
Aplikasi Laravel
Pastikan Anda memiliki aplikasi Laravel yang sudah berjalan. Jika belum, baca panduan di sini Tutorial Install Laravel
Akun Pengembang Google
Anda perlu memiliki akun pengembang Google dan membuat proyek di Google Developers Console.
API Key Google
Dalam proyek Google Developers Console Anda, Anda harus mengaktifkan API Google+ API dan mendapatkan kunci API untuk digunakan dalam aplikasi Anda. Ikuti langkah berikut:
1. Buat project baru dengan menekan tombol Create Project
2. Buat OAuth Consent Screen di sidebar kiri
Pilih User Type External kemudian klik tombol Create. Selanjutnya isi form yang required saja, skip bagian Scopes dan Test users, tekan Save and continue sampai langkah terakhir.
3. Selanjutnya buat Credentials untuk mendapatkan API Key, klik menu Credentials > Create Credentials > OAuth client ID
Selanjutnya pilih Application type Web application nama aplikasi Anda. Tambahkan Authorized http://localhost:8000 dan http://localhost
Perlu diperhatikan bahwa url ini akan diverifikasi, jika port/link di tempat Anda berbeda maka sesuaikan, atau Anda sudah memiliki aplikasi yang aktif maka tambahkan domain Anda.
Selanjutnya Anda akan mendapatkan API Key, yang nanti digunakan untuk Login Google.
Sampai di sini Anda sudah siap untuk melakukan integrasi Google Login di aplikasi web Laravel Anda. Simpan Client ID Anda
Langkah-langkah Integrasi
1. Membuat Tampilan
Masuk ke project laravel Anda kemudian edit file welcome.blade.php replace bagian body dengan code berikut:
<body class="antialiased">
<div class="relative sm:flex sm:justify-center sm:items-center min-h-screen bg-dots-darker bg-center bg-gray-100 dark:bg-dots-lighter dark:bg-gray-900 selection:bg-red-500 selection:text-white">
<div class="p-6" style="max-width:400px">
<div class="grid">
<div class="scale-100 p-6 bg-white dark:bg-gray-800/50 dark:bg-gradient-to-bl from-gray-700/50 via-transparent dark:ring-1 dark:ring-inset dark:ring-white/5 rounded-lg shadow-2xl shadow-gray-500/20 dark:shadow-none transition-all duration-250 focus:outline focus:outline-2 focus:outline-red-500">
<button onclick="login()" style="background-color: #1a73e8;color:#fff;display:flex;align-items:center;width:180px;border-radius:4px">
<div style="background-color: #fff;margin:2px;padding:10px;border-radius:2px 0px 0px 2px;">
<svg style="width: 18px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="LgbsSe-Bz112c">
<g>
<path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
<path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
<path fill="none" d="M0 0h48v48H0z"></path>
</g>
</svg>
</div>
<div style="margin-left:5px;font-size:14px">
Sign in with Google
</div>
</button>
</div>
</div>
</div>
</div>
</body>
2. Setup Library Google
Masukan kode berikut di dalam head (tepat sebelum </head>)
<script src="https://accounts.google.com/gsi/client" async defer onload="initializeLibrary()"></script>Selanjutnya buat fungsi ketika library selesai dimuat, buat <script> baru di bagian paling bawah (setelah </html>)
function initializeLibrary() {
google.accounts.id.initialize({
client_id: '385441095408-pu45rbb0l1pljurm8upviu6smo2gudak.apps.googleusercontent.com',
cancel_on_tap_outside: false,
context: 'use',
callback: onAuthGSI
})
}
3. Buat Fungsi Callback
Buat callback untuk menangani ketika memanggil fungsi login di library Google, tuliskan kode berikut:
function onAuthGSI (response) {
let responsePayload = decodeJwtResponseFromGoogleAPI(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}4. Buat Fungsi Decode JWT
Karena response dari Login Google berupa token JWT, untuk melihat detailnya buat fungsi untuk decode, tuliskan kode berikut:
function decodeJwtResponseFromGoogleAPI (token) {
let base64Url = token.split('.')[1]
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload =
decodeURIComponent(atob(base64).split('').map(function (c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);}).join(''));
return JSON.parse(jsonPayload)
}5. Buat Fungsi Login
Terakhir buat fungsi login untuk mentrigger ketika tombol ditekan, tuliskan kode berikut:
function login(){
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed()) {
document.cookie = `g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT`;
google.accounts.id.prompt()
}
});
}
Dengan mengikuti langkah-langkah di atas, Anda dapat mengintegrasikan Google Login ke dalam aplikasi web Laravel Anda. Ini akan memungkinkan pengguna untuk login dengan akun Google mereka, meningkatkan kenyamanan dan keamanan aplikasi Anda.
