Penyiapan

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

1. mendapatkan client ID OAuth 2.0,
2. mengonfigurasi branding dan setelan OAuth,
3. memuat library klien Google Identity Services, dan
4. secara opsional menyiapkan Kebijakan Keamanan Konten dan
5. Memperbarui Cross-Origin Opener Policy

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 .
2. Buat atau pilih project. Jika Anda sudah memiliki project untuk tombol Login dengan Google atau Login Sekali dengan Google, gunakan project yang ada dan ID klien web. Saat membuat aplikasi produksi, beberapa project mungkin diperlukan. Ulangi langkah-langkah yang tersisa di bagian ini untuk setiap project yang Anda kelola.
3. Klik Buat klien, lalu 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 Authorized JavaScript origins. URI hanya mencakup 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 host, 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.

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

Mengonfigurasi Layar Izin OAuth Anda

Autentikasi Login dengan Google dan Sekali Ketuk menyertakan layar izin yang memberi tahu pengguna aplikasi yang 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 dan 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 Google Workspace yang mengevaluasi akses ke aplikasi Anda bagi 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 melakukan autentikasi 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 kepatuhan GDPR sekali ketuk di bawah tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Diotorisasi.

   6. Link Kebijakan Privasi Aplikasi: Ditampilkan di layar izin Masuk dengan Google dan informasi pernyataan kepatuhan GDPR 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 dengan fitur 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 Anda. Untuk autentikasi, cakupan default (email, profil, openid) sudah cukup, Anda tidak perlu menambahkan cakupan sensitif. Secara umum, sebaiknya minta cakupan secara bertahap, pada saat akses diperlukan, bukan di awal.

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

Tampilan setelan OAuth selama login

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

Memuat library klien

Pastikan untuk memuat library klien Layanan Identitas Google di halaman tempat pengguna dapat login. Gunakan cuplikan kode berikut:

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

Anda dapat mengoptimalkan kecepatan pemuatan halaman jika Anda 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.

Content Security Policy Anda dapat mencakup satu atau beberapa direktif, seperti connect-src, frame-src, script-src, style-src, atau default-src.

Jika CSP Anda mencakup:

• connect-src, tambahkan https://accounts.google.com/gsi/ untuk mengizinkan halaman memuat URL induk untuk endpoint sisi server Layanan Identitas Google.
• 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, direktif default-src adalah penggantian jika salah satu direktif sebelumnya (connect-src, frame-src, script-src, atau style-src) tidak ditentukan, tambahkan https://accounts.google.com/gsi/ untuk mengizinkan halaman memuat URL induk untuk endpoint sisi server Google Identity Services.

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

Header respons contoh ini memungkinkan Layanan Identitas Google dimuat dan dieksekusi dengan berhasil:

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/;

Cross Origin Opener Policy

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

Jika FedCM diaktifkan, browser akan merender pop-up secara langsung dan tidak ada perubahan yang diperlukan.

Namun, saat FedCM dinonaktifkan, tetapkan header COOP:

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

Gagal menyetel header yang tepat akan merusak komunikasi antarjendela, sehingga menyebabkan jendela pop-up kosong atau bug serupa.