Tambahkan tombol Login Dengan Google ke situs Anda untuk memungkinkan pengguna mendaftar atau login ke aplikasi web Anda. Gunakan HTML atau JavaScript untuk merender tombol dan atribut guna menyesuaikan bentuk, ukuran, teks, dan tema tombol.
Setelah pengguna memilih Akun Google dan memberikan izin mereka, Google akan membagikan profil pengguna menggunakan Token Web JSON (JWT). Untuk ringkasan langkah-langkah yang diperlukan selama login dan pengalaman pengguna, lihat Cara kerjanya. Pahami tombol yang dipersonalisasi meninjau berbagai kondisi dan status yang memengaruhi cara tombol ditampilkan kepada pengguna.
Prasyarat
Lakukan hal berikut sebelum menambahkan tombol ke halaman login Anda:
- Ikuti langkah-langkah yang dijelaskan di bagian Penyiapan untuk mengonfigurasi Layar Izin OAuth Anda dan mendapatkan Client ID.
- Memuat library klien.
Rendering tombol
Untuk menampilkan tombol Login Dengan Google, Anda dapat memilih HTML atau JavaScript untuk merender tombol pada halaman login Anda:
HTML
Render tombol login menggunakan HTML, yang akan menampilkan JWT ke endpoint login platform Anda.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<body>
</html>
Elemen dengan class g_id_signin
dirender sebagai tombol Login Dengan Google.
Tombol tersebut disesuaikan dengan parameter yang disediakan dalam atribut data.
Untuk menampilkan tombol Login Dengan Google dan Google One Ketuk di halaman yang sama,
hapus data-auto_prompt="false"
. Tindakan ini direkomendasikan untuk mengurangi hambatan dan
meningkatkan rasio login.
Untuk mengetahui daftar lengkap atribut data, lihat halaman referensi g_id_signin
JavaScript
Render tombol login menggunakan JavaScript, yang menampilkan JWT ke pengendali callback JavaScript browser.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID"
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
Elemen yang ditentukan sebagai parameter pertama untuk renderButton
ditampilkan sebagai
tombol Login Dengan Google. Dalam contoh ini, buttonDiv
digunakan untuk merender
tombol pada halaman. Tombol tersebut disesuaikan menggunakan atribut yang ditentukan dalam parameter kedua ke renderButton
.
Untuk meminimalkan hambatan pengguna, google.accounts.id.prompt()
dipanggil untuk menampilkan
Sekali Ketuk sebagai alternatif kedua untuk menggunakan tombol untuk mendaftar atau login.
Library GIS mengurai dokumen HTML untuk elemen dengan atribut ID yang ditetapkan ke
g_id_onload
, atau atribut class yang berisi g_id_signin
. Jika elemen yang cocok
ditemukan, tombol akan dirender menggunakan HTML, meskipun Anda juga telah
merender tombol tersebut dalam JavaScript. Agar tombol tidak ditampilkan dua kali,
mungkin dengan parameter yang bertentangan, jangan sertakan elemen HTML
yang cocok dengan nama tersebut di halaman HTML Anda.
Bahasa Tombol
Bahasa tombol otomatis ditentukan oleh bahasa default browser
atau preferensi pengguna sesi Google. Anda juga dapat memilih
bahasa secara manual dengan menambahkan parameter hl
dan kode bahasa ke perintah
src saat memuat library, serta dengan menambahkan parameter data lokal atau
parameter lokalitas opsional data-locale dalam HTML atau lokal di JavaScript.
HTML
Cuplikan kode berikut menunjukkan cara menampilkan bahasa tombol dalam bahasa Prancis
dengan menambahkan parameter hl
ke URL library klien dan dengan menetapkan
atribut data-locale
ke bahasa Prancis:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>
JavaScript
Cuplikan kode berikut menunjukkan cara menampilkan bahasa tombol dalam bahasa Prancis
dengan menambahkan parameter hl
ke URL library klien dan memanggil
metode google.accounts.id.renderButton
dengan parameter locale
yang disetel ke
bahasa Prancis:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
Penanganan kredensial
Setelah izin pengguna diberikan, Google akan menampilkan kredensial Token Web JSON (JWT) yang dikenal sebagai token ID ke browser pengguna, atau langsung ke endpoint login yang dihosting oleh platform Anda.
Tempat Anda memilih untuk menerima JWT bergantung pada apakah Anda merender tombol menggunakan HTML atau JavaScript dan apakah mode popup atau pengalihan UX digunakan.
Mode pop-up
Menggunakan mode UX popup
akan menjalankan alur UX login di jendela pop-up. Ini
umumnya merupakan pengalaman yang tidak terlalu mengganggu bagi pengguna dan merupakan mode UX default.
Saat merender tombol menggunakan:
HTML
Anda dapat menyetel:
data-callback
untuk menampilkan JWT ke pengendali callback, ataudata-login_uri
agar Google dapat mengirim JWT langsung ke endpoint login Anda menggunakan permintaan POST.
Jika kedua nilai ditetapkan, data-callback
akan lebih diprioritaskan daripada
data-login_uri
. Menetapkan kedua nilai tersebut dapat berguna saat menggunakan pengendali
callback untuk proses debug.
JavaScript
Anda harus menentukan callback
, mode pop-up tidak mendukung pengalihan saat merobek tombol di JavaScript. Jika ditetapkan, login_uri
akan diabaikan.
Lihat menangani respons kredensial yang ditampilkan untuk mengetahui informasi selengkapnya tentang mendekode JWT dalam pengendali callback JS Anda.
Mode pengalihan
Penggunaan mode UX redirect
akan menjalankan alur UX login menggunakan pengalihan halaman penuh dari browser pengguna, dan Google menampilkan JWT langsung ke endpoint login Anda menggunakan permintaan POST.
Biasanya ini akan lebih mengganggu pengalaman pengguna, tetapi dianggap
sebagai metode login yang paling aman.
Saat merender tombol menggunakan:
- HTML secara opsional menetapkan
data-login_uri
ke URI endpoint login Anda. - JavaScript secara opsional menetapkan
login_uri
ke URI endpoint login Anda.
Jika Anda tidak memberikan nilai, Google akan menampilkan JWT ke URI halaman saat ini.
URI endpoint login Anda
Gunakan HTTPS dan URI absolut saat menetapkan data-login_uri
atau login_uri
.
Misalnya, https://example.com/path
.
HTTP hanya diizinkan jika menggunakan localhost selama pengembangan:
http://localhost/path
.
Lihat Menggunakan asal JavaScript yang aman dan URI pengalihan untuk mendapatkan deskripsi lengkap tentang persyaratan dan aturan validasi Google.