Login dengan Google dengan FedCM API

Panduan ini membahas dampak penghentian penggunaan cookie pihak ketiga di Google Library platform login. Topiknya meliputi Garis waktu dan Langkah Berikutnya untuk update yang kompatibel dengan versi lama library, cara Lakukan penilaian dampak dan pastikan bahwa login pengguna berlanjut berfungsi seperti yang diharapkan, dan jika diperlukan, petunjuk untuk memperbarui aplikasi web Anda. Opsi untuk Mengelola periode transisi beserta cara Mendapatkan bantuan juga tercakup.

Status library

Semua aplikasi web baru diblokir agar tidak menggunakan platform Login dengan Google yang tidak digunakan lagi library, sementara aplikasi yang menggunakan library ini dapat dilanjutkan hingga pemberitahuan lebih lanjut. J tanggal penghentian (penonaktifan) terakhir untuk perpustakaan belum ditetapkan. Lihat Penghentian dukungan dan penghentian untuk mengetahui informasi selengkapnya.

Pemblokiran cookie pihak ketiga di Privacy Sandbox Chrome memengaruhi aplikasi web yang menggunakan library platform Login dengan Google. Untuk mempertahankan perilaku yang ada, tanpa memerlukan penggunaan cookie pihak ketiga, update yang kompatibel dengan versi lama menambahkan FedCM API ke library ini. Meskipun sebagian besar perubahan berjalan mulus, Update memperkenalkan perbedaan pada dialog izin pengguna, iframe permissions-policy, dan Kebijakan Keamanan Konten (CSP). Perubahan ini mungkin memengaruhi aplikasi web Anda dan memerlukan perubahan pada kode aplikasi dan situs konfigurasi Anda.

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

Linimasa

Terakhir diperbarui Juli 2024

Berikut adalah tanggal dan perubahan yang memengaruhi perilaku login pengguna:

  • Maret 2023 Penghentian dukungan untuk platform Login dengan Google library.
  • Januari 2024 Chrome memblokir 1% cookie pihak ketiga, Login dengan Google library platform diberi pengecualian sementara dari cookie pihak ketiga pemblokiran melalui uji coba penghentian penggunaan.
  • Periode Transisi Juli 2024 dimulai, dan library platform Login dengan Google dukungan untuk API FedCM telah ditambahkan. Secara default, Google mengontrol persentase sebanyak mungkin permintaan login pengguna menggunakan FedCM selama waktu ini. Aplikasi web mungkin secara eksplisit mengganti perilaku ini dengan parameter use_fedcm.
  • Adopsi wajib (Tanggal akan ditentukan) FedCM API oleh Google Library platform login, setelah parameter use_fedcm diabaikan, dan semua permintaan login pengguna menggunakan FedCM.

Setelah beralih ke FedCM API, library platform Login dengan Google tidak lagi yang terpengaruh oleh pemblokiran cookie pihak ketiga. Untuk info terbaru tentang cookie pihak ketiga pemblokiran, lihat linimasa Privacy Sandbox Chrome.

Langkah berikutnya

Ada tiga opsi yang dapat Anda pilih untuk diikuti:

  1. Lakukan penilaian dampak, dan jika perlu, update aplikasi web Anda. Pendekatan ini mengevaluasi apakah fitur yang memerlukan perubahan pada aplikasi web Anda sedang digunakan. Petunjuknya akan diberikan di bagian selanjutnya dalam panduan ini.
  2. Pindahkan ke library Google Identity Services (GIS). Beralih ke versi terbaru dan library login yang didukung sangat direkomendasikan. Lakukan dengan mengikuti petunjuk ini.
  3. Tidak melakukan apa pun. Aplikasi web Anda akan otomatis diperbarui saat Library Login dengan Google dialihkan ke FedCM API untuk login pengguna. Ini adalah paling sedikit bekerja, tetapi ada beberapa risiko pengguna tidak dapat masuk ke aplikasi web Anda.

Melakukan penilaian dampak

Ikuti petunjuk ini untuk menentukan apakah aplikasi web Anda dapat diupdate dengan lancar pembaruan kompatibilitas mundur atau jika perubahan diperlukan untuk menghindari pengguna tidak dapat login saat library platform Login dengan Google sepenuhnya yang mengadopsi API FedCM.

Penyiapan

API browser dan versi terbaru library platform Login dengan Google yang diperlukan untuk menggunakan FedCM saat pengguna masuk.

Sebelum melangkah lebih jauh:

  • Update ke versi terbaru Chrome untuk Desktop. Chrome untuk Android memerlukan rilis M128 atau yang lebih baru dan tidak dapat diuji menggunakan versi yang lebih lama.

  • Buka chrome://flags dan tetapkan fitur berikut ke nilai ini:

    • #fedcm-authz Diaktifkan, jika situs Anda menggunakan Kebijakan Keamanan Konten yang memblokir https://accounts.google.com/gsi/ottoken.
    • #tracking-protection-3pcd Diaktifkan
    • #third-party-cookie-deprecation-trial Dinonaktifkan
    • #tpcd-metadata-grants Dinonaktifkan
    • #tpcd-heuristics-grants Dinonaktifkan

    dan luncurkan kembali Chrome.

  • Setel use_fedcm ke true saat menginisialisasi platform Login dengan Google perpustakaan 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 didownload langsung ke browser dengan menyertakan api.js, client.js, atau platform.js dalam tag <script src> (permintaan dapat menggunakan salah satu nama paket untuk library).

  • Konfirmasi setelan OAuth untuk client ID OAuth Anda:

    1. Buka halaman Credentials Google API Console

    2. Memverifikasi bahwa URI situs Anda disertakan dalam Asal JavaScript yang sah. URI berisi skema dan nama {i>host<i} 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 masalahnya seperti ini, pastikan URI pengalihan Anda disertakan dalam URI pengalihan yang diotorisasi. 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 Kebijakan Keamanan Konten diperlukan dengan memeriksa permintaan untuk library platform Login dengan Google. Untuk melakukannya, cari permintaan menggunakan nama dan asal library:

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

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

