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:
- Buka halaman Kredensial di konsol API Google.
- Buat atau pilih project Google API. 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, mungkin diperlukan beberapa project. Ulangi langkah-langkah yang tersisa di bagian ini untuk setiap project yang Anda kelola.
- Klik Create credentials > OAuth client ID dan untuk Application type, pilih Web application untuk membuat client ID baru. Untuk menggunakan client ID yang ada, pilih salah satu jenis Web application.
Tambahkan URI situs Anda ke Asal JavaScript resmi. URI hanya menyertakan skema dan nama host yang sepenuhnya memenuhi syarat. Misalnya,
https://www.example.com.Atau, kredensial dapat ditampilkan menggunakan pengalihan ke endpoint yang Anda hosting, bukan melalui callback JavaScript. Jika demikian, tambahkan URI pengalihan ke Authorized redirect URI. 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.
Mengonfigurasi Layar Izin OAuth
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.
- Buka halaman OAuth consent screen di bagian API & Services di Google Developer Console.
- Jika diminta, pilih project yang baru saja Anda buat.
Di halaman "Layar izin OAuth", isi formulir dan klik tombol "Simpan".
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.
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 pada dialog Sekali Ketuk.
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.
Cakupan untuk Google API: Cakupan memungkinkan aplikasi Anda mengakses data pribadi pengguna. Untuk autentikasi, cakupan default (email, profil, openid) sudah cukup, Anda tidak perlu menambahkan cakupan sensitif apa pun. Umumnya, praktik terbaiknya adalah meminta cakupan secara bertahap, saat akses diperlukan, bukan di awal. Pelajari lebih lanjut
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.
Link Halaman Beranda Aplikasi: Ditampilkan di layar izin Login dengan Google dan informasi pernyataan penyangkalan yang mematuhi GDPR dengan Satu Ketuk di bawah tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Diotorisasi.
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 Diotorisasi.
Link Persyaratan Layanan Aplikasi (Opsional): Ditampilkan pada layar Login dengan izin Google dan informasi pernyataan penyangkalan yang mematuhi GDPR Sekali Ketuk di bagian tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Diotorisasi.
Periksa "Status Verifikasi", jika aplikasi Anda memerlukan verifikasi, klik tombol "Kirim untuk Verifikasi" untuk mengirimkan aplikasi Anda untuk verifikasi. Lihat persyaratan verifikasi OAuth untuk mengetahui detailnya.
Tampilan setelan OAuth selama login
Sekali Ketuk menggunakan FedCM
Domain yang diotorisasi tingkat teratas ditampilkan selama izin pengguna di Chrome.
Sekali Ketuk tanpa FedCM
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, tambahkanhttps://accounts.google.com/gsi/agar halaman dapat memuat URL induk untuk endpoint sisi server Google Identity Services. - perintah
frame-src, tambahkanhttps://accounts.google.com/gsi/untuk mengizinkan URL induk iframe tombol One Tap dan Login dengan Google. script-src, tambahkanhttps://accounts.google.com/gsi/clientuntuk mengizinkan URL library JavaScript Google Identity Services.- perintah
style-src, tambahkanhttps://accounts.google.com/gsi/styleuntuk mengizinkan URL Stylesheet Layanan Identitas Google. - Jika digunakan, perintah
default-srcadalah penggantian jika salah satu perintah sebelumnya (connect-src,frame-src,script-src, ataustyle-src) tidak ditentukan, tambahkanhttps://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-origindan - 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.