Button Mode API, Chrome 125'ten itibaren başlangıç sürümünü kullanın. Düğme Modu API'si ile kimlik sağlayıcılar, API çağrısı sırasında kullanıcıların etkin IdP oturumları olmasa bile FedCM API'yi kullanabilir. Böylece kullanıcılar, bir web sitesinde bir web sitesinde bir oturuma sahip olmadan, birleşik hesaplarıyla IdP sitesine gitti. Düğme modundaki FedCM kullanıcı arayüzü daha belirgindir kullanıcı tarafından sağlandığı için mevcut widget akışındaki ve kullanıcının oturum açma niyetini daha iyi yansıtır.
Düğme Modu API'sı
FedCM kullanıcı arayüzü, sağ üstte görüntülenen bir widget olarak kullanıma sunuldu sayfada veya mobil cihazlarda alt sayfa olarak, API çağrıldığında Bu, kullanıcı bağlı tarafa (RP) ulaştığında gerçekleşebilir. Buna widget modunu kullanın. Widget'ın gösterilebilmesi için kullanıcının IdP'de oturum açmış olması gerekir hemfikir olmasını isteriz. FedCM, gizliliklerini Kullanıcının Kısıtlanmış Taraf'ta oturum açmasına izin verilmeden önce IdP'de oturum açması (IdP'de mevcut olan hesabı kullanın). FedCM, bunun için bir yöntem eklemek üzeredir.
![Widget modu sayesinde, kullanıcı etkinleştirmesi olmadan masaüstü Chrome'da sağ üst köşede bir iletişim kutusu görüntüleniyor.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-widget-mode.jpg?authuser=7&hl=tr)
Yeni Button Mode API, button modu adı verilen yeni bir kullanıcı arayüzü modu ekler. Şunlardan farklı olarak: widget modunu kullanıyorsanız, düğme modu, kullanıcı sayfayı açar açmaz Kısıtlanmış Taraf Bunun yerine, kullanıcı bir oturum açma akışı başlattığında çağrılması amaçlanmıştır Örneğin, "IdP ile oturum açın"a basarak düğmesini tıklayın.
Düğmeye basıldığında FedCM, kullanıcının
IdP aracılığıyla hesaplara getirme
uç nokta veya
adresine kaydedilen giriş durumunu
tarayıcı. Öğe
kullanıcı henüz oturum açmadıysa FedCM, kullanıcıdan
login_url
bir pop-up pencere üzerinden IdP tarafından sağlanır. Tarayıcı, kullanıcının
IdP'de zaten oturum açmışsa veya kullanıcı IdP'de şununla oturum açar açmaz:
FedCM, kullanıcının IdP seçmesi için kalıcı bir iletişim kutusu açar
oturum açmanız gerekir. Kullanıcı bir hesap seçerek devam edebilir ve
IdP'ye giriş yapmasını sağlar.
Düğme modu kullanıcı arayüzünde, görüntülenen oturum açma iletişim kutusu widget'ı modunda kullanabilirsiniz. Görsel tutarlılığı korumak için marka simgesi de kullanılmalıdır. Widget modu için minimum simge boyutu 25x25 piksel olsa da düğme modunda simge 40x40 pikseldir. IdP'nin iyi bilinenleri dosyası birden çok simge URL'sini aşağıdaki gibi belirtmek gerekir:
{
// ... Other settings (like endpoints) here
"branding": {
"icons": [
{
"url": "https://size-25px-image",
"size": 25,
},
{
"url": "https://size-40px-image",
"size": 40
}
]
}
}
.
![Düğme moduyla, masaüstü Chrome'da orta üst tarafta kalıcı bir iletişim kutusu görüntülenir.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-button-mode.jpg?authuser=7&hl=tr)
Şu adreste bulunan Chrome 125 sürümünü kullanarak kendiniz deneyin: https://fedcm-rp-demo.glitch.me/button_flow.
Düğme Modu API'sini kullanmak için:
chrome://flags
ürünündeFedCmButtonMode
adlı deneysel özelliği etkinleştir.- Geçici kullanıcı etkinleştirmesinin arkasındaki API'yi çağırdığınızdan emin olun mesela bir düğme tıklaması gibi.
mode
parametresiyle API'yi ş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ı, ID assertion'a yeni bir parametre gönderecek
uç nokta
istek türünü mode=button
ekleyerek temsil eder:
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 kodla inceleyin:
let supportsFedCmMode = false;
try {
navigator.credentials.get({
identity: Object.defineProperty(
{}, 'mode', {
get: function () { supportsFedCmMode = true; }
}
)
});
} catch(e) {}
if (supportsFedCmMode) {
// The button mode is supported.
}
Diğer hesap seçeneğini kullan
Kısıtlanmış taraf, kullanıcıların "diğer hesapları kullanmasına" izin verebilir hesap seçicide Örneğin, IdP'ler birden fazla hesabı desteklediğinde veya mevcut hesabın yerini değiştirdiğinde.
Başka hesabı kullanma seçeneğini etkinleştirmek için:
chrome://flags
ürünündeFedCmUseOtherAccount
adlı deneysel özelliği etkinleştir veya Button Mode API kaynak denemesine kaydolun.- IdP, IdP yapılandırmasında aşağıdakileri belirtir: dosya:
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
Kaynak denemesine katılın
Chrome'u açarak Button Mode API'yi yerel olarak deneyebilirsiniz
işaretle
Chrome 125 veya sonraki sürümlerde chrome://flags#fedcm-button-mode
.
IdP'ler ayrıca bir kaynak denemesi kaydederek Düğme Modu'nu etkinleştirebilir:
- Üçüncü taraf kaynak denemesine kaydolma elde eder.
Kaynak denemeleri, yeni özellikleri denemenize ve bu özelliklerle ilgili geri bildirimde bulunmanıza olanak kullanılabilirlik, pratiklik ve etkililik gibi konuları ele aldık. Örneğin, Daha fazla bilgi için Web İçin Kaynak Denemeleri Kılavuzu'na bakın Geliştiriciler.
Button Mode API kaynak denemesi Chrome 125 ve Chrome arasında kullanılabilir 130.)
- Kaynak deneme kaydına gidin. öğrenin.
- Kaydol düğmesini tıklayın ve jeton istemek için formu doldurun.
- IdP'nin kaynağını Web Origin (Web Kaynağı) olarak girin.
- Diğer kaynaklar.
- Gönder'i tıklayın.
- Verilen jetonu üçüncü taraf bir web sitesine yerleştirin.
Jetonu üçüncü taraf bir web sitesine yerleştirmek için aşağıdaki kodu IdP'nin IdP'nin kaynağından sunulan JavaScript kitaplığı veya SDK.
const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);
TOKEN_GOES_HERE
yerine kendi jetonunuzu yazın.
Chrome 125'te CORS ve SameSite=None
gerekir
CORS
Chrome zorunlu kılınacak ID'deki CORS onaylama uç nokta (Chrome 125 sürümünden itibaren)
CORS (Cross-Origin-Resource-Sharing) bir sistemdir. Bu sistemde kaynaklar,
Tarayıcıların ön uç JavaScript kodunu engelleyip engellemediğini belirleyen HTTP üstbilgileri
kaynaklar arası istekler için yanıtlara erişmesini engeller. Şu adresteki kimlik onayı uç noktası:
IdP sunucusu, isteğe ek üst bilgilerle yanıt vermelidir. İlgili içeriği oluşturmak için kullanılan
Aşağıda,
https://fedcm-rp-demo.glitch.me
:
Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true
SameSite=Hiçbiri
Çerezin SameSite
parametresi
birinci taraf veya aynı site bağlamıyla kısıtlanmışsa. Bunu belirterek
None
ise çerez üçüncü taraf bir alana gönderilebilir.
Chrome, FedCM'de çerezleri hesaplara
uç nokta,
kimlik onayı
uç nokta ve
bağlantı kesme
uç nokta. Başlangıç tarihi:
Chrome 125 ile birlikte Chrome, kimlik bilgisi içeren istekleri yalnızca çerezlerle gönderir
açıkça SameSite=None
olarak işaretlendi.