Login dengan Google dengan FedCM API

Panduan ini membahas penerapan FedCM API oleh library platform Login Google. Topiknya mencakup Linimasa dan Langkah Berikutnya untuk update yang kompatibel dengan versi lama pada library, cara Melakukan penilaian dampak dan memverifikasi login pengguna agar terus berfungsi seperti yang diharapkan, dan jika diperlukan, petunjuk untuk mengupdate aplikasi web Anda. Opsi untuk Mengelola periode transisi beserta cara Mendapatkan bantuan juga dibahas.

Status library

Semua aplikasi web baru diblokir agar tidak menggunakan library platform Login dengan Google yang tidak digunakan lagi, sedangkan aplikasi yang menggunakan library tersebut dapat terus digunakan hingga pemberitahuan lebih lanjut. Tanggal penghentian akhir (penonaktifan) untuk library belum ditetapkan. Lihat Penghentian dukungan dan penghentian penggunaan untuk mengetahui informasi selengkapnya.

Update yang kompatibel dengan versi lama menambahkan FedCM API ke library Login dengan Google. Meskipun sebagian besar perubahannya lancar, update ini memperkenalkan perbedaan pada perintah pengguna, kebijakan izin iframe, dan Kebijakan Keamanan Konten (CSP). Perubahan ini dapat memengaruhi aplikasi web Anda dan memerlukan perubahan pada kode aplikasi dan konfigurasi situs.

Selama periode transisi, opsi konfigurasi mengontrol apakah FedCM API digunakan atau tidak selama login pengguna.

Setelah periode transisi, FedCM API diwajibkan untuk semua aplikasi web yang menggunakan library Login dengan Google.

Linimasa

Terakhir diperbarui September 2024

Berikut adalah tanggal dan perubahan yang memengaruhi perilaku login pengguna:

  • Maret 2023 Penghentian dukungan untuk library platform Login Google.
  • Periode Transisi Juli 2024 dimulai, dan dukungan library platform Login Google untuk FedCM API ditambahkan. Secara default, Google mengontrol persentase permintaan login pengguna menggunakan FedCM selama waktu ini. Aplikasi web dapat mengganti perilaku ini secara eksplisit dengan parameter use_fedcm.
  • Penggunaan Wajib FedCM API pada Maret 2025 oleh library platform Login dengan Google, setelah itu parameter use_fedcm akan diabaikan, dan semua permintaan login pengguna akan menggunakan FedCM.

Langkah berikutnya

Ada tiga opsi yang dapat Anda pilih untuk diikuti:

  1. Lakukan penilaian dampak, dan jika perlu, perbarui aplikasi web Anda. Pendekatan ini mengevaluasi apakah fitur yang memerlukan perubahan pada aplikasi web Anda sedang digunakan. Petunjuknya diberikan di bagian berikutnya dalam panduan ini.
  2. Berpindah ke library Google Identity Services (GIS). Sebaiknya beralih ke library login terbaru dan yang didukung. Lakukan hal ini dengan mengikuti petunjuk ini.
  3. Tidak melakukan apa pun. Aplikasi web Anda akan otomatis diupdate saat library Login dengan Google berpindah ke FedCM API untuk login pengguna. Ini adalah pekerjaan yang paling mudah, tetapi ada beberapa risiko pengguna tidak dapat login ke aplikasi web Anda.

Melakukan penilaian dampak

Ikuti petunjuk ini untuk menentukan apakah aplikasi web Anda dapat diupdate dengan lancar melalui update yang kompatibel dengan versi sebelumnya atau apakah perubahan diperlukan untuk menghindari pengguna yang tidak dapat login saat library platform Login dengan Google sepenuhnya menggunakan FedCM API.

Penyiapan

API browser dan library platform Login dengan Google versi terbaru diperlukan untuk menggunakan FedCM selama login pengguna.

