FedCM güncellemeleri: IdP Sign-In Status API, Giriş İpucu ve daha fazlası

Chrome 116; Login Hint API, User Info API ve RP Context API gibi FedCM özelliklerini içerir ve IdP Sign-In Status API için kaynak denemesini başlatır.

Chrome 116'da Chrome, aşağıdaki üç yeni Federated Credential Management (FedCM) özelliğini kullanıma sunuyor:

  • Login Hint API: Oturum açılacak 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 kutusunda "Oturum aç"tan farklı bir başlık kullanın.

Ayrıca Chrome, IdP oturum açma durumu API'si için kaynak denemesi başlatıyor. IdP oturum açma durumu API'si zorunludur ve kullanıma sunulduğunda önemli bir değişiklik olacaktır. FedCM'nin mevcut bir uygulamasını kullanıyorsanız kaynak denemesine katıldığınızdan emin olun.

Login Hint API

FedCM çağrıldığında tarayıcı, belirtilen kimlik sağlayıcıdaki (IdP) oturum açılmış hesabı gösterir. IdP birden fazla hesabı desteklediğinde oturum açılan tüm hesapları listeler.

Birden fazla kullanıcı hesabını gösteren bir FedCM iletişim kutusu.
Birden fazla kullanıcı hesabının gösterildiği bir FedCM iletişim kutusu

Kullanıcı oturum açtıktan sonra, bazen güvenen taraf (RP) kullanıcıdan yeniden kimlik doğrulaması yapmasını ister. Ancak kullanıcı, hangi hesabı kullandığından emin olmayabilir. RP, oturum açılacak hesabı belirtebilirse kullanıcının hesap seçmesi daha kolay olur. Giriş ipucu, Chrome 116'da kullanıma sunuluyor. Bu özellik sayesinde RP, listeyi tek bir öğeye daraltabilir.

Bu uzantı, IdP'den gelen accounts list endpoint yanıtına IdP'nin desteklediği tüm olası filtre türleriyle birlikte bir dizi login_hints ekler. Örneğin, bir IdP e-postaya ve kimliğe göre filtrelemeyi desteklediğinde 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, hesaplar listesinde login_hints değerini ileterek belirtilen hesabı seçerek göstermek için aşağıdaki kod örneğinde gösterildiği gibi loginHint özelliğiyle navigator.credentials.get() işlevini çağırabilir:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

User Info API

Kullanıcıların kimlik federasyonu ile oturum açmasına olanak tanıyan, IdP'nin logosuyla süslenmiş oturum açma düğmeleri artık yaygın olarak kullanılıyor. Ancak, düğmeyi kullanıcının profil simgesi ve bilgileriyle süslemek, özellikle kullanıcı daha önce bu web sitesine IdP ile kaydolduysa oturum açma işlemini daha da sezgisel hale getirir.

Google ile oturum açma düğmesi
Google ile oturum açma düğmesi
Kişiselleştirilmiş Google ile oturum açma düğmesi.
Google ile oturum açma düğmesini kişiselleştirme

Ancak kişiselleştirilmiş düğme, düğmeyi oluşturmak için oturum açmış kullanıcıyı tanımlamak üzere bir iFrame içindeki IdP alanındaki üçüncü taraf çerezlerine bağlı olduğundan üçüncü taraf çerezleri desteği sonlandırıldığında kullanılamayacaktır.

Chrome 116'da kullanıma sunulan User Info API, IdP'nin üçüncü taraf çerezlerine bağlı kalmadan sunucudan geri gelen kullanıcının bilgilerini almasını sağlar.

API'nin, kullanıcı bilgilerini alabilmesi ve RP yüzeyinin bir parçasıymış gibi kişiselleştirilmiş bir düğme oluşturabilmesi için RP web sitesine yerleştirilmiş bir iFrame'den IdP tarafından çağrılması beklenir. API çağrısıyla tarayıcı, accounts list endpoint'ine istekte bulunur ve ardından şu durumlarda kullanıcı bilgilerinden oluşan bir dizi döndürür:

  • Kullanıcı, geçmişte aynı tarayıcı örneğinde FedCM aracılığıyla IdP ile RP'de oturum açmış ve veriler temizlenmemiştir.
  • Kullanıcı, aynı tarayıcı örneğinde IdP'de oturum açmış olmalıdır.
// 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.
}

Kimlik sağlayıcıyla aynı kaynağa sahip bir iFrame'den IdentityProvider.getUserInfo() çağrılmasına izin vermek için yerleştirme HTML'sinin identity-credentials-get permissions policy ile açıkça izin vermesi gerektiğini unutmayın.

<iframe src="https://fedcm-demo-idp.dev" allow="identity-credentials-get"></iframe>

Bu özelliği https://fedcm-demo-rp.dev/active-mode adresinde deneyebilirsiniz.

