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

Chrome 116, Giriş İpucu API'si, Kullanıcı Bilgileri API'si ve RP Bağlam API'si gibi FedCM özelliklerini kullanıma sunar ve IdP Oturum Açma Durumu API'si için bir kaynak deneme sürümü başlatır.

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

  • Giriş İpucu API'si: Oturum açılacak tercih edilen bir 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 alın.
  • RP Context API: FedCM iletişim kutusunda "Giriş yap"tan farklı bir başlık kullanın.

Ayrıca Chrome, IdP Oturum Açma Durumu API'si için bir kaynak denemesi başlatıyor. IdP Sign-in Status API bir zorunluluktur ve kullanıma sunulduğunda önemli bir değişiklik olacaktır. FedCM'nin mevcut bir uygulamanız varsa kaynak denemeye 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. Kimlik sağlayıcı birden fazla hesabı desteklediğinde, oturum açmış tüm hesapları listeler.

Birden fazla kullanıcı hesabını gösteren FedCM iletişim kutusu.
Birden çok kullanıcı hesabını gösteren FedCM iletişim kutusu

Kullanıcı oturum açtıktan sonra, güvenen taraf (RP) bazen kullanıcıdan kimliğini yeniden doğrulamasını ister. Ancak kullanıcı hangi hesabı kullandığından emin olmayabilir. RP, hangi hesapla oturum açılacağını belirtebilirse kullanıcının hesap seçmesi daha kolay olur. Giriş ipucu, Chrome 116'da kullanıma sunuldu. Bu sayede RP, listeyi bir öğeye indirebilir.

Bu uzantı, kimlik sağlayıcıdan gelen hesap listesi uç noktası yanıtına, kimlik sağlayıcının desteklediği tüm filtre türlerini içeren bir login_hints dizisi ekler. Örneğin, bir kimlik sağlayıcı e-posta ve kimliğe göre filtrelemeyi desteklediğinde hesap 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'ü ileterek belirtilen hesabı seçerek göstermek için aşağıdaki kod örneğinde gösterildiği gibi navigator.credentials.get()'ü loginHint mülkü ile ç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 federasyonuyla oturum açmasına olanak tanıyan, 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 bilgileriyle süslemek, özellikle de kullanıcı bu web sitesinde daha önce IDP ile kaydolduğunda oturum açmayı 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.
Kişiselleştirilmiş Google ile oturum açma düğmesi

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 kullanımdan kaldırıldığında kullanılamayacaktır.

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

API'nin, kullanıcı bilgilerini alabilmesi ve kişiselleştirilmiş bir düğmeyi RP yüzeyinin bir parçasıymış gibi 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ıyla hesap listesi uç noktasına istek gönderir ve aşağıdaki durumlarda bir kullanıcı bilgisi dizisi döndürür:

  • Kullanıcı, geçmişte aynı tarayıcı örneğinde FedCM aracılığıyla IdP ile RP'de oturum açtıysa ve veriler temizlenmediyse.
  • 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.
}

IdentityProvider.getUserInfo() işlevinin, kimlik sağlayıcıyla aynı kaynaktaki bir iframe'den çağrılmasına izin verilmesi için HTML'nin identity-credentials-get izin politikasıyla buna açıkça izin vermesi gerektiğini unutmayın.

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

Bu özelliğin işleyiş şeklini https://fedcm-rp-demo.glitch.me/button adresinde görebilirsiniz.

RP Context API

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

&quot;****&#39;da oturum aç&quot; ifadesiyle oluşturulan FedCM iletişim kutusu.
"****'da oturum aç" ifadesiyle oluşturulan FedCM iletişim kutusu. RP bağlamı belirtilmezse varsayılan seçenek budur.
FedCM iletişim kutusu oluşturulurken kullanılan
"****'a kaydol" ifadesiyle oluşturulan FedCM iletişim kutusu
FedCM iletişim kutusu oluşturulurken kullanılan
"****'a Devam Et" ile oluşturulan FedCM iletişim kutusu
&quot;****&#39;yi kullan&quot; ifadesiyle oluşturulan FedCM iletişim kutusu
"****'yi kullan" ifadesiyle 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 oturum açma durumu API'si kaynak denemesi

Chrome, Chrome 116'dan itibaren masaüstünde ve daha sonra Android Chrome'da IdP Sign-In Status API kaynak denemesini başlatır. Kaynak denemeleri, yeni veya deneysel bir özelliğe erişim sağlar. Bu sayede, özelliğin herkese sunulmasından önce kullanıcılarınızın sınırlı bir süre boyunca deneyebileceği işlevler oluşturabilirsiniz.

IdP Oturum Açma Durumu API'si, bir IdP'nin tarayıcıya kullanıcının IdP'deki oturum açma durumunu bildirdiği bir mekanizmadır. Tarayıcı, bu API ile kimlik sağlayıcıya yapılan gereksiz istekleri azaltabilir ve olası zamanlama saldırılarını azaltabilir.

Tarayıcıya kullanıcının oturum açma durumunu bildirme

Kimlik sağlayıcılar, kullanıcı IdP'de oturum açtığında veya tüm IdP hesaplarından çıkış yaptığında bir HTTP başlığı göndererek ya da JavaScript API'yi çağırarak kullanıcının oturum açma durumunu tarayıcıya bildirebilir. Tarayıcı, durumu aşağıdakilerden biri olarak kaydeder: "Giriş yap", "Oturumu kapat" veya "Bilinmiyor" (varsayılan).

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

