Penyiapan

Untuk menambahkan tombol Login dengan Google atau perintah Login Sekali Ketuk dan Login Otomatis ke situs, Anda harus:

  1. mendapatkan client ID OAuth 2.0,
  2. mengonfigurasi branding dan setelan OAuth,
  3. memuat library klien Layanan Identitas Google, dan
  4. secara opsional menyiapkan Kebijakan Keamanan Konten dan
  5. memperbarui Kebijakan Pembuka Lintas Asal

Mendapatkan client ID Google API

Untuk mengaktifkan Layanan Identitas Google di situs Anda, Anda harus menyiapkan client ID Google API terlebih dahulu. Caranya, selesaikan langkah-langkah berikut:

  1. Buka dari .
  2. Buat atau pilih project . Jika Anda sudah memiliki project untuk tombol Login dengan Google atau Google One Tap, gunakan project yang ada dan client ID web. Saat membuat aplikasi produksi, beberapa project mungkin diperlukan, ulangi langkah-langkah lainnya di bagian ini untuk setiap project yang Anda kelola.
  3. Klik Buat klien dan untuk Jenis aplikasi, pilih Aplikasi web untuk membuat client ID baru. Untuk menggunakan ID klien yang ada, pilih salah satu jenis Web application.

  4. Tambahkan URI situs Anda ke Asal JavaScript resmi. URI hanya menyertakan skema dan nama host yang sepenuhnya memenuhi syarat. Misalnya, https://www.example.com.

  5. Atau, kredensial dapat ditampilkan menggunakan pengalihan ke endpoint yang Anda hosting, bukan melalui callback JavaScript. Jika demikian, tambahkan URI pengalihan Anda ke Authorized redirect URIs. URI alihan mencakup skema, nama host yang sepenuhnya memenuhi syarat, dan jalur, serta harus mematuhi Aturan validasi URI alihan. Contohnya, https://www.example.com/auth-receiver.

Sertakan client ID di aplikasi web Anda menggunakan kolom data-client_id atau client_id.

Autentikasi Login dengan Google dan Sekali Ketuk menyertakan layar izin yang memberi tahu pengguna bahwa aplikasi meminta akses ke data mereka, jenis data yang diminta, dan persyaratan yang berlaku.

  1. Buka di bagian Google Auth Platform di.
  2. Jika diminta, pilih project yang baru saja Anda buat.

  3. Di , isi formulir, lalu klik tombol "Simpan".

    1. Nama aplikasi: Nama aplikasi yang meminta izin. Nama harus mencerminkan aplikasi Anda secara akurat dan konsisten dengan nama aplikasi yang dilihat pengguna di tempat lain.

    2. Logo aplikasi: Gambar ini ditampilkan di layar izin untuk membantu pengguna mengenali aplikasi Anda. Logo ditampilkan di layar izin Login dengan Google dan di setelan akun, tetapi tidak ditampilkan di dialog Sekali Ketuk.

    3. Email dukungan: Ditampilkan di layar izin untuk dukungan pengguna dan kepada administrator G Suite yang mengevaluasi akses ke aplikasi Anda untuk pengguna mereka. Alamat email ini ditampilkan kepada pengguna di layar izin Login dengan Google saat pengguna mengklik nama aplikasi.

    4. Domain yang diizinkan: Untuk melindungi Anda dan pengguna Anda, Google hanya mengizinkan aplikasi yang mengautentikasi menggunakan OAuth untuk menggunakan Domain yang Diizinkan. Link aplikasi Anda harus dihosting di Domain yang Diotorisasi. Pelajari lebih lanjut.

    5. Link Halaman Beranda Aplikasi: Ditampilkan di layar izin Login dengan Google dan informasi pernyataan penyangkalan yang mematuhi GDPR dengan Sekali Ketuk di bawah tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Diotorisasi.

    6. Link Kebijakan Privasi Aplikasi: Ditampilkan di layar izin Login dengan Google dan informasi pernyataan penyangkalan yang mematuhi GDPR dengan Sekali Ketuk di bawah tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Diotorisasi.

    7. Link Persyaratan Layanan Aplikasi (Opsional): Ditampilkan di layar izin Login dengan Google dan informasi pernyataan penyangkalan yang mematuhi GDPR untuk Sekali Ketuk di bawah tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Diotorisasi.

  4. Buka untuk mengonfigurasi cakupan untuk aplikasi Anda.

    1. Cakupan untuk Google API: Cakupan memungkinkan aplikasi Anda mengakses data pribadi pengguna. Untuk autentikasi, cakupan default (email, profil, openid) sudah memadai, Anda tidak perlu menambahkan cakupan sensitif apa pun. Secara umum, praktik terbaiknya adalah meminta cakupan secara bertahap, saat akses diperlukan, bukan di awal.

  5. Periksa "Status Verifikasi", jika permohonan Anda memerlukan verifikasi, klik tombol "Kirim untuk Verifikasi" untuk mengirimkan permohonan Anda untuk verifikasi. Lihat persyaratan verifikasi OAuth untuk mengetahui detailnya.

