Penyiapan

Untuk menambahkan tombol Login dengan Google atau One Tap dan perintah 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 Kebijakan Pembuka Lintas Asal

Catatan: Anda harus memiliki client ID untuk mengonfigurasi Login dengan Google dan memverifikasi token ID di backend. Client ID terlihat seperti contoh berikut: 1234567890-abc123def456.apps.googleusercontent.com

Mendapatkan client ID Google API

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

1. Buka halaman Klien di Konsol Google Cloud.
2. Buat atau pilih project Konsol Cloud. 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 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 client ID yang ada, pilih salah satu jenis Aplikasi web.

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

   Poin Penting: Untuk pengujian atau pengembangan lokal, tambahkan http://localhost dan http://localhost:<port_number>
   Poin Penting: Google One Tap hanya dapat ditampilkan di domain HTTPS.

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. Misalnya, https://www.example.com/auth-receiver.

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

Poin Penting: Saat melakukan pengujian menggunakan http dan localhost, tetapkan header Referrer-Policy di aplikasi web Anda ke Referrer-Policy: no-referrer-when-downgrade. Memuat gsi/client dari accounts.google.com adalah permintaan lintas asal. Referrer-Policy strict-origin-when-cross-origin direkomendasikan.

Mengonfigurasi Layar Izin OAuth

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

1. Buka halaman Branding di bagian Platform Google Auth di Konsol Cloud.
2. Jika diminta, pilih project yang baru Anda buat.

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

   1. Nama aplikasi: Nama aplikasi yang meminta izin. Nama tersebut harus secara akurat mencerminkan aplikasi Anda 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 One Tap.

   3. Email dukungan: Ditampilkan di layar izin untuk dukungan pengguna dan kepada administrator Google Workspace 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 sah: Guna melindungi Anda dan pengguna Anda, Google hanya mengizinkan aplikasi yang melakukan autentikasi menggunakan OAuth untuk menggunakan Domain yang Sah. Link aplikasi Anda harus dihosting di Domain yang Sah. Pelajari lebih lanjut.

   5. Link Halaman Beranda Aplikasi: Ditampilkan di layar izin Login dengan Google dan informasi disclaimer yang mematuhi GDPR One-Tap di bagian tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Sah.

   6. Link Kebijakan Privasi Aplikasi: Ditampilkan di layar izin Login dengan Google dan informasi disclaimer yang mematuhi GDPR One-Tap di bagian tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Sah.

   7. Link Persyaratan Layanan Aplikasi (Opsional): Ditampilkan di layar izin Login dengan Google dan informasi disclaimer yang mematuhi GDPR One-Tap di bagian tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Sah.

4. Buka halaman Akses Data 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 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" untuk mengirimkan aplikasi Anda untuk diverifikasi. Lihat persyaratan verifikasi OAuth untuk mengetahui detailnya.

Tampilan setelan OAuth selama login

One Tap menggunakan FedCM

Domain yang sah tingkat atas ditampilkan selama izin pengguna di Chrome. Hanya menggunakan One Tap di iframe lintas asal tetapi situs yang sama iframes adalah metode yang didukung.

One Tap tanpa FedCM

Nama aplikasi ditampilkan selama izin pengguna.

Gambar 1. Setelan izin OAuth yang ditampilkan oleh One Tap di Chrome.

Memuat library klien

Pastikan untuk memuat library klien Google Identity Services di halaman mana pun yang mungkin 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 HTML dan JavaScript API untuk mengetahui daftar metode dan properti yang didukung library.

Catatan: Library Google Identity Services dimaksudkan untuk dimuat dari https://accounts.google.com/gsi/client menggunakan elemen <script> di halaman web Anda. Hal ini memastikan integrasi Anda selalu menerima update keamanan penting dan perbaikan kompatibilitas penting. Perhatikan bahwa hosting sendiri atau menggunakan salinan offline bukanlah kasus penggunaan yang didukung dan dapat menyebabkan perilaku yang tidak terduga atau kegagalan integrasi di masa mendatang.

Kebijakan Keamanan Konten

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

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

Jika CSP Anda menyertakan:

• Direktif connect-src, tambahkan https://accounts.google.com/gsi/ untuk mengizinkan halaman memuat URL induk untuk endpoint sisi server Google Identity Services.
• Direktif frame-src, tambahkan https://accounts.google.com/gsi/ untuk mengizinkan URL induk iframe tombol One Tap dan Login dengan Google.
• Direktif script-src, tambahkan https://accounts.google.com/gsi/client untuk mengizinkan URL library JavaScript Google Identity Services.
• Direktif style-src, tambahkan https://accounts.google.com/gsi/style untuk mengizinkan URL Stylesheet Google Identity Services.
• Direktif default-src, jika digunakan, 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 satu per satu 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/.

Contoh header respons ini memungkinkan Google Identity Services dimuat dan dijalankan 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/;

Kebijakan Pembuka Lintas Asal

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

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

Namun, jika FedCM dinonaktifkan, tetapkan header COOP:

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

Jika header yang tepat tidak ditetapkan, komunikasi antarjendela akan terganggu, sehingga menyebabkan jendela pop-up kosong atau bug serupa.