IdP-SignIn-Status: action=signin

Alternatif olarak, JavaScript API'yi IdentityProvider.login() kimlik sağlayıcı kaynağından çağırabilirsiniz:

IdentityProvider.login()

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

Kullanıcının tüm hesaplarından çıkış yaptığını belirtmek için üst düzey bir gezinme veya aynı kaynak alt kaynağı 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() kimlik sağlayıcı kaynağından çağırabilirsiniz:

IdentityProvider.logout()

Bu işlemler, kullanıcının oturum açma durumunu "oturumu kapat" olarak kaydeder. Kullanıcının oturum açma durumu "oturum kapatma" olduğunda, FedCM çağrısı, IdP'nin hesap listesi uç noktasına istek göndermeden sessizce başarısız olur.

Varsayılan olarak kimlik sağlayıcı oturum açma durumu "bilinmiyor" olarak ayarlanır. Bu durum, IdP'nin IdP Oturum Açma Durumu API'sini kullanarak sinyal göndermesinden önce kullanılır. Bu API'yi kullanıma sunduğumuzda kullanıcının IdP'de oturum açmış olması ve FedCM ilk kez çağrıldığında IdP'nin bunu tarayıcıya bildirme şansı olmaması nedeniyle daha iyi bir geçiş için bu durumu sunuyoruz. Bu durumda, kimlik sağlayıcının hesap listesi uç noktasına istek göndeririz 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 "giriş yap" olarak güncelleyin ve bu hesapları göstermek için FedCM iletişim kutusunu açın.
  • Bitiş noktası hiçbir hesap döndürmezse durumu "oturumu kapat" olarak güncelleyin ve FedCM çağrısını başarısız kılın.

Kullanıcı oturumunun süresi dolarsa ne olur? Kullanıcının dinamik bir 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 oturum sona erdiğinde senkronizasyon bozulabilir. Oturum açma durumu "oturum açma" olduğunda tarayıcı, hesap listesi uç noktasına kimlik bilgisi içeren bir istek göndermeye çalışır ancak oturum artık kullanılamadığı için sunucu bunu reddeder. Bu gibi durumlarda tarayıcı, kullanıcının pop-up pencere aracılığıyla IdP'de dinamik olarak oturum açmasına izin verebilir.

FedCM iletişim kutusunda aşağıdaki resimde gösterilen 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.

Kimlik sağlayıcıda 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), 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 ne olursa olsun IdP'ye bağlıdır ancak RP sayfasına kaynaktan bağımsız iletişim isteği göndermek için pencere tutamaçları kullanılamaz. Kullanıcı oturum açtıktan sonra kimlik sağlayıcı:

  • Tarayıcıyı kullanıcının oturum açtığını bilgilendirmek için IdP-SignIn-Status: action=signin başlığını gönderin veya IdentityProvider.login() API'yi çağırın.
  • Kendisini (pop-up pencereyi) kapatmak için IdentityProvider.close() işlevini çağırabilir.
// 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 bir 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çmayı gözlemleyebilirsiniz.

Kaynak denemesine katılma

Chrome 116 veya sonraki bir sürümde Chrome işaretini chrome://flags#fedcm-idp-signin-status-api
etkinleştirerekchrome://flags#fedcm-idp-signin-status-api IdP oturum açma durumu API'sini yerel olarak deneyebilirsiniz.

IdP oturum açma durumu API'sini, bir kaynak deneme sürümünü iki kez kaydederek de etkinleştirebilirsiniz:

Kaynak denemeleri, yeni özellikleri denemenize ve web standartları topluluğuna kullanılabilirlikleri, pratiklikleri ve etkililikleri hakkında geri bildirim vermenize olanak tanır. Daha fazla bilgi için Web Geliştiricileri İçin Kaynak Deneme Kılavuzu'na göz atın.

IdP Sign-In Status API kaynak denemesi, Chrome 116 ile Chrome 119 arasında kullanılabilir.

Kimlik sağlayıcı için kaynak denemesi kaydetme

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

RP için üçüncü taraf kaynak denemesi kaydetme

  1. Origin deneme sürümü kayıt sayfasına gidin.
  2. Register (Kaydol) düğmesini tıklayın ve jeton istemek için formu doldurun.
  3. Kimlik sağlayıcının kaynağını Web Kaynağı olarak girin.
  4. Diğer kaynaklarda jetonu JavaScript ile eklemek için Üçüncü taraf eşleştirme'yi işaretleyin.
  5. Gönder'i tıklayın.
  6. Verilen jetonu üçüncü taraf bir web sitesine yerleştirin.

Jetonu üçüncü taraf bir web sitesine yerleştirmek için aşağıdaki kodu, kimlik sağlayıcının kaynağından 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 değerini kendi jetonunuzla değiştirin.

Etkileşim kurma ve geri bildirim paylaşma

Test sırasında geri bildirimde bulunmak veya karşılaştığınız sorunları paylaşmak için crbug.com adresini ziyaret edebilirsiniz.

Fotoğraf: Dan Cristian Pădureț, Unsplash