Tambahkan perintah Sekali Ketuk ke situs Anda agar pengguna dapat mendaftar atau login ke aplikasi web Anda. Gunakan HTML dan JavaScript untuk merender dan menyesuaikan perintah.
Prasyarat
Ikuti langkah-langkah yang dijelaskan di bagian Penyiapan untuk mengonfigurasi Layar Izin OAuth, mendapatkan client ID, dan memuat library klien.
Tambahkan tombol Login dengan Google ke halaman login Anda.
Rendering perintah
Tempatkan cuplikan kode ke halaman mana pun tempat Anda ingin One Tap ditampilkan.
HTML
Tampilkan perintah Sekali Ketuk, yang menampilkan kredensial JWT ke endpoint login.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-your_own_param_1_to_login="any_value"
data-your_own_param_2_to_login="any_value">
</div>
Atribut data-login_uri adalah URI endpoint login aplikasi web Anda. Anda dapat menambahkan atribut data kustom, yang dikirim ke endpoint login bersama dengan token ID yang diterbitkan oleh Google.
Gunakan atribut data-context untuk mengubah teks yang digunakan dalam judul perintah.
Misalnya, data-context: "signup" mengubah "Login ke" menjadi "Daftar ke".
Untuk mengetahui daftar lengkap atribut yang didukung, lihat referensi g_id_onload.
JavaScript
Tampilkan perintah Sekali Ketuk, yang menampilkan kredensial JWT ke pengendali callback JavaScript browser.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt();
}
</script>
Untuk mengonfigurasi perintah Sekali Ketuk di JavaScript, Anda harus memanggil
metode initialize() terlebih dahulu. Kemudian, panggil metode prompt() untuk menampilkan UI prompt.
Gunakan kolom context untuk mengubah teks yang digunakan dalam judul perintah.
Misalnya, context: 'signup' mengubah "Login ke" menjadi "Daftar ke".
Untuk mengetahui daftar lengkap opsi data, lihat referensi idConfiguration.
Status perintah
Gunakan fungsi callback JavaScript untuk memproses notifikasi status UI prompt.
Notifikasi dikirim untuk momen berikut:
Momen tampilan: Ini terjadi setelah metode
prompt()dipanggil. Notifikasi ini berisi nilai boolean untuk menunjukkan apakah UI ditampilkan atau tidak.Momen yang dilewati: Hal ini terjadi saat perintah Sekali Ketuk ditutup oleh pembatalan otomatis, pembatalan manual, atau saat Google gagal mengeluarkan kredensial, seperti saat sesi yang dipilih logout dari Google.
Dalam hal ini, sebaiknya lanjutkan ke penyedia identitas berikutnya, jika ada.
Momen ditutup: Hal ini terjadi saat Google berhasil mengambil kredensial, atau pengguna ingin menghentikan alur pengambilan kredensial. Misalnya, saat pengguna mulai memasukkan nama pengguna dan sandi ke dalam dialog login, Anda dapat memanggil metode
google.accounts.id.cancel()untuk menutup perintah Sekali Ketuk dan memicu momen yang ditutup.
HTML
Gunakan atribut data-moment_callback untuk menentukan fungsi callback JavaScript. Pengendali callback diperlukan untuk menerima notifikasi.
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
Untuk memfasilitasi pengguna login atau mendaftar, Anda dapat berkomunikasi dengan beberapa penyedia identitas untuk menemukan kredensial yang tersedia. Sebaiknya Anda mengetahui status UI perintah kami agar dapat memanggil penyedia identitas berikutnya.
JavaScript
Teruskan pengendali callback Anda sebagai parameter ke google.accounts.id.prompt,
di sini fungsi panah digunakan untuk menangani pembaruan notifikasi.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try next provider if OneTap is not displayed or skipped
}
});
}
</script>
Tombol dan perintah
Tombol Login dengan Google dan perintah Sekali Ketuk dapat ditampilkan bersama di satu halaman.
HTML
Tampilkan tombol Login dengan Google dan perintah Sekali Ketuk dengan menyertakan
elemen g_id_onload dan g_id_signin.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="https://your.domain/your_login_endpoint"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
JavaScript
Tampilkan tombol Login dengan Google dan perintah Sekali Ketuk dengan memanggil
fungsi renderButton() dan prompt() secara bersamaan.
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
const parent = document.getElementById('google_btn');
google.accounts.id.renderButton(parent, {theme: "filled_blue"});
google.accounts.id.prompt();
}
</script>
Jangan menutupi Sekali Ketuk
Bagian ini hanya berlaku jika FedCM dinonaktifkan. Jika FedCM diaktifkan, browser akan menampilkan perintah pengguna di atas konten halaman.
Untuk memastikan pengguna akhir melihat semua informasi yang ditampilkan, Google One Tap tidak boleh tertutupi oleh konten lain. Jika tidak, jendela pop-up mungkin dipicu dalam beberapa kasus.
Periksa kembali tata letak halaman dan properti z-index elemen, untuk memastikan Google One Tap tidak tertutup oleh konten lain kapan saja. Perubahan alur UX dapat dipicu meskipun hanya satu piksel di batas yang tercakup.
Respons kredensial
JWT yang ditandatangani Google disertakan dalam respons kredensial. Respons ditampilkan ke browser menggunakan fungsi callback JavaScript atau ke platform Anda melalui pengalihan ke endpoint login.
Callback JS
Gunakan HTML atau JavaScript untuk mengonfigurasi callback.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
Sebagai contoh, handleCredentialResponse mendekode JWT dan mencetak beberapa
kolom token ID ke konsol.
<script>
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
function handleCredentialResponse(response) {
const responsePayload = decodeJwtResponse(response.credential);
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email);
}
function decodeJwtResponse(token) {
let base64Url = token.split('.')[1];
let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
}
</script>
Pengalihan
Untuk menampilkan kredensial ke endpoint login platform Anda, tambahkan URL ke setelan Authorized redirect URI klien web OAuth 2.0 Anda.
Gunakan HTML atau JavaScript untuk mengonfigurasi URI pengalihan.
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-ux_mode="redirect"
data-login-uri="YOUR_LOGIN_URI"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});