Tampilan setelan OAuth selama login

Sekali Ketuk menggunakan FedCM

Setelan izin OAuth seperti yang ditampilkan oleh Chrome One Tap menggunakan FedCM

Domain resmi tingkat teratas ditampilkan selama izin pengguna di Chrome. Hanya menggunakan Sekali Ketuk di iframe lintas origin, tetapi situs yang sama adalah metode yang didukung.

Sekali Ketuk tanpa FedCM

Setelan izin OAuth seperti yang ditampilkan oleh Ketuk Sekali

Nama aplikasi ditampilkan selama izin pengguna.

Gambar 1. Setelan izin OAuth yang ditampilkan oleh Sekali Ketuk di Chrome.

Memuat library klien

Pastikan untuk memuat library klien Layanan Identitas Google di halaman mana pun yang dapat digunakan pengguna untuk login. Gunakan cuplikan kode berikut:

<script src="https://accounts.google.com/gsi/client" async></script>

Anda dapat mengoptimalkan kecepatan pemuatan halaman jika memuat skrip dengan atribut async.

Lihat referensi API HTML dan JavaScript untuk mengetahui daftar metode dan properti yang didukung library.

Kebijakan Keamanan Konten

Meskipun bersifat opsional, Kebijakan Keamanan Konten direkomendasikan untuk mengamankan aplikasi Anda dan mencegah serangan pembuatan skrip lintas situs (XSS). Untuk mempelajari lebih lanjut, lihat Pengantar CSP dan CSP dan XSS.

Kebijakan Keamanan Konten Anda mungkin menyertakan satu atau beberapa perintah, seperti connect-src, frame-src, script-src, style-src, atau default-src.

Jika CSP Anda menyertakan:

  • perintah connect-src, tambahkan https://accounts.google.com/gsi/ untuk mengizinkan halaman memuat URL induk untuk endpoint sisi server Layanan Identitas Google.
  • perintah frame-src, tambahkan https://accounts.google.com/gsi/ untuk mengizinkan URL induk iframe tombol One Tap dan Login dengan Google.
  • script-src, tambahkan https://accounts.google.com/gsi/client untuk mengizinkan URL library JavaScript Google Identity Services.
  • style-src, tambahkan https://accounts.google.com/gsi/style untuk mengizinkan URL Stylesheet Layanan Identitas Google.
  • Jika digunakan, perintah default-src adalah penggantian jika salah satu perintah sebelumnya (connect-src, frame-src, script-src, atau style-src) tidak ditentukan, tambahkan https://accounts.google.com/gsi/ untuk memungkinkan halaman memuat URL induk untuk endpoint sisi server Layanan Identitas Google.

Hindari mencantumkan setiap URL GIS saat menggunakan connect-src. Hal ini membantu meminimalkan kegagalan saat GIS diperbarui. Misalnya, gunakan URL induk GIS https://accounts.google.com/gsi/, bukan menambahkan https://accounts.google.com/gsi/status.

Contoh header respons ini memungkinkan Layanan Identitas Google dimuat dan dijalankan dengan sukses:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

Kebijakan Pembuka Lintas Asal

Tombol Login dengan Google dan Google Sekali Ketuk mungkin memerlukan perubahan pada Cross-Origin-Opener-Policy (COOP) agar berhasil membuat pop-up.

Jika FedCM diaktifkan, browser akan langsung merender pop-up dan tidak perlu perubahan.

Namun, jika FedCM dinonaktifkan, tetapkan header COOP:

  • ke same-origin dan
  • menyertakan same-origin-allow-popups.

Kegagalan dalam menetapkan header yang tepat akan mengganggu komunikasi antar-jendela, yang menyebabkan jendela pop-up kosong atau bug serupa.