Penyiapan

Sebelum menambahkan Login dengan Google, Sekali Ketuk, atau Login otomatis ke situs, siapkan konfigurasi OAuth dan konfigurasikan Kebijakan Keamanan Konten situs Anda secara opsional.

Mendapatkan client ID Google API

Untuk mengaktifkan Login dengan 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 Aplikasi web.

  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. Secara opsional, kredensial dapat ditampilkan menggunakan pengalihan ke endpoint yang Anda hosting, bukan melalui callback JavaScript. Jika demikian, tambahkan URI pengalihan Anda ke URI pengalihan yang sah. URI pengalihan mencakup skema, nama host yang sepenuhnya memenuhi syarat, dan jalur, serta harus mematuhi Aturan validasi URI pengalihan. Contohnya, https://www.example.com/auth-receiver.

Autentikasi Login dengan Google dan One Tap 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 resmi: Untuk melindungi Anda dan pengguna, Google hanya mengizinkan aplikasi yang mengautentikasi menggunakan OAuth untuk menggunakan Domain Resmi. Link aplikasi Anda harus dihosting di Domain Resmi. Pelajari lebih lanjut.

    5. Link Halaman Beranda Aplikasi: Ditampilkan di layar izin Login dengan Google dan informasi pernyataan penyangkalan yang mematuhi GDPR One-Tap 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 untuk fitur Sekali Ketuk di bawah tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Diizinkan.

    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.

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.
  • perintah 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 diperlukan 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.