Sebelum melanjutkan:

  • Update ke Chrome versi terbaru untuk Desktop. Chrome untuk Android memerlukan rilis M128 atau yang lebih baru dan tidak dapat diuji menggunakan versi sebelumnya.
  • Tetapkan use_fedcm ke true saat melakukan inisialisasi library platform Login dengan Google di aplikasi web Anda. Biasanya, inisialisasi terlihat seperti:
    • gapi.client.init({use_fedcm: true}), atau
    • gapi.auth2.init({use_fedcm: true}), atau
    • gapi.auth2.authorize({use_fedcm: true}).
  • Membatalkan validasi versi library platform Login dengan Google yang di-cache. Biasanya langkah ini tidak diperlukan karena versi terbaru library langsung didownload ke browser dengan menyertakan api.js, client.js, atau platform.js dalam tag <script src> (permintaan dapat menggunakan salah satu nama paket ini untuk library).

  • Konfirmasi setelan OAuth untuk client ID OAuth Anda:

    1. Buka halaman Credentials di

    2. Verifikasi bahwa URI situs Anda disertakan dalam Asal JavaScript resmi. URI hanya menyertakan skema dan nama host yang sepenuhnya memenuhi syarat. Misalnya, https://www.example.com.

    3. Secara opsional, kredensial dapat ditampilkan menggunakan pengalihan ke endpoint yang Anda host, bukan melalui callback JavaScript. Jika demikian, verifikasi URI pengalihan Anda disertakan dalam URI pengalihan yang sah. URI pengalihan mencakup skema, nama host yang sepenuhnya memenuhi syarat, dan jalur, dan harus mematuhi Aturan validasi URI pengalihan. Contohnya, https://www.example.com/auth-receiver.

Pengujian

Setelah mengikuti petunjuk di Penyiapan:

Menemukan permintaan library Login dengan Google

Periksa apakah perubahan permissions-policy dan Content Security Policy diperlukan dengan memeriksa permintaan untuk library platform Login dengan Google. Untuk melakukannya, temukan permintaan menggunakan nama dan asal library:

  • Di Chrome, buka panel Jaringan DevTools, lalu muat ulang halaman.
  • Gunakan nilai di kolom Domain dan Name untuk menemukan permintaan library:
    • Domain adalah apis.google.com dan
    • Nama adalah api.js, client.js, atau platform.js. Nilai tertentu dari Nama bergantung pada paket library yang diminta oleh dokumen.

Misalnya, filter apis.google.com di kolom Domain dan platform.js di kolom Name.

Memeriksa kebijakan izin iframe

Situs Anda mungkin menggunakan library platform Login dengan Google di dalam iframe lintas origin. Jika demikian, update diperlukan.

Setelah mengikuti petunjuk Menemukan permintaan library Login dengan Google, pilih permintaan library Login dengan Google di panel Jaringan DevTools dan temukan header Sec-Fetch-Site di bagian Header Permintaan di tab Header. Jika nilai header adalah:

  • same-siteatau same-origin, kebijakan lintas-asal tidak berlaku dan tidak diperlukan perubahan.
  • Perubahan cross-origin mungkin diperlukan jika iframe sedang digunakan.

Untuk mengonfirmasi apakah iframe ada:

  • Pilih panel Elemen di Chrome DevTools, dan
  • Gunakan Ctrl-F untuk menemukan iframe dalam dokumen.

Jika iframe ditemukan, periksa dokumen untuk memeriksa panggilan ke fungsi gapi.auth2 atau perintah script src yang memuat library Login dengan Google dalam iframe. Jika demikian:

Ulangi proses ini untuk setiap iframe dalam dokumen. iframe dapat disusun bertingkat, jadi pastikan untuk menambahkan perintah izin ke semua iframe induk di sekitarnya.

Memeriksa Kebijakan Keamanan Konten

Jika situs Anda menggunakan Kebijakan Keamanan Konten, Anda mungkin perlu memperbarui CSP untuk mengizinkan penggunaan library Login dengan Google.

Setelah mengikuti petunjuk Menemukan permintaan library Login dengan Google, pilih permintaan library Login dengan Google di panel Jaringan DevTools dan temukan header Content-Security-Policy di bagian Header Respons pada tab Header.

Jika header tidak ditemukan, tidak ada perubahan yang diperlukan. Jika tidak, periksa apakah ada perintah CSP ini yang ditentukan di header CSP dan perbarui dengan:

  • Menambahkan https://apis.google.com/js/, https://accounts.google.com/gsi/, dan https://acounts.google.com/o/fedcm/ ke perintah connect-src, default-src, atau frame-src.

  • Menambahkan https://apis.google.com/js/bundle-name.js ke perintah script-src. Ganti bundle-name.js dengan api.js, client.js, atau platform.jsberdasarkan paket library yang diminta dokumen.

