Mulai Chrome 125, Button Mode API akan memulai uji coba origin di desktop. Dengan Button Mode API, penyedia identitas dapat menggunakan FedCM API meskipun pengguna mereka tidak memiliki sesi IdP yang aktif setelah panggilan API. Pengguna kemudian dapat login ke situs dengan akun gabungan mereka tanpa membuka situs IdP. UI FedCM dalam mode tombol lebih terlihat dibandingkan dengan yang ada dari alur widget yang ada karena dibatasi oleh pengguna {i>gesture <i}dan lebih mencerminkan maksud pengguna untuk {i>login<i}.
API Mode Tombol
Antarmuka pengguna FedCM tersedia sebagai widget yang ditampilkan di kanan atas pojok di desktop, atau sebagai sheet bawah di seluler, segera setelah API dipanggil yang bisa terjadi saat pengguna tiba di {i>relying party<i} (RP). Hal ini disebut widget. Untuk menampilkan widget, pengguna harus login ke IdP sebelum mereka menyelesaikan RP. FedCM sendiri tidak memiliki cara yang bisa diandalkan untuk pengguna login ke IdP sebelum mereka dapat mengizinkan pengguna login ke RP menggunakan akun yang tersedia di IdP. FedCM akan menambahkan cara untuk melakukan ini.
![Dengan mode widget, dialog ditampilkan di pojok kanan atas Chrome desktop tanpa aktivasi pengguna.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-widget-mode.jpg?authuser=6&hl=id)
Button Mode API baru menambahkan mode UI baru yang disebut mode button. Tidak seperti mode widget, mode tombol tidak dimaksudkan untuk dipanggil segera setelah pengguna membuka RP. Aplikasi ini dimaksudkan untuk dipanggil saat pengguna memulai alur login seperti menekan tombol "Login dengan IdP" tombol.
Segera setelah tombol ditekan, FedCM akan memeriksa apakah pengguna
IdP melalui pengambilan ke akun
endpoint atau
status login yang disimpan ke
web. Jika
pengguna belum login, FedCM meminta pengguna login ke IdP menggunakan
login_url
yang disediakan oleh IdP melalui jendela pop-up. Jika browser tahu bahwa pengguna
sudah login ke IdP atau segera setelah pengguna login ke IdP dengan
jendela pop-up, FedCM akan membuka dialog modal bagi pengguna untuk memilih IdP
yang digunakan untuk login. Dengan memilih akun, pengguna dapat melanjutkan untuk login
ke RP menggunakan akun IdP.
Dalam UI mode tombol, dialog login yang ditampilkan lebih besar dibandingkan dengan dan ikon branding untuk mempertahankan konsistensi visual. Meskipun ukuran ikon minimum untuk mode widget adalah 25x25 piksel, ukuran minimum untuk ikon dalam mode tombol adalah 40x40px. ID populer file memungkinkan menentukan beberapa URL ikon sebagai berikut:
{
// ... Other settings (like endpoints) here
"branding": {
"icons": [
{
"url": "https://size-25px-image",
"size": 25,
},
{
"url": "https://size-40px-image",
"size": 40
}
]
}
}
![Dengan mode tombol, dialog modal ditampilkan di bagian tengah atas Chrome desktop.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-button-mode.jpg?authuser=6&hl=id)
Coba sendiri menggunakan Chrome 125 di https://fedcm-rp-demo.glitch.me/button_flow.
Untuk menggunakan Button Mode API:
- Aktifkan fitur eksperimental
FedCmButtonMode
dichrome://flags
. - Pastikan untuk memanggil API di belakang aktivasi pengguna sementara seperti klik tombol.
- Panggil API dengan parameter
mode
seperti berikut:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/config.json",
clientId: "123",
nonce:"456",
}],
mode: "button"
}
});
Browser akan mengirim parameter baru ke pernyataan ID
endpoint
yang mewakili jenis permintaan dengan menyertakan mode=button
:
POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button
Deteksi fitur
Untuk menentukan apakah browser memenuhi syarat untuk menggunakan mode tombol, Anda dapat periksa dengan kode berikut:
let supportsFedCmMode = false;
try {
navigator.credentials.get({
identity: Object.defineProperty(
{}, 'mode', {
get: function () { supportsFedCmMode = true; }
}
)
});
} catch(e) {}
if (supportsFedCmMode) {
// The button mode is supported.
}
Gunakan opsi akun lainnya
RP dapat memungkinkan pengguna untuk "menggunakan akun lain" di pemilih akun, misalnya misalnya, saat IdP mendukung beberapa akun atau mengganti akun yang sudah ada.
Guna mengaktifkan opsi untuk menggunakan akun lain:
- Aktifkan fitur eksperimental
FedCmUseOtherAccount
dichrome://flags
atau daftarkan uji coba origin Button Mode API. - IdP menentukan hal berikut dalam konfigurasi IdP file:
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
Berpartisipasi dalam uji coba origin
Anda dapat mencoba Button Mode API secara lokal dengan mengaktifkan Chrome
laporkan
chrome://flags#fedcm-button-mode
di Chrome 125 atau yang lebih baru.
IdP juga dapat mengaktifkan Mode Tombol dengan mendaftarkan uji coba origin:
- Mendaftarkan uji coba origin pihak ketiga untuk RP.
Uji coba origin memungkinkan Anda mencoba fitur baru dan memberikan masukan terkait kegunaan, kepraktisan, dan efektivitas untuk komunitas standar web. Sebagai informasi selengkapnya, lihat Panduan Uji Coba Origin untuk Web Developer.
Uji coba origin Button Mode API tersedia dari Chrome 125 hingga Chrome 130.
- Buka pendaftaran uji coba origin halaman kami.
- Klik tombol Register, lalu isi formulir untuk meminta token.
- Masukkan asal IdP sebagai Asal Web.
- Periksa pencocokan Pihak ketiga untuk memasukkan token dengan JavaScript di origin.
- Klik Kirim.
- Sematkan token yang diterbitkan di situs pihak ketiga.
Untuk menyematkan token di situs pihak ketiga, tambahkan kode berikut ke IdP 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.
CORS dan SameSite=None
akan diperlukan di Chrome 125
CORS
Chrome akan menerapkan CORS pada ID pernyataan endpoint mulai dari Chrome 125.
CORS (Cross-Origin-Resource-Sharing) adalah sistem yang terdiri dari
Header HTTP, yang menentukan apakah browser memblokir kode JavaScript frontend
agar tidak mengakses respons untuk permintaan lintas origin. Endpoint pernyataan ID pada
server IdP harus merespons permintaan dengan header tambahan. Tujuan
berikut adalah contoh header respons terhadap permintaan dari
https://fedcm-rp-demo.glitch.me
:
Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true
SameSite=Tidak ada
SameSite Cookie
parameter mendeklarasikan apakah
cookie dibatasi untuk konteks pihak pertama atau situs yang sama. Dengan menentukannya
menjadi None
, cookie dapat dikirim ke domain pihak ketiga.
Di FedCM, Chrome mengirimkan cookie ke akun
endpoint,
pernyataan ID
endpoint dan
pemutusan koneksi
endpoint. Mulai dari
Chrome 125, Chrome akan mengirimkan permintaan dengan kredensial tersebut hanya dengan cookie
secara eksplisit ditandai sebagai SameSite=None
.