Halaman ini menjelaskan cara mengimplementasikan fitur terkait cara pengguna login atau logout dengan Google One Tap.
Memproses login pengguna secara otomatis
Google One Tap mendukung login otomatis, yang memberikan pengalaman pengguna (UX) yang lancar dengan menghapus langkah-langkah manual yang harus dilakukan pengunjung saat kembali ke situs Anda. Pengguna tidak perlu mengingat Akun Google mana yang mereka pilih selama kunjungan terakhir, sehingga mengurangi kemungkinan akun duplikat yang tidak perlu dibuat di platform Anda.
Login otomatis dimaksudkan untuk melengkapi dialog Login dengan Google dan dialog Sekali Ketuk. Fitur ini dirancang untuk digunakan di seluruh situs Anda, dengan pendaftaran manual atau peralihan akun yang terjadi hanya setelah pengguna logout pertama kali dari situs Anda.
Agar Login otomatis terjadi, kondisi berikut wajib diisi:
- pengguna harus login ke Akun Google mereka terlebih dahulu, dan
- sebelumnya memberikan izin untuk membagikan profil akunnya dengan aplikasi Anda, dan
- saat menggunakan FedCM, hanya melakukan satu upaya login dalam 10 menit terakhir. Fitur Sekali Ketuk akan ditampilkan jika upaya login berulang terjadi selama periode ini.
Untuk halaman yang mengaktifkan Login otomatis dan jika kondisi ini terpenuhi, kredensial token ID pengunjung akan otomatis ditampilkan tanpa interaksi pengguna. Jika kondisi ini tidak terpenuhi, dan meskipun Login otomatis diaktifkan di halaman, pengguna akan ditetapkan secara default ke alur Sekali Ketuk untuk login atau izin. Jika pengguna memiliki beberapa Akun Google dan mengunjungi situs Anda, mereka harus login terlebih dahulu ke satu Akun Google dan memberikan izin untuk akun tersebut.
Anda dapat mengukur tingkat keberhasilan login otomatis menggunakan nilai auto di kolom select_by pada objek kredensial yang ditampilkan.
Untuk mengaktifkan login otomatis, tambahkan data-auto_select="true" ke kode Anda, seperti yang ditunjukkan dalam cuplikan berikut:
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_select="true">
</div>
Logout
Saat pengguna logout dari situs Anda, mereka akan diarahkan ke halaman tempat perintah Google Sekali Ketuk ditampilkan secara otomatis. Untuk penyiapan ini, pemilihan otomatis harus dilarang. Jika tidak, pengguna akan otomatis login lagi, yang akan menyebabkan UX loop mati.
Menggunakan FedCM
Untuk meningkatkan pengalaman pengguna, ada waktu tenang selama 10 menit di antara setiap upaya login otomatis. Selama jangka waktu ini, Satu Ketuk akan ditampilkan.
Tanpa FedCM
Untuk mencegah pemilihan otomatis setelah pengguna logout, tambahkan nama class
g_id_signout ke semua link dan tombol logout Anda. Lihat cuplikan kode
berikut:
<div class="g_id_signout">Sign Out</div>
Cuplikan kode JavaScript berikut juga dapat digunakan untuk logout:
const button = document.getElementById('signout_button');
button.onclick = () => {
google.accounts.id.disableAutoSelect();
}
Oleh karena itu, status logout dicatat melalui cookie di domain Anda sehingga UX dead loop dapat dihindari.
Status logout disimpan ke cookie g_state di domain Anda. Jika Anda
memiliki layanan yang memantau semua cookie yang digunakan di domain, Anda perlu
memberi tahu mereka tentang cookie ini.
Jika Anda tidak ingin memuat library klien pada halaman pasca-login, gunakan solusi ini untuk mencegah UX loop mati setelah terjadi logout:
- Saat logout, alihkan pengguna ke halaman (misalnya,
https://example.com/logged_out) yang tidak menampilkan fitur Sekali Ketuk, atau login otomatis yang selalu dinonaktifkan. - Saat logout, tambahkan parameter ke URL. Misalnya,
logged_out=1. Saat merender Sekali Ketuk API JavaScript, periksa parameter URL tersebut dan nonaktifkan login otomatis jika ada.
Perjalanan utama pengguna
Halaman login otomatis.
Menggunakan FedCM
Jika pengguna tidak mengklik X untuk membatalkan dalam waktu 5 detik, token ID akan dibagikan ke situs Anda.
Tanpa FedCM
Jika pengguna tidak mengklik tombol Cancel dalam 5 detik, token ID akan dibagikan ke situs Anda.
Jika Login dibatalkan, berdasarkan jumlah sesi Google yang aktif, halaman pemilih akun atau halaman pengguna yang kembali akan ditampilkan.
Beberapa sesi Google
Menggunakan FedCM
Tanpa FedCM
Sesi Google Tunggal
Menggunakan FedCM
Tanpa FedCM
