Google Sign-In mengelola alur OAuth 2.0 dan siklus hidup token, menyederhanakan integrasi Anda dengan Google API. Pengguna selalu memiliki opsi untuk mencabut akses ke aplikasi kapan saja.
Dokumen ini menjelaskan cara menyelesaikan integrasi Google Sign-In dasar.
Buat 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 proyek Anda. Aplikasi Anda kemudian dapat menggunakan kredensial untuk mengakses API yang telah Anda aktifkan untuk proyek tersebut.
- Go to the Credentials page.
- Klik Buat kredensial > ID klien OAuth .
- Pilih jenis aplikasi aplikasi Web .
- Beri nama klien OAuth 2.0 Anda dan klik Buat
Setelah konfigurasi selesai, perhatikan client ID yang telah dibuat. Anda akan memerlukan ID klien untuk menyelesaikan langkah selanjutnya. (Rahasia klien juga dibuat, tetapi Anda hanya memerlukannya untuk operasi sisi server.)
Muat Perpustakaan Google Platform
Anda harus menyertakan Google Platform Library di halaman web Anda yang mengintegrasikan Google Sign-In.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Tentukan ID klien aplikasi Anda
Tentukan ID klien yang Anda buat 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">Tambahkan tombol Masuk dengan Google
Cara termudah untuk menambahkan tombol Masuk dengan Google ke situs Anda adalah dengan menggunakan tombol masuk yang dirender secara otomatis. Dengan hanya beberapa baris kode, Anda dapat menambahkan tombol yang secara otomatis mengonfigurasi dirinya sendiri untuk memiliki teks, logo, dan warna yang sesuai untuk status masuk pengguna dan cakupan yang Anda minta.
Untuk membuat tombol Masuk dengan Google yang menggunakan setelan default, tambahkan elemen div dengan kelas g-signin2 ke laman masuk Anda:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
Dapatkan informasi profil
Setelah Anda memasukkan pengguna 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.
}
Keluar dari pengguna
Anda dapat memungkinkan pengguna untuk keluar dari aplikasi Anda tanpa keluar dari Google dengan menambahkan tombol atau tautan keluar ke situs Anda. Untuk membuat tautan keluar, lampirkan fungsi yang memanggil metode GoogleAuth.signOut() ke peristiwa onclick tautan.
<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>