Login dengan Google mengelola alur OAuth 2.0 dan siklus proses token, sehingga menyederhanakan integrasi Anda dengan Google API. Pengguna selalu memiliki opsi untuk mencabut akses ke aplikasi kapan saja.
Dokumen ini menjelaskan cara menyelesaikan integrasi Login dengan Google di tingkat dasar.
Membuat kredensial otorisasi
Aplikasi apa pun yang menggunakan OAuth 2.0 untuk mengakses Google API harus memiliki kredensial otorisasi yang mengidentifikasi aplikasi ke server OAuth 2.0 Google. Langkah-langkah berikut menjelaskan cara membuat kredensial untuk project Anda. Selanjutnya, aplikasi Anda dapat menggunakan kredensial tersebut untuk mengakses API yang telah Anda aktifkan untuk project tersebut.
- Go to the Credentials page.
- Klik Buat kredensial > client ID OAuth.
- Pilih jenis aplikasi Aplikasi web.
- Beri nama klien OAuth 2.0 Anda, lalu klik Buat
Setelah konfigurasi selesai, catat client ID yang dibuat. Anda memerlukan client ID untuk menyelesaikan langkah berikutnya. (Rahasia klien juga dibuat, tetapi Anda hanya memerlukannya untuk operasi sisi server.)
Memuat Google Platform Library
Anda harus menyertakan Library Google Platform di halaman web Anda yang mengintegrasikan Login dengan Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Menentukan client ID aplikasi
Tentukan client ID yang dibuat untuk aplikasi Anda di Google Developers Console
dengan elemen meta google-signin-client_id.
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
Menambahkan tombol Login dengan Google
Cara termudah untuk menambahkan tombol Login dengan Google ke situs Anda adalah menggunakan tombol login yang dirender secara otomatis. Hanya dengan beberapa baris kode, Anda dapat menambahkan tombol yang otomatis mengonfigurasi dirinya sendiri agar memiliki teks, logo, dan warna yang sesuai untuk status login pengguna dan cakupan yang Anda minta.
Untuk membuat tombol Login dengan Google yang menggunakan setelan default, tambahkan elemen div
dengan class g-signin2 ke halaman login Anda:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Dapatkan informasi profil
Setelah Anda memproses login pengguna dengan Google menggunakan cakupan default, Anda dapat mengakses ID Google, nama, URL profil, dan alamat email pengguna.
Untuk mengambil informasi profil bagi pengguna, gunakan
metode
getBasicProfile().
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
Membuat pengguna logout
Anda dapat memungkinkan pengguna untuk logout dari aplikasi Anda tanpa logout dari Google dengan menambahkan tombol logout atau link ke situs Anda. Untuk membuat link logout, lampirkan fungsi yang memanggil metode GoogleAuth.signOut() ke peristiwa onclick link.
<a href="#" onclick="signOut();">Sign out</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>