Memeriksa perubahan perintah pengguna

Ada beberapa perbedaan pada perilaku perintah pengguna, FedCM menambahkan dialog modal yang ditampilkan oleh browser dan memperbarui persyaratan aktivasi pengguna.

Gambar dialog modal FedCM

Periksa tata letak situs Anda untuk mengonfirmasi bahwa konten pokok dapat ditumpangkan dengan aman dan dikaburkan untuk sementara oleh dialog modal browser. Jika tidak, Anda mungkin perlu menyesuaikan tata letak atau posisi beberapa elemen situs Anda.

Pengguna diaktifkan

FedCM menyertakan persyaratan aktivasi pengguna yang diperbarui. Menekan tombol atau mengklik link adalah contoh gestur pengguna yang memungkinkan origin pihak ketiga membuat permintaan jaringan atau menyimpan data. Dengan FedCM, browser akan meminta izin pengguna saat:

  • pengguna pertama kali login ke aplikasi web menggunakan instance browser baru, atau
  • GoogleAuth.signIn dipanggil.

Saat ini, jika pengguna telah login ke situs Anda sebelumnya, Anda dapat memperoleh informasi login pengguna saat melakukan inisialisasi library Login dengan Google menggunakan gapi.auth2.init, tanpa interaksi pengguna lebih lanjut. Hal ini tidak lagi mungkin kecuali jika pengguna telah terlebih dahulu melalui alur login FedCM setidaknya sekali.

Dengan memilih ikut serta dalam FedCM dan memanggil GoogleAuth.signIn, saat berikutnya pengguna yang sama mengunjungi situs Anda, gapi.auth2.init dapat memperoleh informasi login pengguna selama inisialisasi tanpa interaksi pengguna.

Kasus penggunaan umum

