Chrome 125'ten itibaren Button Mode API, masaüstünde kaynak denemesine başlıyor. Düğme Modu API'si sayesinde, kimlik sağlayıcılar kullanıcıları API çağrısı sırasında etkin IdP oturumlarına sahip olmasa bile FedCM API'yi kullanabilir. Kullanıcılar daha sonra IdP sitesine yönlendirilmeden birleştirilmiş hesaplarıyla web sitesinde oturum açabilir. Düğme modundaki FedCM kullanıcı arayüzü, kullanıcı hareketiyle sınırlı olduğundan ve kullanıcının oturum açma amacını daha iyi yansıttığından mevcut widget akışındaki kullanıcı arayüzüne kıyasla daha belirgindir.
Button Mode API
FedCM kullanıcı arayüzü, API çağrılır çağrılmaz (kullanıcı, güvenen tarafa (RP) geldiğinde olabilir) masaüstünde sağ üst köşede gösterilen bir widget veya mobil cihazda bir alt sayfa olarak kullanıma sunulmuştur. Buna widget modu denir. Widget'ın gösterilmesi 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 oturum açmasına izin vermeden önce IdP'de oturum açmasına izin verecek güvenilir bir yolu yoktu. FedCM, bu işlemi yapmanın bir yolunu eklemek üzere.
Yeni Button Mode API, button modu adlı yeni bir kullanıcı arayüzü modu ekler. Widget modunun aksine, düğme modu, kullanıcı RP'ye ulaştığı anda çağrılmak üzere tasarlanmamıştır. Bunun yerine, kullanıcı bir oturum açma akışı başlattığında (ör. "IdP ile oturum aç" düğmesine bastığında) çağrılması amaçlanmıştır.
Düğmeye basıldığı anda FedCM, kullanıcının hesaplar uç noktasına yapılan bir getirme işlemi 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çmamışsa FedCM, kullanıcının IdP tarafından sağlanan login_url aracılığıyla bir pop-up penceresi üzerinden IdP'de oturum açmasını ister. Tarayıcı, kullanıcının IdP'de oturum açtığını biliyorsa veya kullanıcı pop-up pencereyle IdP'de oturum açtığı anda FedCM, kullanıcının oturum açmak için bir IdP hesabı seçebileceği bir modal iletişim kutusu açar. Kullanıcı, bir hesap seçerek IdP hesabını kullanarak RP'de oturum açmaya devam edebilir.
Düğme modundaki kullanıcı arayüzünde, görüntülenen oturum açma iletişim kutusu widget moduna kıyasla daha büyüktür. Bu nedenle, görsel tutarlılığı korumak için markalama simgesi de daha büyük olmalıdır. Widget modu için minimum simge boyutu 25x25 piksel, düğme modundaki simge için minimum boyut ise 40x40 pikseldir. IdP'nin well-known dosyası, birden fazla simge URL'sinin aşağıdaki gibi belirtilmesine olanak tanır:
{
// ... Other settings (like endpoints) here
"branding": {
"icons": [
{
"url": "https://size-25px-image",
"size": 25,
},
{
"url": "https://size-40px-image",
"size": 40
}
]
}
}
https://fedcm-demo-rp.dev/active-mode adresinde Chrome 125'i kullanarak kendiniz deneyin.
Düğme Modu API'sini kullanmak için:
chrome://flags'da deneyselFedCmButtonModeözelliğini etkinleştirin.- API'yi, düğme tıklama gibi geçici kullanıcı etkinleştirme işleminin arkasından çağırdığınızdan emin olun.
- API'yi
modeparametresiyle aşağıdaki gibi ç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 ekleyerek istek türünü temsil eden kimlik onaylama 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
Özellik algılama
Tarayıcının düğme modunu kullanmaya uygun olup olmadığını belirlemek için aşağıdaki kodu inceleyebilirsiniz:
let supportsFedCmMode = false;
try {
navigator.credentials.get({
identity: Object.defineProperty(
{}, 'mode', {
get: function () { supportsFedCmMode = true; }
}
)
});
} catch(e) {}
if (supportsFedCmMode) {
// The button mode is supported.
}
Başka hesap seçeneğini kullanma
RP, kimlik sağlayıcılar birden fazla hesabı desteklediğinde veya mevcut hesabın değiştirilmesi gerektiğinde kullanıcıların hesap seçicide "diğer hesapları kullanmasına" izin verebilir.
Diğer hesabı kullanma seçeneğini etkinleştirmek için:
chrome://flags'deFedCmUseOtherAccountdeneysel özelliğini etkinleştirin veya Button Mode API'nin 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 bir Chrome flag'ini
chrome://flags#fedcm-button-mode etkinleştirerek düğme modu API'sini yerel olarak deneyebilirsiniz.
Kimlik sağlayıcılar, bir kaynak denemesi kaydederek düğme modunu da etkinleştirebilir:
- RP için üçüncü taraf kaynaklı denemesini kaydedin.
Kaynak denemeleri, yeni özellikleri denemenize ve web standartları topluluğuna bu özelliklerin kullanılabilirliği, pratikliği ve etkinliği hakkında geri bildirim vermenize 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'ten Chrome 130'a kadar kullanılabilir.
- Deneme süreci kayıt sayfasına gidin.
- Register (Kaydol) düğmesini tıklayın ve jeton istemek için formu doldurun.
- IdP'nin kaynağını Web Origin (Web Kaynağı) olarak girin.
- Jetonu diğer kaynaklarda JavaScript ile yerleştirmek için Üçüncü taraf eşleştirme'yi işaretleyin.
- Gönder'i tıklayın.
- Verilen jetonu üçüncü taraf web sitesine yerleştirin.
Jetonu üçüncü taraf web sitesine yerleştirmek için aşağıdaki kodu IdP'nin JavaScript kitaplığına veya IdP'nin kaynağında sunulan SDK'ya 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 gerekli olacak
CORS
Chrome, Chrome 125'ten itibaren kimlik onaylama uç noktasında CORS'u zorunlu kılacak.
CORS (Merkezler Arası Kaynak Paylaşımı), tarayıcıların merkezler arası isteklerin yanıtlarına erişmek için ön uç JavaScript kodunu engelleyip engellemeyeceğini belirleyen, HTTP başlıklarının iletilmesinden oluşan bir sistemdir. IdP sunucusundaki kimlik onayı uç noktası, isteğe ek üstbilgilerle yanıt vermelidir. Aşağıda, https://fedcm-rp-demo.glitch.me adresinden gelen bir isteğe verilen örnek yanıt üstbilgisi yer almaktadır:
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, üçüncü taraf alanına gönderilebilir.
FedCM'de Chrome, çerezleri hesaplar uç noktasına, kimlik onaylama uç noktasına ve bağlantıyı kaldırma 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önderir.