Halaman ini menjelaskan pengalaman pengguna (UX) tombol Login dengan Google.
Rendering tombol
Tombol yang dipersonalisasi menampilkan informasi profil untuk sesi Google pertama yang menyetujui situs Anda. Sesi Google yang disetujui memiliki akun yang sesuai di situs Anda yang telah login menggunakan Login Dengan Google sebelumnya.
Jika tombol yang dipersonalisasi ditampilkan, pengguna akan mengetahui hal berikut:
- Ada setidaknya satu sesi Google aktif.
- Ada akun yang sesuai di situs Anda.
Tombol yang dipersonalisasi memberi pengguna indikasi cepat tentang status sesi, baik di sisi Google maupun di situs Anda, sebelum mereka mengklik tombol. Hal ini sangat membantu pengguna akhir yang hanya sesekali mengunjungi situs Anda. Mereka mungkin lupa apakah akun telah dibuat atau belum, dan dengan cara apa. Tombol yang dipersonalisasi mengingatkan mereka bahwa Login Dengan Google telah digunakan sebelumnya. Dengan demikian, tombol ini membantu mencegah pembuatan akun duplikat yang tidak perlu di situs Anda.
Untuk menunjukkan status sesi, tombol yang dipersonalisasi ditampilkan dengan cara berikut:
Satu sesi: Hanya ada satu sesi di sisi Google. Sesi tersebut menyetujui klien, dan ada akun yang sesuai di situs Anda.
Beberapa sesi: Ada beberapa sesi di sisi Google. Sesi tersebut menyetujui klien. Persetujuan ditunjukkan oleh panah daftar di samping akun yang ditampilkan. Setidaknya satu sesi memiliki akun yang sesuai di situs Anda.
Tidak ada sesi: Tidak ada sesi di sisi Google, atau tidak ada sesi yang telah menyetujui klien.
Tombol yang dipersonalisasi akan otomatis ditampilkan saat status sesi sesuai, kecuali jika setelan tombol Anda tidak mengizinkan tombol yang dipersonalisasi ditampilkan. Tombol yang dipersonalisasi tidak ditampilkan jika:
- Atribut
data-typeadalahicon. - Atribut
data-sizeditetapkan kemediumatausmall. - Atribut
data-widthditetapkan ke angka yang lebih kecil dari 200 piksel. - Cookie pihak ketiga diblokir, dan versi FedCM tombol tidak diaktifkan.
Nama atau alamat email akan di-elipsis jika terlalu panjang untuk ditampilkan di dalam tombol.
Federated Credential Manager (FedCM)
Privacy Sandbox untuk Web memperkenalkan perubahan signifikan pada Layanan Identitas Google dan login pengguna. Hal ini memengaruhi tombol yang dipersonalisasi Login dengan Google. Meskipun alur login tidak terpengaruh dengan tombol tersebut, jika cookie pihak ketiga diblokir, pengguna yang kembali tidak akan melihat tombol yang dipersonalisasi.
Dengan Federated Credentials Management API (FedCM) alur tombol, pengguna akan dapat melihat tombol Login dengan Google yang dipersonalisasi di situs Anda. Secara default, FedCM dinonaktifkan, tetapi Anda dapat mengaktifkan FedCM dengan mengubah satu atribut (HTML/JavaScript). Manfaat tombol FedCM meliputi:
Pengalaman Pengguna yang Kembali yang Lebih Baik: Proses login pengguna yang kembali menjadi lebih efisien karena pengguna dapat mengenali akun mereka yang sudah ada. Pengenalan yang lebih baik ini terbukti menghasilkan rasio klik-tayang (CTR) yang lebih tinggi. Selain itu, tidak seperti alur tombol tanpa FedCM yang diaktifkan, alur tombol FedCM mendukung fitur pemilihan otomatis. Pengguna yang kembali dengan sesi Google aktif akan otomatis login setelah mengklik tombol, sehingga melewati perintah Pemilih Akun.
Integrasi Fitur yang Ditingkatkan: Kami telah mengintegrasikan fungsi Sekali Ketuk dan Login Otomatis, sehingga semua fitur Login dengan Google Federated Credential Management (FedCM) dari satu Pihak Tepercaya (RP) dapat berfungsi bersama. Gestur pengguna dalam alur tombol FedCM akan direkam dan dipenuhi oleh Chrome untuk memenuhi konfirmasi ulang satu kali untuk alur login otomatis Sekali Ketuk. Hal ini memastikan pengalaman yang lancar di semua fitur.
Perjalanan pengguna utama
Perjalanan pengguna bervariasi berdasarkan status berikut.
Status sesi di situs Google. Istilah berikut digunakan untuk menunjukkan status sesi Google yang berbeda saat perjalanan pengguna dimulai.
- Has-Google-session: Ada setidaknya satu sesi aktif di situs Google.
- No-Google-session: Tidak ada sesi aktif di situs Google.
Apakah Akun Google yang dipilih telah menyetujui situs Anda saat perjalanan pengguna dimulai. Istilah berikut digunakan untuk menunjukkan status persetujuan yang berbeda.
- Pengguna baru: Akun yang dipilih belum menyetujui situs Anda.
- Pengguna yang kembali: Akun yang dipilih telah menyetujui situs Anda sebelumnya.
Perjalanan pengguna baru Has-Google-session
Tombol tanpa FedCM
Tombol Login dengan Google.
Halaman pemilih akun.
Halaman izin pengguna baru.
Setelah pengguna mengonfirmasi, token ID akan dibagikan ke situs Anda.
Pengguna dapat menambahkan sesi Google baru dengan mengklik tombol Gunakan akun lain, lihat bagian perjalanan pengguna No-Google-session.
Tombol menggunakan FedCM
Layar kedua terakhir dalam alur adalah layar pemuatan, yang otomatis mengalihkan pengguna ke endpoint login Anda tanpa tindakan dari pengguna.
Perjalanan pengguna yang kembali Has-Google-session
Tombol tanpa FedCM
Tombol Login dengan Google.
Halaman pemilih akun.
Setelah pengguna memilih akun yang kembali, token ID akan dibagikan ke situs Anda.
Pengguna dapat menambahkan sesi Google baru dengan mengklik tombol Gunakan akun lain, lihat bagian perjalanan pengguna 'No-Google-session'.
Tombol menggunakan FedCM
Layar kedua terakhir dalam alur adalah layar pemuatan, yang otomatis mengalihkan pengguna ke endpoint login Anda tanpa tindakan dari pengguna.
Perjalanan pengguna yang kembali Has-Google-session dengan pemilihan otomatis
Tombol tanpa FedCM
Tombol Login dengan Google tanpa FedCM tidak memiliki fitur pemilihan otomatis.
Tombol menggunakan FedCM
Pengguna yang kembali dengan sesi Google aktif akan otomatis dipilih setelah mengklik tombol, sehingga melewati perintah Pemilih Akun. Tetapkan
atribut auto select ke benar (HTML/JavaScript).
Perjalanan pengguna baru No-Google-session
Tombol tanpa FedCM
Tombol Login dengan Google.
Halaman pertama untuk menambahkan sesi Google baru.
Halaman kedua untuk menambahkan sesi Google baru.
Halaman izin pengguna baru.
Setelah pengguna mengonfirmasi, token ID akan dibagikan ke situs Anda.
Tombol menggunakan FedCM
Layar kedua terakhir dalam alur adalah layar pemuatan, yang otomatis mengalihkan pengguna ke endpoint login Anda tanpa tindakan dari pengguna.
Perjalanan pengguna yang kembali No-Google-session
Tombol tanpa FedCM
Tombol Login dengan Google.
Halaman pertama untuk menambahkan sesi Google baru.
Halaman kedua untuk menambahkan sesi Google baru.
Setelah pengguna mengklik tombol Berikutnya, token ID akan dibagikan ke situs Anda.
Tombol menggunakan FedCM
Perjalanan pengguna utama akun Family Link
Perjalanan pengguna utama umum dari bagian sebelumnya masih berlaku. Berikut ini menunjukkan alur tambahan yang akan ditampilkan untuk Akun Google anak saat login.
Tombol tanpa FedCM
No-Google-session
Tombol Login dengan Google.
Halaman pertama untuk menambahkan sesi Google anak baru (email Akun Google anak).
Halaman kedua untuk menambahkan sesi Google anak baru (sandi Akun Google anak).
Halaman pertama untuk mendapatkan persetujuan dari orang tua untuk menambahkan sesi Google anak baru.
Halaman kedua untuk mendapatkan persetujuan dari orang tua untuk menambahkan sesi Google anak baru.
Halaman ketiga untuk mendapatkan persetujuan dari orang tua untuk menambahkan sesi Google anak baru.
Halaman pertama untuk mendapatkan persetujuan dari orang tua untuk login ke Akun Google anak ke aplikasi.
Halaman kedua untuk mendapatkan persetujuan dari orang tua untuk login ke Akun Google anak ke aplikasi.
Halaman ketiga untuk mendapatkan persetujuan dari orang tua untuk login ke Akun Google anak ke aplikasi.
Halaman terakhir untuk mendapatkan persetujuan dari orang tua untuk login ke Akun Google anak ke aplikasi.
Setelah orang tua mengklik tombol Lanjutkan, token ID akan dibagikan ke situs Anda.
Has-Google-session
Tombol Login dengan Google.
Halaman pemilih akun.
Halaman pertama untuk mendapatkan persetujuan dari orang tua untuk login ke Akun Google anak ke aplikasi.
Halaman kedua untuk mendapatkan persetujuan dari orang tua untuk login ke Akun Google anak ke aplikasi.
Halaman ketiga untuk mendapatkan persetujuan dari orang tua untuk login ke Akun Google anak ke aplikasi.
Halaman terakhir untuk mendapatkan persetujuan dari orang tua untuk login ke Akun Google anak ke aplikasi.
Setelah orang tua mengklik tombol Lanjutkan, token ID akan dibagikan ke situs Anda.
Tombol menggunakan FedCM
Tombol Login dengan Google dengan FedCM yang diaktifkan saat ini tidak mendukung akun Family Link.
Informasi tambahan tentang alur tombol FedCM
Tambahkan atribut
allow="identity-credentials-get"ke frame induk jika aplikasi web Anda memanggil Button API dari iframe lintas asal. Lihat langkah 7 untuk mengetahui informasi selengkapnya.Siapkan Kebijakan Keamanan Konten (CSP) situs Anda dengan benar. Lihat langkah 8 untuk mengetahui informasi selengkapnya.
Status cooldown dan setelan Login pihak ketiga di Chrome tidak memengaruhi alur tombol FedCM. Status (seperti yang ditunjukkan dalam screenshot berikut) hanya memengaruhi UX Sekali Ketuk.
