Login dengan UX tombol Google

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 yang 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 akan mengingatkan mereka bahwa Login dengan Google telah digunakan sebelumnya. Dengan demikian, hal 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 akan menyetujui klien, dan ada akun yang sesuai di situs Anda.

  

• Beberapa sesi: Ada beberapa sesi di sisi Google. Sesi tersebut menyetujui klien. Persetujuan ditunjukkan dengan 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 jika status sesi sesuai, kecuali jika setelan tombol Anda tidak mengizinkan tombol yang dipersonalisasi ditampilkan. Tombol yang dipersonalisasi tidak ditampilkan jika:

• Atribut data-type adalah icon.
• Atribut data-size ditetapkan ke medium atau small.
• Atribut data-width ditetapkan ke angka yang lebih kecil dari 200 piksel.
• Cookie pihak ketiga diblokir, dan tombol versi FedCM tidak diaktifkan.

Nama atau alamat email akan dihilangkan jika terlalu panjang untuk ditampilkan di dalam tombol.

Poin Penting: Alat developer Pembuat Kode dapat membantu Anda mendesain tombol Login dengan Google secara interaktif dan membuat kode.

Federated Credential Manager (FedCM)

Privacy Sandbox untuk Web memperkenalkan perubahan signifikan pada Layanan Identitas Google dan login pengguna. Hal ini memengaruhi tombol Login dengan Google yang dipersonalisasi. Meskipun alur login tidak terpengaruh dengan tombol tersebut, dengan cookie pihak ketiga yang diblokir, pengguna yang kembali tidak akan melihat tombol yang dipersonalisasi.

Dengan alur tombol Federated Credentials Management API (FedCM), 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:

• Peningkatan Pengalaman Pengguna yang Kembali: Proses login pengguna yang kembali dioptimalkan karena pengguna dapat mengenali akun mereka yang sudah ada. Peningkatan pengenalan ini terbukti menghasilkan rasio klik-tayang (CTR) yang lebih tinggi. Selain itu, tidak seperti alur tombol tanpa mengaktifkan FedCM, alur tombol FedCM mendukung fitur pilihan otomatis - pengguna yang kembali dengan sesi Google yang 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 Relying Party (RP) dapat berfungsi secara bersamaan. Gestur pengguna dalam alur tombol FedCM akan direkam dan dihormati oleh Chrome untuk memenuhi konfirmasi ulang satu kali untuk alur login otomatis Sekali Ketuk. Hal ini memastikan pengalaman yang lancar di semua fitur.

Perjalanan utama pengguna

Poin Penting: Apakah tombol yang dipersonalisasi atau tombol teks umum ditampilkan tidak memengaruhi alur UX setelah tombol diklik. Akun yang ditampilkan di tombol yang dipersonalisasi tidak dipilih secara otomatis.

Poin Penting: Alur tombol Login dengan Google tidak mendukung login otomatis. Tindakan pengguna diperlukan untuk memilih sesi yang tepat, meskipun hanya ada satu sesi Google yang aktif.

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 minimal satu sesi aktif di situs Google.
  • Tidak ada sesi Google: 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 yang memiliki sesi Google

Tombol tanpa FedCM

1. Tombol Login dengan Google.

   

2. Halaman pemilih akun.

   

3. Halaman izin pengguna baru.

   

4. 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 Tanpa sesi Google.

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 dengan sesi Google

Tombol tanpa FedCM

1. Tombol Login dengan Google.

   

2. Halaman pemilih akun.

   

3. 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 'Tanpa sesi Google'.

Tombol menggunakan FedCM

Layar kedua terakhir dalam alur adalah layar pemuatan, yang otomatis mengalihkan pengguna ke endpoint login Anda tanpa tindakan dari pengguna.

Memiliki-sesi-Google dengan perjalanan pengguna yang kembali dipilih 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 tanpa sesi Google

Tombol tanpa FedCM

1. Tombol Login dengan Google.

   

2. Halaman pertama untuk menambahkan sesi Google baru.

   

3. Halaman kedua untuk menambahkan sesi Google baru.

   

4. Halaman izin pengguna baru.

   

5. 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 tanpa sesi Google

Tombol tanpa FedCM

1. Tombol Login dengan Google.

   

2. Halaman pertama untuk menambahkan sesi Google baru.

   

3. Halaman kedua untuk menambahkan sesi Google baru.

   

4. 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 adalah alur tambahan yang akan ditampilkan untuk Akun Google anak saat login.

Tombol tanpa FedCM

Tanpa-sesi-Google

1. Tombol Login dengan Google.

   

2. Halaman pertama untuk menambahkan sesi Google anak baru (email Akun Google anak).

   

3. Halaman kedua untuk menambahkan sesi Google anak baru (sandi Akun Google anak).

   

4. Halaman pertama untuk mendapatkan persetujuan dari orang tua guna menambahkan sesi Google anak baru.

   

5. Halaman kedua untuk mendapatkan persetujuan dari orang tua guna menambahkan sesi Google anak baru.

   

6. Halaman ketiga untuk mendapatkan persetujuan dari orang tua guna menambahkan sesi Google anak baru.

   

7. Halaman pertama untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

8. Halaman kedua untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

9. Halaman ketiga untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

10. Halaman terakhir untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

    

11. Setelah orang tua mengklik tombol Lanjutkan, token ID akan dibagikan ke situs Anda.

Has-Google-session

1. Tombol Login dengan Google.

   

2. Halaman pemilih akun.

   

3. Halaman pertama untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

4. Halaman kedua untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

5. Halaman ketiga untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

6. Halaman terakhir untuk mendapatkan persetujuan dari orang tua agar dapat login ke Akun Google anak ke aplikasi.

   

7. 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 origin. Lihat langkah 7 untuk mengetahui informasi selengkapnya.

• Siapkan Kebijakan Keamanan Konten (CSP) situs Anda dengan benar. Lihat langkah 8 untuk mengetahui informasi selengkapnya.

• Status waktu tunggu dan setelan Login pihak ketiga di Chrome tidak berpengaruh pada alur tombol FedCM. Status (seperti yang ditunjukkan dalam screenshot berikut) hanya memengaruhi UX Sekali Ketuk.