Halaman ini menjelaskan cara mengimplementasikan fitur yang terkait dengan cara pengguna login atau logout dengan Google One Tap.
Membuat pengguna login secara otomatis
Google One Tap mendukung login otomatis, sehingga 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 tombol Login dengan Google dan dialog Sekali Ketuk. Fitur ini didesain untuk digunakan di seluruh situs Anda, dengan pendaftaran manual atau peralihan akun yang terjadi hanya setelah pengguna pertama kali logout 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 ke aplikasi Anda, dan
- saat menggunakan FedCM, hanya melakukan satu upaya login dalam 10 menit terakhir. Sekali Ketuk ditampilkan saat upaya login berulang terjadi selama jendela ini.
- saat menggunakan FedCM, Chrome mengharuskan pengguna untuk mengonfirmasi ulang bahwa mereka ingin login ke situs dengan Akun Google di setiap instance Chrome meskipun pengguna menyetujui situs tersebut sebelum peluncuran FedCM. Perubahan ini dapat memengaruhi rasio konversi di situs Anda yang ada menggunakan fitur Sekali Ketuk. Di update Chrome M121, Peningkatan Login Otomatis mengurangi masalah penurunan rasio konversi.
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 dari 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, mereka dapat 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 menyebabkan UX dead loop.
Menggunakan FedCM
Untuk meningkatkan pengalaman pengguna, ada masa tenang selama 10 menit antara setiap upaya login otomatis. Selama jangka waktu ini, One Tap akan ditampilkan.
Tanpa FedCM
Untuk mencegah pemilihan otomatis setelah pengguna logout, tambahkan nama class
g_id_signout
ke semua tombol dan link 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();
}
Akibatnya, 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, Anda perlu memberi tahu mereka tentang cookie ini.
Jika Anda tidak ingin memuat library klien di halaman pasca-login, gunakan solusi ini untuk mencegah UX dead loop setelah logout terjadi:
- Saat logout, alihkan pengguna ke halaman (misalnya,
https://example.com/logged_out
) yang tidak menampilkan One Tap, atau yang login otomatis selalu dinonaktifkan. - Saat logout, tambahkan parameter ke URL. Misalnya,
logged_out=1
. Saat merender Sekali Ketuk dari JavaScript API, 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