RP Context API

Chrome 116'da kullanıma sunulan RP Context API, bir RP'nin FedCM iletişim kutusu kullanıcı arayüzündeki dizeyi değiştirmesine olanak tanır. Böylece, önceden tanımlanmış kimlik doğrulama bağlamlarını barındırabilir. Farklı seçenekler için aşağıdaki ekran görüntülerine bakın:

&quot;**** hesabında oturum açın&quot; ifadesiyle oluşturulan FedCM iletişim kutusu.
"**** hesabında oturum açın" ifadesiyle oluşturulan FedCM iletişim kutusu. Bu, RP bağlamı belirtilmemişse varsayılan seçenektir.
FedCM iletişim kutusu şu şekilde oluşturulur:
"**** hizmetine kaydolun" ile oluşturulan FedCM iletişim kutusu
FedCM iletişim kutusu şu şekilde oluşturulur:
"**** sitesine devam et" ile oluşturulan FedCM iletişim kutusu
&quot;**** kullan&quot; ile oluşturulan FedCM iletişim kutusu
"**** kullan" ile oluşturulan FedCM iletişim kutusu

Kullanımı basittir. identity.context özelliğini "signin" (varsayılan), "signup", "use" veya "continue" değerlerinden biri olarak 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, Chrome 116'dan itibaren masaüstünde IdP oturum açma durumu API'si kaynak denemesini başlatır. Bu deneme daha sonra Android Chrome'da da başlatılır. Kaynak denemeleri, kullanıcılarınızın sınırlı bir süre boyunca deneyebileceği işlevler oluşturmak için yeni veya deneysel bir özelliğe erişmenizi sağlar. Bu özellik, herkese sunulmadan önce denenebilir.

IdP Sign-In Status API bir IdP'nin tarayıcıyı kullanıcının IdP'deki oturum açma durumu hakkında bilgilendirdiği bir mekanizmadır. Bu API sayesinde tarayıcı, IdP'ye yapılan gereksiz istekleri azaltabilir ve olası zamanlama saldırılarını önleyebilir.

Tarayıcıyı kullanıcının oturum açma durumu hakkında bilgilendirme

IdP'ler, kullanıcı IdP'de oturum açtığında veya tüm IdP hesaplarından oturumunu kapattığında bir HTTP başlığı göndererek ya da bir JavaScript API'si çağırarak kullanıcının oturum açma durumunu tarayıcıya bildirebilir. Tarayıcı, durumu "sign-in" (oturum açma), "sign-out" (oturum kapatma) veya "unknown" (bilinmiyor) (varsayılan) olarak kaydeder.

Kullanıcının oturum açtığını belirtmek için üst düzey gezinme veya aynı kaynaklı alt kaynak isteğinde bir IdP-SignIn-Status: action=signin HTTP başlığı gönderin:

IdP-SignIn-Status: action=signin

Alternatif olarak, JavaScript API'yi IdentityProvider.login() IdP kaynaklı olarak çağırın:

IdentityProvider.login()

Bu etkinlikler, kullanıcının oturum açma durumunu "oturum açma" olarak kaydeder. Kullanıcının oturum açma durumu "oturum açma " olarak ayarlandığında, FedCM'yi çağıran PR, IdP'nin hesap listesi uç noktasına istek gönderir ve FedCM iletişim kutusunda kullanıcının kullanabileceği hesapları gösterir.

Kullanıcının tüm hesaplarından oturumunun kapatıldığını belirtmek için üst düzey bir gezinme veya aynı kaynaklı bir alt kaynak isteğinde IdP-SignIn-Status: action=signout-all HTTP başlığını gönderin:

IdP-SignIn-Status: action=signout-all

Alternatif olarak, JavaScript API'yi IdentityProvider.logout() IdP kaynaklı olarak çağırın:

IdentityProvider.logout()

Bu etkinlikler, kullanıcının oturum açma durumunu "oturum kapatma" olarak kaydeder. Kullanıcının oturum açma durumu "oturum kapatma " olduğunda, FedCM'yi çağırma işlemi, IdP'nin hesap listesi uç noktasına istekte bulunmadan sessizce başarısız olur.

