Login dengan Google mengelola alur OAuth 2.0 dan siklus proses token, 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 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 Create credentials > Client ID OAuth yang baru.
- Pilih jenis aplikasi Web application.
- Beri nama klien OAuth 2.0 Anda, lalu klik Create
Setelah konfigurasi selesai, catat client ID yang dibuat. Anda memerlukan client ID untuk menyelesaikan langkah berikutnya. (Rahasia klien juga dibuat, tetapi Anda memerlukannya hanya untuk operasi sisi server.)
Memuat Library Platform Google
Anda harus menyertakan Library Platform Google di halaman web yang terintegrasi Login dengan Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Menentukan client ID aplikasi
Tentukan client ID yang Anda buat untuk aplikasi 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 otomatis dirender. Hanya dengan beberapa baris kode, Anda bisa menambahkan tombol yang secara otomatis mengkonfigurasi dirinya sendiri agar memiliki teks yang sesuai, logo, dan warna untuk status login pengguna dan cakupan yang Anda minta.
Untuk membuat tombol Login dengan Google yang menggunakan setelan default, tambahkan div
dengan class g-signin2 ke halaman login Anda:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Mendapatkan informasi profil
Setelah memasukkan pengguna dengan Google menggunakan cakupan default, Anda dapat mengakses ID Google, nama, URL profil, dan alamat email pengguna.
Untuk mengambil informasi profil untuk pengguna, gunakan
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
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>