Dokumentasi developer untuk library Login dengan Google menyertakan panduan dan contoh kode untuk kasus penggunaan umum. Bagian ini membahas pengaruh FedCM terhadap perilakunya.

  • Mengintegrasikan Login dengan Google ke dalam aplikasi web Anda

    Dalam demo ini, elemen <div> dan class merender tombol, dan untuk pengguna yang sudah login, peristiwa onload halaman akan menampilkan kredensial pengguna. Interaksi pengguna diperlukan untuk login dan membuat sesi baru.

    Inisialisasi library dilakukan oleh class g-signin2 yang memanggil gapi.load dan gapi.auth2.init.

    Gestur pengguna, peristiwa onclick elemen <div>, memanggil auth2.signIn selama login atau auth2.signOut saat logout.

  • Membuat tombol Login dengan Google kustom

    Di demo satu, atribut kustom digunakan untuk mengontrol tampilan tombol login dan untuk pengguna yang sudah login, peristiwa onload halaman akan menampilkan kredensial pengguna. Interaksi pengguna diperlukan untuk login dan membuat sesi baru.

    Inisialisasi library dilakukan melalui peristiwa onload untuk library platform.js dan tombol ditampilkan oleh gapi.signin2.render.

    Gestur pengguna, menekan tombol login, memanggil auth2.signIn.

    Dalam demo kedua, elemen <div>, gaya CSS, dan grafis kustom digunakan untuk mengontrol tampilan tombol login. Interaksi pengguna diperlukan untuk login dan membuat sesi baru.

    Inisialisasi library dilakukan saat dokumen dimuat menggunakan fungsi awal yang memanggil gapi.load, gapi.auth2.init, dan gapi.auth2.attachClickHandler.

    Gestur pengguna, peristiwa onclick elemen <div>, memanggil auth2.signIn menggunakan auth2.attachClickHandler selama login atau auth2.signOut saat logout.

  • Memantau status sesi pengguna

    Dalam demo ini, penekanan tombol digunakan untuk login dan logout pengguna. Interaksi pengguna diperlukan untuk login dan membuat sesi baru.

    Inisialisasi library dilakukan dengan langsung memanggil gapi.load, gapi.auth2.init, dan gapi.auth2.attachClickHandler() setelah platform.js dimuat menggunakan script src.

    Gestur pengguna, peristiwa onclick elemen <div>, memanggil auth2.signIn menggunakan auth2.attachClickHandler selama login atau auth2.signOut saat logout.

  • Meminta izin tambahan

    Dalam demo ini, penekanan tombol digunakan untuk meminta cakupan OAuth 2.0 tambahan, mendapatkan token akses baru, dan untuk pengguna yang sudah login, peristiwa onload halaman akan menampilkan kredensial pengguna. Interaksi pengguna diperlukan untuk login dan membuat sesi baru.

    Inisialisasi library dilakukan oleh peristiwa onload untuk library platform.js melalui panggilan ke gapi.signin2.render.

    Gestur pengguna, mengklik elemen <button>, memicu permintaan untuk cakupan OAuth 2.0 tambahan menggunakan googleUser.grant atau auth2.signOut saat logout.

  • Mengintegrasikan Login dengan Google menggunakan pemroses

    Dalam demo ini, untuk pengguna yang sudah login, peristiwa onload halaman akan menampilkan kredensial pengguna. Interaksi pengguna diperlukan untuk login dan membuat sesi baru.

    Inisialisasi library dilakukan saat dokumen dimuat menggunakan fungsi awal yang memanggil gapi.load, gapi.auth2.init, dan gapi.auth2.attachClickHandler. Selanjutnya, auth2.isSignedIn.listen dan auth2.currentUser.listen digunakan untuk menyiapkan notifikasi perubahan pada status sesi. Terakhir, auth2.SignIn dipanggil untuk menampilkan kredensial bagi pengguna yang login.

    Gestur pengguna, peristiwa onclick elemen <div>, memanggil auth2.signIn menggunakan auth2.attachClickHandler selama login atau auth2.signOut saat logout.

  • Login dengan Google untuk aplikasi sisi server

    Dalam demo ini, gestur pengguna digunakan untuk meminta kode autentikasi OAuth 2.0 dan callback JS membuat panggilan AJAX untuk mengirim respons ke server backend untuk verifikasi.

    Inisialisasi library dilakukan menggunakan peristiwa onload untuk library platform.js, yang menggunakan fungsi awal untuk memanggil gapi.load dan gapi.auth2.init.

    Gestur pengguna, yang mengklik elemen <button>, memicu permintaan kode otorisasi dengan memanggil auth2.grantOfflineAccess.

  • SSO lintas platform

    FedCM memerlukan izin untuk setiap instance browser, meskipun pengguna Android telah login, izin satu kali diperlukan.

Mengelola periode transisi

Selama periode transisi, persentase login pengguna dapat menggunakan FedCM, persentase pastinya dapat bervariasi dan dapat berubah seiring waktu. Secara default, Google mengontrol jumlah permintaan login yang menggunakan FedCM, tetapi Anda dapat memilih untuk ikut serta atau tidak ikut serta menggunakan FedCM selama periode transisi. Pada akhir periode transisi, FedCM menjadi wajib dan digunakan untuk semua permintaan login.

Memilih untuk ikut serta akan mengarahkan pengguna melalui alur login FedCM, sedangkan memilih untuk tidak ikut akan mengarahkan pengguna melalui alur login yang ada. Perilaku ini dikontrol menggunakan parameter use_fedcm.

Ikut serta

Sebaiknya kontrol apakah semua, atau beberapa, upaya login ke situs Anda menggunakan FedCM API. Untuk melakukannya, tetapkan use_fedcm ke true saat melakukan inisialisasi library platform. Dalam hal ini, permintaan login pengguna menggunakan FedCM API.

Memilih tidak ikut

Selama periode transisi, persentase upaya login pengguna ke situs Anda akan menggunakan FedCM API secara default. Jika memerlukan lebih banyak waktu untuk melakukan perubahan pada aplikasi, Anda dapat memilih untuk tidak menggunakan FedCM API untuk sementara. Untuk melakukannya, tetapkan use_fedcm ke false saat melakukan inisialisasi library platform. Permintaan login pengguna dalam hal ini tidak akan menggunakan FedCM API.

Setelah penerapan wajib terjadi, setelan use_fedcm apa pun akan diabaikan oleh library platform Login dengan Google.

Dapatkan bantuan

Telusuri atau ajukan pertanyaan di StackOverflow menggunakan tag google-signin.