Login dengan Google mengelola alur OAuth 2.0 dan siklus proses token, yang menyederhanakan integrasi Anda dengan Google API. Pengguna selalu memiliki opsi untuk membatalkan akses ke aplikasi kapan saja.
Dokumen ini menjelaskan cara menyelesaikan integrasi Login dengan Google di tingkat dasar.
Membuat kredensial otorisasi
Setiap aplikasi 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. Aplikasi Anda kemudian dapat menggunakan kredensial untuk mengakses API yang telah Anda aktifkan untuk project tersebut.
- Go to the Credentials page.
- Klik Buat Klien.
- Pilih jenis aplikasi Aplikasi web.
- Beri nama klien OAuth 2.0 Anda, lalu klik Buat
Setelah konfigurasi selesai, catat client ID yang telah dibuat. Anda memerlukan client ID untuk menyelesaikan langkah berikutnya. (Rahasia klien juga dibuat, tetapi Anda hanya memerlukannya untuk operasi sisi server.)
Memuat Library Google Platform
Anda harus menyertakan Library Google Platform di halaman web yang mengintegrasikan Login Google.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Menentukan client ID aplikasi Anda
Tentukan client ID yang Anda buat untuk aplikasi di Konsol Google Developers
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 secara otomatis mengonfigurasi dirinya sendiri untuk 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>
Mendapatkan informasi profil
Setelah Anda membuat pengguna login dengan Google menggunakan cakupan default, Anda dapat mengakses ID Google, nama, URL profil, dan alamat email pengguna.
Untuk mengambil informasi profil 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 mengizinkan pengguna logout dari aplikasi tanpa logout dari Google dengan
menambahkan tombol atau link logout 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>