Periksa kebijakan izin iframe

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

Setelah mengikuti Menemukan permintaan library Login dengan Google pilih permintaan library Login dengan Google di DevTools Panel Network dan temukan header Sec-Fetch-Site di Bagian Header Permintaan di tab Header. Jika nilai header adalah:

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

Untuk mengonfirmasi apakah iframe tersedia:

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

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

Ulangi proses ini untuk setiap iframe dalam dokumen. iframe bisa disarangkan, jadi pastikan Anda menambahkan perintah allow ke semua iframe induk di sekitarnya.

Periksa Kebijakan Keamanan Konten

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

Setelah mengikuti Menemukan permintaan library Login dengan Google pilih permintaan library Login dengan Google di DevTools Panel Network dan temukan header Content-Security-Policy di Bagian Header Respons di tab Header.

Jika header tidak ditemukan, perubahan tidak diperlukan. Atau, periksa apakah ada direktif CSP ini ditentukan dalam header CSP dan memperbaruinya dengan:

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

  • Menambahkan https://apis.google.com/js/bundle-name.js ke script-src direktif. Ganti bundle-name.js dengan api.js, client.js, atau platform.jsberdasarkan library yang memaketkan permintaan 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 memastikan bahwa konten yang mendasari dapat ditempatkan dengan aman dan terhalang oleh dialog modal browser untuk sementara. Jika ini mungkin Anda perlu menyesuaikan tata letak atau posisi beberapa elemen situs Anda.

Aktivasi pengguna

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

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

Sekarang, jika pengguna pernah masuk ke situs web Anda sebelumnya, Anda dapat memperoleh informasi login pengguna saat menginisialisasi library Login dengan Google menggunakan gapi.auth2.init, tanpa interaksi pengguna lebih lanjut.

Karena Penghentian Penggunaan Cookie Pihak Ketiga, hal ini tidak dapat lagi dilakukan kecuali pertama kali melalui alur masuk FedCM setidaknya satu kali.

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

Kasus penggunaan umum

Dokumentasi developer untuk library Login dengan Google mencakup panduan dan kode contoh untuk kasus penggunaan umum. Bagian ini membahas bagaimana FedCM memengaruhi perilaku model.

  • Mengintegrasikan Login dengan Google ke dalam aplikasi web

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

    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 khusus digunakan untuk mengontrol tampilan tombol login, dan bagi pengguna yang sudah login, peristiwa halaman onload menampilkan kredensial pengguna. Diperlukan interaksi pengguna 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, akan memanggil auth2.signIn.

    Di demo dua, elemen <div>, gaya CSS, dan grafis kustom digunakan untuk mengontrol tampilan tombol login. Interaksi pengguna adalah wajib login dan membuat sesi baru.

    Inisialisasi library dilakukan saat pemuatan dokumen menggunakan fungsi mulai 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 di 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 memanggil gapi.load secara langsung, gapi.auth2.init, dan gapi.auth2.attachClickHandler() setelahnya platform.js dimuat menggunakan script src.

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

  • Meminta izin tambahan

    Dalam demo ini, penekanan tombol digunakan untuk meminta OAuth 2.0 tambahan mendapatkan token akses baru, dan untuk pengguna yang sudah masuk, peristiwa halaman onload menampilkan kredensial pengguna. Interaksi pengguna wajib diisi 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 menampilkan kredensial pengguna. Diperlukan interaksi pengguna untuk login dan membuat sesi baru.

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

    Gestur pengguna, peristiwa onclick elemen <div>, memanggil auth2.signIn menggunakan auth2.attachClickHandler selama login atau auth2.signOut di 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 backend server untuk verifikasi.

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

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

  • SSO lintas platform

    FedCM memerlukan izin untuk setiap instance browser, meskipun pengguna Android sudah masuk, diperlukan persetujuan satu kali.

Mengelola periode transisi

Selama periode transisi, persentase login pengguna mungkin menggunakan FedCM, persentase tepatnya dapat bervariasi dan dapat berubah dari waktu ke waktu. Secara default, Google mengontrol berapa banyak permintaan login yang menggunakan FedCM, tetapi Anda dapat memilih untuk ikut serta atau tidak ikut serta menggunakan FedCM selama periode transisi. Pada akhir masa transisi FedCM menjadi wajib dan digunakan untuk semua permintaan login.

Dengan memilih ikut serta, pengguna akan diarahkan melalui alur login FedCM, sembari memilih memilih tidak ikut akan mengirim pengguna melalui alur login yang sudah ada. Perilaku ini dikontrol menggunakan parameter use_fedcm.

Ikut serta

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

Memilih tidak ikut

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

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