Untuk mengizinkan akses ke Google API di aplikasi web Anda menggunakan library JavaScript Layanan Identitas Google (google.accounts.oauth2), Anda harus:
- Dapatkan client ID OAuth 2.0.
- Konfigurasi layar izin dan cakupan OAuth Anda.
- Muat library klien.
- Siapkan Kebijakan Keamanan Konten (CSP) dan Kebijakan Pembuka Lintas Origin (COOP) jika perlu.
Mendapatkan client ID Google API
Untuk mengaktifkan Otorisasi Akun Google di situs Anda, Anda harus menyiapkan client ID Google API terlebih dahulu. Selesaikan langkah berikut:
- Buka halaman Clients di Konsol Google Cloud.
- Buat atau pilih project Konsol Cloud. Saat membuat aplikasi produksi, beberapa project mungkin diperlukan; ulangi langkah-langkah selanjutnya di bagian ini untuk setiap project yang Anda kelola.
- Klik Create client dan untuk Application type, pilih Web application untuk membuat client ID baru. Untuk menggunakan client ID yang ada, pilih salah satu jenis aplikasi web.
Tambahkan URI situs Anda ke Authorized JavaScript origins. URI hanya menyertakan skema dan nama host yang sepenuhnya memenuhi syarat. Misalnya,
https://www.example.com.Jika Anda menggunakan model kode otorisasi dengan
ux_mode: 'redirect'(atau menukarkan kode otorisasi di endpoint backend), tambahkan URI pengalihan Anda ke Authorized redirect URIs. URI pengalihan mencakup skema, nama host yang sepenuhnya memenuhi syarat, dan jalur, serta harus mematuhi Aturan validasi URI pengalihan. Misalnya,https://www.example.com/oauth2callback.
Setelah konfigurasi selesai, catat client ID yang dibuat.
Anda akan meneruskan nilai ini di properti client_id saat melakukan inisialisasi
initCodeClient() atau initTokenClient(). (Rahasia klien juga dibuat, yang harus Anda jaga kerahasiaannya dan hanya digunakan untuk operasi pertukaran token sisi server.)
Mengonfigurasi layar izin OAuth Anda
Saat aplikasi web Anda meminta akses ke data pengguna menggunakan cakupan OAuth 2.0, Google akan menampilkan layar izin yang memberi tahu pengguna aplikasi mana yang meminta akses, cakupan data yang diminta, dan persyaratan yang berlaku.
- Buka halaman Branding di bagian Google Auth Platform di Konsol Cloud.
- Jika diminta, pilih project yang Anda konfigurasi.
- Isi formulir branding (Nama aplikasi, Logo aplikasi, Email dukungan, Domain yang diizinkan, Link Halaman Beranda Aplikasi, dan Link Kebijakan Privasi), lalu klik Simpan.
- Buka halaman Akses Data untuk mengonfigurasi cakupan Google API yang diperlukan aplikasi Anda. Praktik terbaiknya adalah meminta cakupan secara bertahap, pada saat akses diperlukan, bukan di awal.
- Periksa Status Verifikasi Anda. Jika aplikasi Anda meminta cakupan sensitif atau dibatasi, kirimkan aplikasi Anda untuk verifikasi. Lihat Persyaratan verifikasi OAuth untuk mengetahui detailnya.
Kebijakan Keamanan Konten dan COOP
Jika aplikasi web Anda menerapkan Kebijakan Keamanan Konten (CSP), izinkan origin Google Identity Services berikut:
script-src:https://accounts.google.com/gsi/clientframe-src:https://accounts.google.com/gsi/connect-src:https://accounts.google.com/gsi/
Untuk alur otorisasi pop-up (initTokenClient atau initCodeClient dengan
ux_mode: 'popup'), konfigurasikan header respons HTTP Cross-Origin-Opener-Policy (COOP)
ke same-origin-allow-popups agar jendela dialog dapat
mengomunikasikan respons otorisasi kembali ke halaman Anda.
Langkah berikutnya
Selanjutnya, muat library klien di halaman web Anda untuk mulai melakukan inisialisasi klien otorisasi.