Chrome 116 menghadirkan kemampuan FedCM seperti Login Hint API, User Info API, dan RP Context API, serta memulai uji coba origin untuk IdP Sign-In Status API.
Di Chrome 116, Chrome mengirimkan tiga fitur Pengelolaan Kredensial Federasi (FedCM) baru berikut:
- Login Hint API: Menentukan akun pengguna pilihan untuk login.
- User Info API: Ambil informasi pengguna yang kembali sehingga penyedia identitas (IdP) dapat merender tombol login yang dipersonalisasi dalam iframe.
- RP Context API: Gunakan judul yang berbeda dengan 'Login' di dialog FedCM.
Selain itu, Chrome memulai uji coba origin untuk IdP Sign-In Status API. IdP Sign-in Status API adalah persyaratan dan akan menjadi perubahan yang dapat menyebabkan gangguan saat dikirimkan. Jika Anda sudah memiliki implementasi FedCM, pastikan untuk berpartisipasi dalam uji coba origin.
API Petunjuk Login
Saat FedCM dipanggil, browser akan menampilkan akun yang digunakan untuk login dari Penyedia Identitas (IdP) yang ditentukan. IdP yang mendukung beberapa akun akan mencantumkan semua akun yang digunakan untuk login.
![Dialog FedCM yang menampilkan beberapa akun pengguna.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-showing-mu-e3714b87b4d94.png?authuser=7&hl=id)
Setelah pengguna login, terkadang pihak tepercaya (RP) akan meminta pengguna untuk melakukan autentikasi ulang. Namun pengguna mungkin tidak yakin akun mana yang mereka gunakan. Jika RP dapat menentukan akun yang akan digunakan untuk login, pengguna akan lebih mudah memilih akun. Petunjuk login adalah pengiriman di Chrome 116 dan dengan pengiriman tersebut, RP dapat mempersempit daftar menjadi satu.
Ekstensi ini menambahkan array login_hints
dalam respons endpoint
daftar akun dari
IdP, dengan semua kemungkinan jenis filter yang didukung IdP. Misalnya, respons akun dapat terlihat seperti ini saat IdP mendukung pemfilteran berdasarkan email
dan ID:
{
"accounts": [{
"id": "demo1",
"email": "demo1@example.com",
"name": "John Doe",
"login_hints": ["demo1", "demo1@example.com"],
...
}, {
"id": "demo2",
"email": "demo2@example.com",
"name": "Jane Doe",
"login_hints": ["demo2", "demo2@example.com"],
...
}, ...]
}
Dengan meneruskan login_hints
dalam daftar akun, RP dapat memanggil navigator.credentials.get()
dengan properti loginHint
seperti yang ditunjukkan pada contoh kode berikut untuk menampilkan akun yang ditentukan secara selektif:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/manifest.json",
clientId: "123",
nonce: nonce,
loginHint : "demo1@example.com"
}]
}
});
API Info Pengguna
Tombol login yang dihiasi logo IdP yang memungkinkan pengguna login dengan penggabungan identitas kini menjadi hal yang umum. Namun, mendekorasi tombol menggunakan ikon profil pengguna dan informasi mereka bahkan lebih intuitif untuk digunakan untuk login, terutama jika pengguna telah mendaftar di situs ini dengan IdP sebelumnya.
![Tombol Login dengan Google.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/sign-with-google-button-d34d0cc6c6301.png?authuser=7&hl=id)
![Tombol Login dengan Google yang Dipersonalisasi.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/personalized-sign-with-g-45331497ab21b.png?authuser=7&hl=id)
Tantangannya adalah, karena tombol yang dipersonalisasi bergantung pada cookie pihak ketiga di domain IdP dalam iframe untuk mengidentifikasi pengguna yang login guna merender tombol, tombol tersebut tidak akan tersedia setelah cookie pihak ketiga tidak digunakan lagi.
User Info API, yang dikirimkan di Chrome 116, memberikan cara bagi IdP untuk mendapatkan informasi pengguna yang kembali dari server tanpa bergantung pada cookie pihak ketiga.
API diharapkan dipanggil oleh IdP dari dalam iframe yang disematkan di situs RP sehingga dapat mengambil informasi pengguna dan merender tombol yang dipersonalisasi seolah-olah merupakan bagian dari platform RP. Dengan panggilan API, browser membuat permintaan ke endpoint daftar akun, lalu menampilkan array informasi pengguna jika:
- Pengguna telah login ke RP dengan IdP melalui FedCM sebelumnya pada instance browser yang sama dan data belum dihapus.
- Pengguna login ke IdP di instance browser yang sama.
// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
configUrl: "https://idp.example/fedcm.json",
clientId: "client1234"
});
// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
// Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
const name = user_info[0].name;
const given_name = user_info[0].given_name;
const display_name = given_name ? given_name : name;
const picture = user_info[0].picture;
const email = user_info[0].email;
// Renders the personalized sign-in button with the information above.
}
Perlu diperhatikan bahwa untuk mengizinkan pemanggilan IdentityProvider.getUserInfo()
dari dalam
iframe yang memiliki origin yang sama dengan IdP, HTML sematan harus
mengizinkannya secara eksplisit
dengan kebijakan
izin identity-credentials-get
.
<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>
Anda dapat melihat cara kerjanya di https://fedcm-rp-demo.glitch.me/button.
API Konteks RP
RP Context API, yang disertakan di Chrome 116, memungkinkan RP mengubah string dalam UI dialog FedCM sehingga dapat mengakomodasi konteks autentikasi yang telah ditetapkan. Lihat screenshot berikut untuk mengetahui opsi yang berbeda:
![Dialog FedCM dirender dengan](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-fe1a06336087f.png?authuser=7&hl=id)
![Dialog FedCM dirender dengan](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-06a2fc27f97ad.png?authuser=7&hl=id)
![Dialog FedCM dirender dengan](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-c-5d3bb7d44dd6a.png?authuser=7&hl=id)
![Dialog FedCM dirender dengan](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-u-efb6bbffb812.png?authuser=7&hl=id)
Penggunaan sederhana; berikan properti identity.context
salah satu dari "signin"
(default), "signup"
, "use"
, atau "continue"
.
const credential = await navigator.credentials.get({
identity: {
// "signin" is the default, "signup", "use" and "continue"
// can also be used
context: "signup",
providers: [{
configURL: "https://idp.example/fedcm.json",
clientId: "1234",
}],
}
});
Uji coba origin API Status Login IdP
Chrome memulai uji coba origin IdP Sign-In Status API di desktop dari Chrome 116, diikuti dengan Android Chrome nanti. Uji coba asal memberi Anda akses ke fitur baru atau eksperimental untuk membuat fungsi yang dapat dicoba oleh pengguna dalam waktu terbatas sebelum fitur tersebut tersedia untuk semua orang.
IdP Sign-In Status API adalah mekanisme yang digunakan IdP untuk memberi tahu browser tentang status login pengguna pada IdP. Dengan API ini, browser dapat mengurangi permintaan yang tidak perlu ke IdP dan memitigasi potensi serangan pengaturan waktu.
Memberi tahu browser tentang status login pengguna
IdP dapat memberikan sinyal status login pengguna ke browser dengan mengirimkan header HTTP atau dengan memanggil JavaScript API, saat pengguna login di IdP, atau saat pengguna logout dari semua akun IdP-nya. Browser mencatat status sebagai salah satu dari yang berikut: "sign-in", "sign-out", atau "unknown" (default).
Untuk menandakan bahwa pengguna sudah login, kirim header HTTP IdP-SignIn-Status: action=signin
dalam navigasi level atas atau permintaan subresource origin yang sama:
IdP-SignIn-Status: action=signin
Atau, panggil JavaScript API IdentityProvider.login()
dari origin
IdP:
IdentityProvider.login()
Setelan ini akan mencatat status login pengguna sebagai "login". Jika status login pengguna disetel ke "login", FedCM yang memanggil PR akan membuat permintaan ke endpoint daftar akun IdP dan menampilkan akun yang tersedia kepada pengguna dalam dialog FedCM.
Untuk menandakan bahwa pengguna logout dari semua akunnya, kirim
header HTTP IdP-SignIn-Status: action=signout-all
dalam navigasi level atas atau
permintaan subresource origin yang sama:
IdP-SignIn-Status: action=signout-all
Atau, panggil JavaScript API IdentityProvider.logout()
dari origin
IdP:
IdentityProvider.logout()
Kedua tindakan tersebut akan mencatat status login pengguna sebagai "logout". Jika status login pengguna adalah "logout", pemanggilan FedCM akan otomatis gagal tanpa membuat permintaan ke endpoint daftar akun IdP.
Secara default, status login IdP disetel ke "tidak diketahui". Status ini digunakan sebelum IdP mengirim sinyal menggunakan API Status Login IdP. Kami memperkenalkan status ini untuk transisi yang lebih baik karena pengguna mungkin sudah login ke IdP saat kami mengirimkan API ini dan IdP mungkin tidak memiliki kesempatan untuk memberikan sinyal ini ke browser pada saat FedCM pertama kali dipanggil. Dalam kasus ini, kita akan membuat permintaan ke endpoint daftar akun IdP dan memperbarui status berdasarkan respons dari endpoint daftar akun:
- Jika endpoint menampilkan daftar akun aktif, perbarui status menjadi "login" dan buka dialog FedCM untuk menampilkan akun tersebut.
- Jika endpoint tidak menampilkan akun, perbarui status menjadi "log-out" dan gagal panggilan FedCM.
Bagaimana jika sesi pengguna berakhir? Izinkan pengguna login melalui alur login dinamis
Meskipun IdP terus memberi tahu browser tentang status login pengguna, IdP mungkin tidak sinkron, seperti saat sesi berakhir. Browser mencoba mengirim permintaan berkredensial ke endpoint daftar akun jika status login adalah "login", tetapi server menolaknya karena sesi sudah tidak tersedia lagi. Dalam skenario semacam ini, browser dapat secara dinamis mengizinkan pengguna login ke IdP melalui jendela pop-up.
Dialog FedCM akan menampilkan pesan, seperti yang ditunjukkan dalam gambar berikut:
![Dialog FedCM yang menyarankan untuk login ke IdP.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-suggesting-b9179c79f722d.png?authuser=7&hl=id)
Dengan mengklik tombol Continue, browser akan membuka jendela pop-up yang mengirim pengguna ke halaman login IdP.
![Jendela pop-up akan ditampilkan setelah mengklik tombol login ke IdP.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-popup-window-shown-cli-0520929770807.png?authuser=7&hl=id)
URL halaman login (yang harus berupa asal IdP) dapat ditentukan dengan signin_url
sebagai bagian dari file konfigurasi
IdP.
{
"accounts_endpoint": "/auth/accounts",
"client_metadata_endpoint": "/auth/metadata",
"id_assertion_endpoint": "/auth/idtokens",
"signin_url": "/signin"
}
}
Jendela pop-up adalah jendela browser biasa yang menggunakan cookie pihak pertama. Apa pun yang terjadi dalam jendela konten bergantung pada IdP, tetapi tidak ada handle jendela yang tersedia untuk membuat permintaan komunikasi lintas origin ke halaman RP. Setelah pengguna login, IdP akan:
- Kirim header
IdP-SignIn-Status: action=signin
atau panggilIdentityProvider.login()
API untuk memberi tahu browser bahwa pengguna telah login. - Panggil
IdentityProvider.close()
untuk menutup sendiri (jendela pop-up).
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
// Signal to the browser that the user has signed in.
IdentityProvider.close();
}
Anda dapat mencoba perilaku Sign-In Status API IdP di demo kami. Sesi akan berakhir dalam tiga menit setelah Anda login ke IdP demo. Kemudian, Anda dapat mengamati proses login ke IdP melalui perilaku jendela pop-up.
Berpartisipasi dalam uji coba origin
Anda dapat mencoba IdP Sign-In Status API secara lokal dengan mengaktifkan tanda
Chrome
chrome://flags#fedcm-idp-signin-status-api
di
Chrome 116 atau yang lebih baru.
Anda juga dapat mengaktifkan IdP Sign-In Status API dengan mendaftarkan uji coba origin dua kali:
- Daftarkan uji coba origin untuk IdP.
- Daftarkan uji coba origin pihak ketiga untuk RP.
Uji coba origin memungkinkan Anda mencoba fitur baru dan memberikan masukan tentang kegunaan, kepraktisan, dan efektivitas fitur tersebut kepada komunitas standar web. Untuk informasi selengkapnya, lihat Panduan Uji Coba Origin untuk Developer Web.
Uji coba origin API Status Login IdP tersedia dari Chrome 116 hingga Chrome 119.
Mendaftarkan uji coba origin untuk IdP
- Buka halaman pendaftaran uji coba origin.
- Klik tombol Register dan isi formulir untuk meminta token.
- Masukkan origin IdP sebagai Web Origin.
- Klik Submit.
- Tambahkan tag
origin-trial
<meta>
ke bagian atas halaman yang menggunakanIdentityProvider.close()
. Misalnya, hal ini mungkin terlihat seperti:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
.
Mendaftarkan uji coba origin pihak ketiga untuk RP
- Buka halaman pendaftaran uji coba origin.
- Klik tombol Register dan isi formulir untuk meminta token.
- Masukkan origin IdP sebagai Web Origin.
- Centang Pencocokan pihak ketiga untuk memasukkan token dengan JavaScript di origin lain.
- Klik Submit.
- Sematkan token yang diterbitkan di situs pihak ketiga.
Untuk menyematkan token di situs pihak ketiga, tambahkan kode berikut ke library JavaScript atau SDK yang disalurkan dari asal IdP.
const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);
Ganti TOKEN_GOES_HERE
dengan token Anda sendiri.
Berinteraksi dan memberikan masukan
Jika memiliki masukan atau mengalami masalah selama pengujian, Anda dapat menyampaikannya di crbug.com.
Foto oleh Dan Cristian Pădure audiens di Unsplash