Varsayılan olarak, IdP oturum açma durumu "bilinmiyor" olarak ayarlanır. Bu durum, IdP, IdP oturum açma durumu API'sini kullanarak bir sinyal göndermeden önce kullanılır. Bu API'yi gönderdiğimizde kullanıcı IdP'de oturum açmış olabileceğinden ve FedCM ilk kez çağrıldığında IdP'nin bunu tarayıcıya bildirme şansı olmayabileceğinden, daha iyi bir geçiş için bu durumu kullanıma sunuyoruz. Bu durumda, IdP'nin hesap listesi uç noktasına istekte bulunuruz ve durumu, hesap listesi uç noktasından gelen yanıta göre güncelleriz:

  • Uç nokta etkin hesapların listesini döndürürse durumu "sign-in" olarak güncelleyin ve bu hesapları göstermek için FedCM iletişim kutusunu açın.
  • Uç nokta hesap döndürmezse durumu "sign-out" olarak güncelleyin ve FedCM çağrısını başarısız yapın.

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, kullanıcının oturum açma durumu hakkında tarayıcıyı bilgilendirmeye devam etse de oturumun süresi dolduğunda olduğu gibi senkronizasyon bozulabilir. Tarayıcı, oturum açma durumu "oturum açma" olduğunda hesap listesi uç noktasına kimlik bilgileri içeren bir istek göndermeye çalışır ancak oturum artık kullanılamadığından sunucu bu isteği reddeder. Böyle bir senaryoda tarayıcı, kullanıcının pop-up penceresi 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&#39;de oturum açmayı öneren bir FedCM iletişim kutusu.
IdP'de oturum açmayı öneren bir FedCM iletişim kutusu.

Devam düğmesini tıkladığınızda tarayıcı, kullanıcıyı IdP'nin oturum açma sayfasına yönlendiren bir pop-up pencere açar.

IdP&#39;de oturum aç düğmesi tıklandıktan sonra gösterilen pop-up pencere.
IdP'de oturum aç düğmesi tıklandıktan sonra gösterilen pop-up pencere.

Oturum açma sayfası URL'si (IdP'nin kaynağı olmalıdır) signin_url ile IdP yapılandırma dosyasının bir parçası olarak belirtilebilir.

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

Pop-up pencere, birinci taraf çerezlerini kullanan normal bir tarayıcı penceresidir. İçerik penceresinde olanlar IdP'ye bağlıdır ancak RP sayfasına kaynaklar arası iletişim isteği göndermek için pencere tutamaçları kullanılamaz. Kullanıcı oturum açtıktan sonra IdP şunları yapmalıdır:

  • Kullanıcının oturum açtığını tarayıcıya bildirmek için IdP-SignIn-Status: action=signin üstbilgisini gönderin veya IdentityProvider.login() API'sini çağırın.
  • Pop-up pencereyi kapatmak için IdentityProvider.close() işlevini çağırın.
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}
Kullanıcı, FedCM'yi kullanarak IdP'de oturum açtıktan sonra RP'de oturum açar

IdP oturum açma durumu API davranışını demomuzda deneyebilirsiniz. Demo kimlik sağlayıcıda oturum açtıktan üç dakika sonra oturumun süresi dolar. Ardından, pop-up pencere davranışı aracılığıyla IdP'de oturum açma işlemini gözlemleyebilirsiniz.

Kaynak denemesine katılma

Bir Chrome
flag'ini chrome://flags#fedcm-idp-signin-status-api etkinleştirerek
IdP oturum açma durumu API'sini Chrome 116 veya sonraki sürümlerde yerel olarak deneyebilirsiniz.

Ayrıca, IdP oturum açma durumu API'sini bir kaynak denemesini iki kez kaydederek de etkinleştirebilirsiniz:

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.

IdP Sign-In Status API kaynak denemesi, Chrome 116'dan Chrome 119'a kadar kullanılabilir.

IdP için bir kaynak denemesi kaydetme

  1. Origin denemesi kayıt sayfasına gidin.
  2. Register (Kaydol) düğmesini tıklayın ve jeton istemek için formu doldurun.
  3. IdP'nin kaynağını Web Origin (Web Kaynağı) olarak girin.
  4. Gönder'i tıklayın.
  5. IdentityProvider.close() kullanan sayfaların başlık bölümüne origin-trial <meta> etiketi ekleyin. Örneğin, bu şöyle görünebilir:
    <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

RP için üçüncü taraf deneme kaydı oluşturma

  1. Origin denemesi kayıt sayfasına gidin.
  2. Register (Kaydol) düğmesini tıklayın ve jeton istemek için formu doldurun.
  3. IdP'nin kaynağını Web Origin (Web Kaynağı) olarak girin.
  4. Jetonu diğer kaynaklarda JavaScript ile yerleştirmek için Üçüncü taraf eşleştirme'yi işaretleyin.
  5. Gönder'i tıklayın.
  6. Verilen jetonu üçüncü taraf web sitesine yerleştirin.

Jetonu üçüncü taraf web sitesine yerleştirmek için aşağıdaki kodu IdP'nin kaynağında sunulan JavaScript kitaplığınıza veya SDK'nıza 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şim kurma ve geri bildirim paylaşma

Geri bildiriminiz varsa veya test sırasında herhangi bir sorunla karşılaşırsanız bunları crbug.com adresinden paylaşabilirsiniz.

Dan Cristian Pădureț'in Unsplash'teki fotoğrafı