Penyiapan

Sebelum menambahkan Login dengan Google, Sekali Ketuk, atau Login otomatis ke situs Anda, siapkan konfigurasi OAuth dan konfigurasi Kebijakan Keamanan Konten situs Anda (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 Google API.

  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.

    Jika project Anda tidak memiliki client ID jenis aplikasi Web, klik Create credentials > OAuth client ID untuk membuat client ID. Pastikan untuk menyertakan domain situs Anda di kotak Asal JavaScript yang sah. Perhatikan bahwa Google One Tap hanya dapat ditampilkan di domain HTTPS. Saat melakukan pengujian atau pengembangan lokal, Anda harus menambahkan http://localhost dan http://localhost:<port_number> ke kotak Asal JavaScript yang sah. Header Referrer-Policy juga harus ditetapkan ke no-referrer-when-downgrade saat menggunakan http dan localhost.

Autentikasi Login dengan Google dan Sekali Ketuk mencakup layar izin yang memberi tahu pengguna bahwa aplikasi meminta akses ke data mereka, jenis data yang diminta, dan persyaratan yang berlaku.

  1. Buka halaman Layar persetujuan OAuth di konsol Google API.
  2. Jika diminta, pilih project yang baru saja dibuat.

  3. Pada halaman "Layar izin OAuth", isi formulir lalu klik tombol "Simpan".

    1. Nama aplikasi: Nama aplikasi yang meminta izin. Nama harus secara akurat mencerminkan aplikasi Anda dan konsisten dengan nama aplikasi yang dilihat pengguna di tempat lain. Nama aplikasi akan ditampilkan di jendela dialog Sekali ketuk.

    2. Logo aplikasi: Gambar pada layar izin yang akan membantu pengguna mengenali aplikasi Anda. Logo ditampilkan pada layar izin Login dengan Google dan setelan akun, sedangkan logo 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 untuk pengguna mereka. Alamat email ini akan 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 Google milik pengguna. Untuk autentikasi, cakupan default (email, profil, openid) sudah memadai, Anda tidak perlu menambahkan cakupan sensitif apa pun. Secara umum, praktik terbaik adalah meminta cakupan secara bertahap, pada saat akses diperlukan, bukan di awal. Pelajari lebih lanjut.

    5. Domain yang diotorisasi: Untuk melindungi Anda dan pengguna, 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 kepatuhan GDPR sekali ketuk di bagian tombol "Lanjutkan sebagai". Harus dihosting di Domain yang Diotorisasi.

    7. Link Policy Privacy Application: Ditampilkan pada layar izin Login dengan Google dan pernyataan penyangkalan kepatuhan GDPR sekali ketuk pada tombol "Continue as". Harus dihosting di Domain yang Diotorisasi.

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

    Gambar 1. Kolom Layar Izin OAuth yang ditampilkan di UI Sekali Ketuk

  4. Memeriksa status "Verifikasi", jika aplikasi Anda memerlukan verifikasi, lalu klik tombol "Kirim Untuk Verifikasi" guna mengirimkan permohonan verifikasi. Lihat persyaratan verifikasi OAuth untuk mengetahui detailnya.

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 dan CSP dan XSS.

Kebijakan Keamanan Konten Anda dapat mencakup satu atau beberapa perintah, seperti connect-src, frame-src, script-src, atau style-src.

Jika CSP Anda mencakup:

  • Perintah connect-src, tambahkan https://accounts.google.com/gsi/ guna 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 Sekali Ketuk dan Login dengan Google.
  • Perintah script-src, tambahkan https://accounts.google.com/gsi/client untuk mengizinkan URL library JavaScript Layanan Identitas Google.
  • Perintah style-src, tambahkan https://accounts.google.com/gsi/style untuk mengizinkan URL Stylesheet Layanan Identitas Google.

Hindari mencantumkan URL GIS satu per satu saat menggunakan connect-src. Tindakan 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 Layanan Identitas Google untuk memuat dan mengeksekusi 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

Agar tombol Login dengan Google dan/atau Google One Tap berfungsi dengan baik dengan jendela pop-up, Anda tidak boleh menetapkan header respons Cross-Origin-Opener-Policy HTTP ke same-origin, yang akan menghentikan komunikasi antara jendela dan menyebabkan jendela pop-up kosong atau bug serupa.

Nilai same-origin-allow-popups direkomendasikan untuk header Cross-Origin-Opener-Policy pada halaman tempat tombol Login dengan Google dan/atau Ketuk Google One ditampilkan.