Button Mode API, Chrome 125'ten itibaren masaüstünde bir kaynak denemesi başlatıyor. Button Mode API sayesinde kimlik sağlayıcılar, API çağrısının ardından kullanıcılarının etkin IdP oturumları olmasa bile FedCM API'yi kullanabilir. Böylece kullanıcılar, IdP sitesine gitmeden birleşik hesaplarıyla bir web sitesinde oturum açabilir. Düğme modundaki FedCM kullanıcı arayüzü, bir kullanıcı hareketiyle kontrol edildiğinden ve kullanıcının oturum açma niyetini daha iyi yansıttığı için mevcut widget akışındakine kıyasla daha belirgindir.
Düğme Modu API'sı
FedCM kullanıcı arayüzü, masaüstünde sağ üst köşede gösterilen bir widget veya mobil cihazlarda alt sayfa olarak (kullanıcı bağlı tarafa (RP) geldiğinde olabilir) API çağrıldığı anda kullanıma sunulmuştur. Buna, widget modu denir. Widget'ı görüntülemek için kullanıcının RP'ye ulaşmadan önce IdP'de oturum açmış olması gerekir. FedCM'nin tek başına, kullanıcının IdP'de bulunan hesabı kullanarak RP'de oturum açmasına izin vermeden önce, kullanıcının IdP'de oturum açmasına izin vermek için güvenilir bir yol yoktu. FedCM, bunu yapmanın bir yolunu eklemek üzere.
Yeni Button Mode API, button modu olarak adlandırılan yeni bir kullanıcı arayüzü modu ekler. Widget modunun aksine, düğme modu kullanıcı RP'ye ulaşır ulaşmaz çağrılmaz. Bunun yerine, kullanıcı "IdP ile oturum aç" düğmesine basma gibi bir oturum açma akışı başlattığında çağrılması gerekir.
Düğmeye basıldıktan hemen sonra FedCM, kullanıcının hesaplara getirme uç noktası veya tarayıcıda depolanan bir giriş durumu aracılığıyla IdP'de oturum açıp açmadığını kontrol eder. Kullanıcı henüz oturum açmadıysa FedCM, kullanıcıdan IdP tarafından sağlanan login_url öğesini kullanarak bir pop-up pencerede oturum açmasını ister. Tarayıcı, kullanıcının IdP'de zaten oturum açmış olduğunu bilirse veya kullanıcı pop-up pencereyle IdP'de oturum açar açmaz FedCM, kullanıcının oturum açacak bir IdP hesabı seçmesi için kalıcı bir iletişim kutusu açar. Kullanıcı, bir hesap seçerek IdP hesabını kullanarak RP'de oturum açabilir.
https://fedcm-rp-demo.glitch.me/button_flow adresinden Chrome 125'i kullanarak kendiniz deneyin.
Button Mode API'yi kullanmak için:
chrome://flagsürünündeFedCmButtonModeadlı deneysel özelliği etkinleştir.- API'yi, düğme tıklaması gibi geçici kullanıcı etkinleştirmesinin ardında çağırdığınızdan emin olun.
- API'yi
modeparametresiyle şu şekilde çağırın:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/config.json",
clientId: "123",
nonce:"456",
}],
mode: "button"
}
});
Tarayıcı, mode=button parametresini ekleyerek istek türünü temsil eden kimlik onayı uç noktasına yeni bir parametre gönderir:
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
Diğer hesap seçeneğini kullan
Kısıtlanmış taraf, örneğin IdP'ler birden fazla hesabı desteklediğinde veya mevcut hesabı değiştirdiğinde kullanıcıların hesap seçicide "diğer hesapları kullanmasına" izin verebilir.
Başka hesabı kullanma seçeneğini etkinleştirmek için:
chrome://flagskonumundaFedCmUseOtherAccountadlı deneysel özelliği etkinleştirin veya Button Mode API kaynak denemesine kaydolun.- IdP, IdP yapılandırma dosyasında aşağıdakileri belirtir:
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
Kaynak denemesine katılma
Chrome 125 veya sonraki sürümlerde Chrome işaretini
chrome://flags#fedcm-button-mode etkinleştirerek Button Mode API'yi yerel olarak deneyebilirsiniz.
IdP'ler bir kaynak denemesi kaydederek Düğme Modu'nu da etkinleştirebilir:
- RP için üçüncü taraf kaynak denemesi kaydettirin.
Kaynak denemeleri, yeni özellikleri denemenize ve kullanılabilirlik, pratiklik ve etkililik hakkında web standartları topluluğuna geri bildirimde bulunmanıza olanak tanır. Daha fazla bilgi için Web Geliştiricileri İçin Kaynak Denemeleri Kılavuzu'na göz atın.
Button Mode API kaynak denemesi, Chrome 125 ile Chrome 127 arasında kullanılabilir.
- Kaynak denemesi kayıt sayfasına gidin.
- Kaydol düğmesini tıklayın ve jeton istemek için formu doldurun.
- Web Origin olarak IdP'nin kaynağını girin.
- Jetonu diğer kaynaklara JavaScript ile yerleştirmek için Üçüncü taraf eşleşmesi seçeneğini işaretleyin.
- Gönder'i tıklayın.
- Verilen jetonu üçüncü taraf web sitesine yerleştirin.
Jetonu bir üçüncü taraf web sitesine yerleştirmek için IdP'nin JavaScript kitaplığına veya IdP'nin kaynağından sunulan SDK'ya aşağıdaki kodu ekleyin.
const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);
TOKEN_GOES_HERE öğesini kendi jetonunuzla değiştirin.
Chrome 125'te CORS ve SameSite=None gerekir
CORS
Chrome, Chrome 125'ten itibaren kimlik onayı uç noktasında CORS'yi zorunlu kılacaktır.
CORS (Çapraz Kaynak-Kaynak-Paylaşım), tarayıcıların ön uç JavaScript kodunun kaynaklar arası istekler için yanıtlara erişmesini engelleyip engellemediğini belirleyen, HTTP üst bilgilerini iletmeden oluşan bir sistemdir. IdP sunucusundaki kimlik onaylama uç noktası, isteğe ek üst bilgilerle yanıt vermelidir. Aşağıda, https://fedcm-rp-demo.glitch.me tarafından gönderilen istek için örnek bir yanıt başlığı verilmiştir:
Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true
SameSite=None
Çerezin SameSite parametresi, çerezin birinci taraf veya aynı site bağlamıyla sınırlı olup olmadığını bildirir. None olarak belirtildiğinde çerez bir üçüncü taraf alanına gönderilebilir.
FedCM'de Chrome, çerezleri hesap uç noktasına, kimlik onayı uç noktasına ve bağlantı kesme uç noktasına gönderir. Chrome 125'ten itibaren Chrome, kimlik bilgisi içeren bu istekleri yalnızca açıkça SameSite=None olarak işaretlenmiş çerezlerle gönderecektir.