Penyiapan

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

Mendapatkan client ID Google API

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

  1. Buka halaman Credentials di konsol API Google.
  2. 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, beberapa project mungkin diperlukan, ulangi langkah-langkah tersisa dari bagian ini untuk setiap project yang Anda kelola.
  3. 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.
  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 diotorisasi. URI pengalihan mencakup skema, nama host, dan jalur yang sepenuhnya memenuhi syarat, 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 halaman OAuth consent screen dari bagian API & Services di Google Developer Console.
  2. Jika diminta, pilih project yang baru saja Anda buat.
  3. Pada halaman "OAuth consent screen", isi formulir dan klik tombol "Save".

    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 pada dialog Sekali Ketuk.

    3. Email dukungan: Ditampilkan di layar izin untuk dukungan pengguna dan kepada admin G Suite 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. 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, pada saat akses diperlukan, bukan sejak awal. Pelajari lebih lanjut

    5. Domain yang diotorisasi: Untuk melindungi Anda dan pengguna Anda, Google hanya mengizinkan aplikasi yang melakukan autentikasi menggunakan OAuth untuk menggunakan Domain yang Diotorisasi. Link aplikasi Anda harus dihosting di Domain yang Diotorisasi. Pelajari lebih lanjut.

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

    7. 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.

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

  4. Periksa "Status Verifikasi", jika aplikasi memerlukan verifikasi, lalu klik tombol "Kirim Untuk Verifikasi" guna mengirimkan permohonan verifikasi. Lihat Persyaratan verifikasi OAuth untuk detailnya.

Tampilan setelan OAuth selama login

Sekali Ketuk menggunakan FedCM

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

Domain resmi level teratas ditampilkan selama pengguna memberikan izin di Chrome.

Sekali Ketuk tanpa FedCM

Setelan izin OAuth seperti yang ditampilkan oleh Sekali Ketuk

Nama aplikasi akan ditampilkan selama pengguna memberikan izin.

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

Kebijakan Keamanan Konten

Meskipun opsional, Kebijakan Keamanan Konten direkomendasikan untuk mengamankan aplikasi Anda dan mencegah serangan pembuatan skrip lintas situs (XSS). Untuk mempelajari lebih lanjut, lihat Pengantar CSP serta 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:

  • connect-src, tambahkan https://accounts.google.com/gsi/ untuk mengizinkan halaman memuat URL induk untuk endpoint sisi server Google Identity Services.
  • frame-src, tambahkan https://accounts.google.com/gsi/ untuk mengizinkan URL induk iframe tombol Sekali Ketuk 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.
  • Perintah default-src, jika digunakan, menyediakan penggantian jika salah satu perintah sebelumnya (connect-src, frame-src, script-src, atau style-src) tidak ditentukan, tambahkan https://accounts.google.com/gsi/ agar halaman dapat 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 diupdate. 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 dieksekusi 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 One Tap mungkin memerlukan perubahan pada Cross-Origin-Opener-Policy (COOP) Anda agar berhasil membuat pop-up.

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

Namun, saat FedCM dinonaktifkan, tetapkan header COOP:

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

Gagal menetapkan header yang tepat akan memutus komunikasi antar-jendela, yang menyebabkan jendela pop-up kosong atau bug serupa.