Chrome 116; Login İpucu API, User Info API ve RP Context API gibi FedCM özelliklerini sunar ve IdP Sign-In Status API için bir kaynak denemesi başlatır.
Chrome 116'da Chrome aşağıdaki üç yeni Federated Credential Management (FedCM) özelliğini (FedCM) sunuyor:
- Giriş İpucu API'si: Oturum açılması için tercih edilen kullanıcı hesabını belirtin.
- User Info API: Kimlik sağlayıcının (IdP) bir iframe içinde kişiselleştirilmiş bir oturum açma düğmesi oluşturabilmesi için geri gelen kullanıcının bilgilerini getirin.
- RP Context API: FedCM iletişim kutusundaki "Oturum Aç"tan farklı bir başlık kullanın.
Ayrıca Chrome, IdP Oturum Açma Durumu API'si için bir kaynak denemesi başlatmaktadır. IdP Sign-in Status API'nin kullanılması zorunludur ve kullanıma sunulduğunda önemli bir değişiklik olacaktır. Mevcut bir FedCM uygulamanız varsa kaynak denemesine katıldığınızdan emin olun.
Giriş İpucu API'sı
FedCM çağrıldığında, tarayıcı belirtilen kimlik sağlayıcıda (IdP) oturum açılan hesabı gösterir. IdP birden fazla hesabı destekliyorsa oturum açılmış tüm hesapları listeler.
![Birden fazla kullanıcı hesabını gösteren FedCM iletişim kutusu.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-showing-mu-e3714b87b4d94.png?authuser=3&hl=tr)
Kullanıcı oturum açtıktan sonra bazen bağlı taraf (RP) kullanıcıdan yeniden kimlik doğrulamasını ister. Ancak kullanıcı hangi hesabı kullandığından emin olamayabilir. Kısıtlanmış taraf, oturum açmak için hangi hesapla kullanılacağını belirtebiliyorsa kullanıcının hesap seçmesi daha kolay olacaktır. Giriş ipucu, Chrome 116'da gönderimdir ve bu seçenekle birlikte RP, listeyi bir taneye indirgeyebilir.
Bu uzantı, IdP'den gelen hesap listesi uç noktası yanıtına, IdP'nin desteklediği tüm olası filtre türleriyle birlikte bir login_hints
dizisini ekler. Örneğin, bir IdP e-postaya ve kimliğe göre filtrelemeyi destekliyorsa hesaplar yanıtı aşağıdaki gibi görünebilir:
{
"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"],
...
}, ...]
}
RP, hesap listesinde login_hints
öğesini ileterek aşağıdaki kod örneğinde gösterildiği gibi, belirtilen hesabı seçerek navigator.credentials.get()
özelliğini loginHint
özelliği ile çağırabilir:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/manifest.json",
clientId: "123",
nonce: nonce,
loginHint : "demo1@example.com"
}]
}
});
Kullanıcı Bilgileri API'sı
Kullanıcıların kimlik federasyonuyla oturum açmasına olanak tanıyan ve IdP'nin logosuyla süslenmiş oturum açma düğmeleri artık yaygındır. Ancak, düğmeyi kullanıcının profil simgesi ve bilgilerini kullanarak dekore etmek, özellikle bir kullanıcı daha önce bu web sitesine IdP ile kaydolmuşsa oturum açmak için daha da sezgiseldir.
![Google ile oturum aç düğmesi.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/sign-with-google-button-d34d0cc6c6301.png?authuser=3&hl=tr)
![Kişiselleştirilmiş Google ile Oturum Açma düğmesi.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/personalized-sign-with-g-45331497ab21b.png?authuser=3&hl=tr)
Buradaki zorluk, kişiselleştirilmiş düğmenin, düğmeyi oluşturmak üzere oturum açmış kullanıcıyı tanımlamak için bir iframe içinde IdP alanında bulunan üçüncü taraf çerezlerine bağlı olmasıdır. Bu nedenle, üçüncü taraf çerezleri kullanımdan kaldırıldıktan sonra kullanılamaz.
Chrome 116'da gönderilen User Info API, IdP'nin üçüncü taraf çerezlerine bağlı olmadan, geri gelen kullanıcının bilgilerini sunucudan alması için bir yol sağlar.
API'nin, kullanıcı bilgilerini alabilmesi ve RP yüzeyinin bir parçası gibi kişiselleştirilmiş bir düğme oluşturabilmesi için IdP tarafından RP web sitesine yerleştirilmiş bir iframe içinden çağrılması beklenir. Tarayıcı, API çağrısı ile hesap listesi uç noktasına istekte bulunur, ardından aşağıdaki durumlarda bir dizi kullanıcı bilgisi döndürür:
- Kullanıcı, geçmişte aynı tarayıcı örneğinde FedCM üzerinden IdP üzerinden RP'de oturum açmıştır ve veriler temizlenmemiştir.
- Kullanıcı, aynı tarayıcı örneğinden IdP'de oturum açtığında.
// 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.
}
IdP ile aynı kaynak olan bir iframe'den IdentityProvider.getUserInfo()
çağrılmasına izin vermek için, yerleştirme HTML'sinin identity-credentials-get
izin politikası ile açıkça buna izin vermesi gerekir.
<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>
https://fedcm-rp-demo.glitch.me/button adresinde bunu uygulamalı olarak görebilirsiniz.
RP Context API'si
Chrome 116'da kullanıma sunulan RP Context API, bir RP'nin önceden tanımlanmış kimlik doğrulama bağlamlarını barındırabilmek için dizeyi FedCM iletişim kullanıcı arayüzünde değiştirmesine olanak tanır. Farklı seçenekler için aşağıdaki ekran görüntülerine bakın:
![FedCM iletişim kutusu şununla oluşturuldu:](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-fe1a06336087f.png?authuser=3&hl=tr)
![FedCM iletişim kutusu şununla oluşturuldu:](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-06a2fc27f97ad.png?authuser=3&hl=tr)
![FedCM iletişim kutusu şununla oluşturuldu:](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-c-5d3bb7d44dd6a.png?authuser=3&hl=tr)
![FedCM iletişim kutusu şununla oluşturuldu:](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-u-efb6bbffb812.png?authuser=3&hl=tr)
Kullanımı basittir. identity.context
mülkü için "signin"
(varsayılan), "signup"
, "use"
veya "continue"
değerlerinden birini sağlayın.
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",
}],
}
});
IdP Sign-In Status API kaynak denemesi
Chrome, masaüstünde Chrome 116'dan bir IdP Sign-In Status API kaynak denemesi başlatır, ardından Android Chrome'u izler. Başlangıç denemeleri, herkesin kullanımına sunulmadan önce kullanıcılarınızın sınırlı bir süre boyunca deneyebilecekleri işlevler sunmak için yeni veya deneysel bir özelliğe erişmenizi sağlar.
IdP Sign-In Status API, IdP'nin tarayıcıya, IdP'deki oturum açma durumunu bildirdiği bir mekanizmadır. Bu API sayesinde tarayıcı, IdP'ye gönderilen gereksiz istekleri azaltabilir ve olası zamanlama saldırılarını azaltabilir.
Tarayıcıya kullanıcının oturum açma durumunu bildir
IdP'ler, bir HTTP üst bilgisi göndererek veya JavaScript API'sini çağırarak, kullanıcı IdP'de oturum açtığında ya da kullanıcı tüm IdP hesaplarındaki oturumu kapattığında, kullanıcının oturum açma durumunu tarayıcıya bildirebilir. Tarayıcı, durumu şunlardan biri olarak kaydeder: "oturum aç", "oturum kapat" veya "bilinmiyor" (varsayılan).
Kullanıcının oturum açtığını belirtmek için üst düzey gezinmede bir IdP-SignIn-Status: action=signin
HTTP üst bilgisi veya aynı kaynak alt kaynak isteğinde gönderin:
IdP-SignIn-Status: action=signin
Alternatif olarak, IdP kaynağından IdentityProvider.login()
JavaScript API'sini çağırın:
IdentityProvider.login()
Böylece, kullanıcının oturum açma durumu "oturum açma" olarak kaydedilir. Kullanıcının oturum açma durumu "oturum aç" olarak ayarlandığında, PR çağrısı yapan FedCM, IdP'nin hesap listesi uç noktasına istek gönderir ve kullanılabilir hesapları FedCM iletişim kutusunda kullanıcıya gösterir.
Kullanıcının tüm hesaplarındaki oturumunun kapatıldığını belirtmek için üst düzey gezinmede veya aynı kaynak alt kaynak isteğinde IdP-SignIn-Status: action=signout-all
HTTP üst bilgisini gönderin:
IdP-SignIn-Status: action=signout-all
Alternatif olarak, IdP kaynağından IdentityProvider.logout()
JavaScript API'sini çağırın:
IdentityProvider.logout()
Bunlar, kullanıcının oturum açma durumunu "oturumu kapat" olarak kaydeder. Kullanıcının oturum açma durumu "oturumu kapat " olduğunda FedCM'nin çağrılması, IdP'nin hesap listesi uç noktasına istek yapılmadan sessizce başarısız olur.
Varsayılan olarak, IdP oturum açma durumu "bilinmiyor" olarak ayarlanır. Bu durum, IdP, IdP Sign-In Status API'yi kullanarak sinyal göndermeden önce kullanılır. Bu API'yi gönderdiğimizde bir kullanıcı IdP'de zaten oturum açmış olabileceğinden ve IdP, FedCM'nin ilk çağrıldığı zamana kadar bu durumu tarayıcıya bildirme fırsatı bulamayabilir. Bu nedenle, daha iyi bir geçiş için bu durumu kullanıma sunduk. Bu durumda, IdP'nin hesap listesi uç noktasına bir istek yaparız ve hesap listesi uç noktasından gelen yanıta göre durumu güncelleriz:
- Uç nokta, etkin hesapların listesini döndürürse durumu "oturum aç" olarak güncelleyin ve bu hesapları göstermek için FedCM iletişim kutusunu açın.
- Uç nokta hiçbir hesap döndürmezse durumu "oturumu kapat" olarak güncelleyin ve FedCM çağrısında başarısız olun.
Kullanıcı oturumunun süresi dolarsa ne olur? Kullanıcının dinamik oturum açma akışı üzerinden oturum açmasına izin verme
IdP, tarayıcıya kullanıcının oturum açma durumunu bildirmeye devam etse de oturumun sona ermesi gibi durumlar senkronize olmayabilir. Oturum açma durumu "oturum açma" olduğunda tarayıcı, hesap listesi uç noktasına kimlik bilgileri içeren bir istek göndermeye çalışır ancak oturum artık kullanılamadığı için sunucu bu isteği reddeder. Böyle bir senaryoda tarayıcı, kullanıcının bir pop-up pencere aracılığıyla IdP'de oturum açmasına dinamik olarak izin verebilir.
FedCM iletişim kutusunda, aşağıdaki resimde gösterildiği gibi bir mesaj görüntülenir:
![IdP'de oturum açmanızı öneren bir FedCM iletişim kutusu.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-suggesting-b9179c79f722d.png?authuser=3&hl=tr)
Devam düğmesini tıkladığınızda tarayıcı, kullanıcıyı IdP'nin oturum açma sayfasına gönderen bir pop-up pencere açar.
![IdP'de oturum açma düğmesi tıklandıktan sonra gösterilen pop-up pencere.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-popup-window-shown-cli-0520929770807.png?authuser=3&hl=tr)
Oturum açma sayfası URL'si (IdP'nin kaynağı olmalıdır), IdP yapılandırma dosyasının bir parçası olarak signin_url
ile belirtilebilir.
{
"accounts_endpoint": "/auth/accounts",
"client_metadata_endpoint": "/auth/metadata",
"id_assertion_endpoint": "/auth/idtokens",
"signin_url": "/signin"
}
}
Pop-up pencere, birinci taraf çerezleri kullanan normal bir tarayıcı penceresidir. İçerik penceresinde olan her şey IdP'ye bağlıdır, ancak RP sayfasına kaynaklar arası iletişim isteğinde bulunmak için herhangi bir pencere işleyicisi yoktur. Kullanıcı oturum açtıktan sonra IdP:
- Kullanıcının oturum açtığını tarayıcıya bildirmek için
IdP-SignIn-Status: action=signin
üst bilgisini gönderin veyaIdentityProvider.login()
API'sini çağırın. - Kendisini kapatmak için (pop-up pencere)
IdentityProvider.close()
adlı kullanıcıyı arayın.
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
// Signal to the browser that the user has signed in.
IdentityProvider.close();
}
IdP Sign-In Status API davranışını demomuzda deneyebilirsiniz. Oturum, demo IdP'de oturum açmanızdan sonra üç dakika içinde sona erer. Ardından, IdP'de oturum açma işlemini pop-up pencere davranışı üzerinden gözlemleyebilirsiniz.
Kaynak denemesine katılma
Chrome 116 veya sonraki sürümlerde chrome://flags#fedcm-idp-signin-status-api
Chrome
işaretini etkinleştirerek IdP Sign-In Status API'yi yerel olarak deneyebilirsiniz.
Bir kaynak denemesini iki kez kaydederek IdP Sign-In Status API'yi de etkinleştirebilirsiniz:
- IdP için bir kaynak deneme sürümü kaydettirin.
- 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.
IdP Sign-In Status API kaynak denemesi, Chrome 116 ile Chrome 119 arasında kullanılabilir.
IdP için kaynak denemesini kaydetme
- 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.
- Gönder'i tıklayın.
IdentityProvider.close()
kullanan sayfaların başınaorigin-trial
<meta>
etiketi ekleyin. Bu, aşağıdaki gibi görünebilir:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
.
RP için üçüncü taraf kaynak denemesi kaydetme
- 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 başka kaynaklara 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 bir üçüncü taraf web sitesine yerleştirmek için JavaScript kitaplığınıza 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.
Etkileşimde bulunun ve geri bildirim paylaşın
Test sırasında herhangi bir geri bildirimde bulunmak isterseniz veya herhangi bir sorunla karşılaşırsanız bunları crbug.com adresinden paylaşabilirsiniz.
Fotoğraf: Dan Cristian Pădure görüntüleniyor (Unsplash)