Login dan logout otomatis

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

Pop-up login otomatis FedCM

Jika pengguna tidak mengklik X untuk membatalkan dalam waktu 5 detik, token ID akan dibagikan ke situs Anda.

Tanpa FedCM

Pop-up login otomatis.

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

    Halaman Pemilih Akun FedCM

    Tanpa FedCM

    Halaman Pemilih Akun

  • Sesi Google Tunggal

    Menggunakan FedCM

    Halaman Pemilih Akun FedCM

    Tanpa FedCM

    Halaman pengguna yang kembali Sekali Ketuk