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 Context API gibi FedCM özelliklerini sunar ve IdP Oturum Açma Durumu API'si için bir kaynak denemesi başlatır.

Chrome 116'da Chrome, aşağıdaki üç yeni Federated Credential (Birleştirilmiş Kimlik Bilgisi) seçeneğini sunuyor. Yönetim (FedCM) özellikler:

  • Giriş İpucu API'si: Olması istenen kullanıcı hesabını belirtin oturum açıldı.
  • User Info API: Geri gelen kullanıcının bilgilerini getirme Kimlik sağlayıcının (IdP) kişiselleştirilmiş bir oturum açma düğmesi oluşturabilmesi için bir çerçevedir.
  • RP Context API: "Oturum aç"tan farklı bir başlık kullanın inç iletişim kutusu gösteriliyor.

Ayrıca Chrome, yeni bir kaynak trial için IdP Oturum Açma Durumu" API'ya dokunun. IdP Sign-in Status API zorunlu bir koşuldur ve büyük bir değişime neden olabilir. Mevcut bir FedCM, kaynak denemesine katıldığınızdan emin olun.

Giriş İpucu API'sı

FedCM çağrıldığında tarayıcı, Belirtilen kimlik sağlayıcı (IdP) IdP birden fazla hesabı destekliyorsa oturum açılmış tüm hesapları listeler.

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

Kullanıcı oturum açtıktan sonra bağlı taraf (RP) bazen kullanıcıdan yeniden kimlik doğrulaması gerekir. Ancak kullanıcı hangi hesabı kullandığından emin olmayabilir. Kısıtlanmış taraf, hangi hesapla oturum açacağını belirtebiliyorsa hesap seçmesini sağlar. Giriş ipucu yer alır. RP, listeyi bir değere kadar daraltabilir.

Bu uzantı, hesap listesine bir login_hints dizisi ekler uç nokta yanıtının IdP'nin desteklediği tüm filtre türlerini kapsar. Örneğin, IdP e-postaya göre filtrelemeyi desteklediğinde hesapların yanıtı aşağıdaki gibi görünebilir ve kimlik:

{
  "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"],
    ...
  }, ...]
}

Kısıtlanmış taraf, hesap listesinde login_hints öğesini ileterek loginHint özelliği ile navigator.credentials.get() aşağıdaki kod örneğine bakalım:

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'si

Kullanıcıların oturum açmasına olanak tanıyan, IdP'nin logosuyla süslenmiş oturum açma düğmeleri kimlik federasyonu artık yaygın. Ancak düğmeyi kullanarak düğmeyi süslemek Oturum açmak için kullanıcının profil simgesini ve bilgilerini daha da erişilebilir hale getiriyor Özellikle de kullanıcı daha önce bu web sitesine IdP'yle kaydolduysa.

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

Zorluk şu ki kişiselleştirilmiş düğme üçüncü tarafa bağımlı olduğu için oturum açan kullanıcıyı tanımlamak amacıyla, iframe içindeki IdP alanında çerezler düğmesini oluşturduktan sonra, bu düğme üçüncü taraf çerezleri desteği sonlandırıldı.

Chrome 116'da kullanıma sunulan User Info API, IdP'nin sunucudan geri gelen kullanıcının bilgilerini Google Analytics 4'te tarama yapar.

API'nin, IdP tarafından RP web sitesini kullanarak kullanıcı bilgilerini alıp uygun bir kişiselleştirilmiş düğmeyi RP yüzeyindeymiş gibi hissedersiniz. API çağrısıyla, tarayıcı, hesaplar listesi için istekte bulunur uç nokta, aşağıdaki durumlarda bir kullanıcı bilgileri dizisi döndürür:

  • Kullanıcı daha önce FedCM aracılığıyla IdP ile RP'de oturum açmış olmalıdır. örneği gösterilir ve veriler temizlenmez.
  • Kullanıcı, aynı tarayıcı örneğinde IdP'de oturum açmıştı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() uygulamasının içinden çağrı yapılmasına izin vermek için IdP ile aynı kaynağa sahip iframe'lerse yerleştirilen HTML'nin açık bir şekilde identity-credentials-get izinlerle politikası hakkında daha fazla bilgi edinin.

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

Nasıl çalıştığını şu adreste görebilirsiniz: https://fedcm-rp-demo.glitch.me/button.

Kısıtlanmış Taraf Bağlam API'si

Chrome 116'da kullanıma sunulan RP Context API, kısıtlanmış tarafların dizeyi değiştirmesine olanak tanır. onay kutusunu işaretleyin. bağlamlar. Farklı seçenekler için aşağıdaki ekran görüntülerine bakın:

FedCM iletişim kutusu şununla oluşturuldu:
FedCM iletişim kutusu "**** hesabında oturum aç" ile oluşturuldu. Kısıtlanmış Taraf Bağlamı belirtilmediyse varsayılan seçenek budur.
FedCM iletişim kutusu şununla oluşturuldu:
"**** için kaydolun" mesajıyla oluşturulan FedCM iletişim kutusu
FedCM iletişim kutusu şununla oluşturuldu:
FedCM iletişim kutusu "**** ile devam et" olarak oluşturuldu
FedCM iletişim kutusu şununla oluşturuldu:
"**** kullan" ile oluşturulan FedCM iletişim kutusu

Kullanım basit; identity.context özelliğini "signin" özelliklerinden birini sağlayın (varsayılan), "signup", "use" veya "continue".

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, bir IdP Sign-In Status API kaynağı başlatır deneme Chrome 116'dan masaüstünde, daha sonra da Android Chrome'da. Kaynak özellikleri kullanıcılarınıza sunabilecekleri işlevler oluşturmak için yeni veya deneysel herkesin kullanımına sunulmadan önce sınırlı bir süre deneyin.

IdP Oturum Açma Durumu API IdP'nin, kullanıcının yapılandırdığınızdan emin olun. Bu API sayesinde tarayıcı, IdP'ye yapılan gereksiz istekleri azaltabilir ve zamanlamayla ilgili olası saldırıları azaltmaktır.

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

IdP'ler, HTTP göndererek kullanıcının oturum açma durumunu tarayıcıya bildirebilir başlığı veya bir JavaScript API'sini çağırarak, kullanıcı IdP'de oturum açtığında veya Kullanıcı tüm IdP hesaplarındaki oturumu kapattığında. Tarayıcı "oturum aç", "oturumu kapat" veya "bilinmiyor" durumundan birini seçin. (varsayılan).

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

IdP-SignIn-Status: action=signin

Alternatif olarak, IdP'den JavaScript API'yi IdentityProvider.login() çağırabilirsiniz. kaynak:

IdentityProvider.login()

Bunlar, kullanıcının oturum açma durumunu "oturum açma" olarak kaydeder. Kullanıcı oturum açma durumu "oturum aç" olarak ayarlanırsa PR çağrısı FedCM, IdP'nin hesaplar uç noktasını listeler ve kullanılabilir hesapları kullanıcıya FedCM iletişim kutusu.

Kullanıcının tüm hesaplarındaki oturumunun kapatıldığını bildirmek için IdP-SignIn-Status: action=signout-all üst düzey gezinme menüsünde HTTP üstbilgisi veya aynı kaynaktan gelen bir alt kaynak isteği:

IdP-SignIn-Status: action=signout-all

Alternatif olarak, IdP'den JavaScript API'yi IdentityProvider.logout() çağırabilirsiniz. kaynak:

IdentityProvider.logout()

Bunlar, kullanıcının oturum açma durumunu "oturumu kapatma" olarak kaydeder. Kullanıcı oturum açma durumu "oturum açma"dır ve FedCM'nin çağrılması durumunda, IdP'nin hesap listesi uç noktasına yönelik istek.

IdP oturum açma durumu varsayılan olarak "bilinmiyor" olarak ayarlanmıştır. Bu durum kullanılır önce IdP'nin IdP Oturum Açma Durumu API'sini kullanarak sinyal göndermesini sağlayın. Google'da Bu durum, daha iyi bir geçiş için önemlidir. Çünkü kullanıcı, IdP'nin kullanılması ve IdP'nin bunu bildirme imkânı bulunmayabilir. FedCM ilk kez çağrıldığında tarayıcıya gönderilir. Bu durumda, IdP'nin hesap listesi uç noktasına isteği gönderebilir ve hesap listesi uç noktasından yanıt:

  • Uç nokta etkin hesapların listesini döndürürse durumu şu şekilde güncelleyin: "oturum aç" FedCM iletişim kutusunu açarak bu hesapları görebilirsiniz.
  • Uç nokta hiçbir hesap döndürmezse durumu "oturumu kapat" olarak güncelleyin. başarısız olur geri dönelim.

Kullanıcı oturumunun süresi dolarsa ne olur? Kullanıcının dinamik oturum açma akışı üzerinden oturum açmasına izin verin

IdP, tarayıcıyı, kullanıcının oturum açtığı konusunda bilgilendirmeye devam etse de oturumun sona ermesi gibi, senkronize olmayan bir durum olabilir. Tarayıcı şu anda hesap listesi uç noktasına kimlik bilgileri içeren bir istek göndermeye çalışır oturum açma durumu "oturum açma"dır ancak sunucu, oturum artık kullanılabilir. Böyle bir senaryoda tarayıcı, kullanıcının bir pop-up pencere üzerinden IdP'de oturum açın.

FedCM iletişim kutusunda, aşağıdaki resimde gösterildiği gibi bir mesaj görüntülenir:

IdP&#39;de oturum açmanızı öneren FedCM iletişim kutusu.
IdP'de oturum açmanızı öneren bir FedCM iletişim kutusu.

Devam düğmesini tıkladığınızda tarayıcı bir pop-up penceresi açar. Kullanıcıyı IdP'nin oturum açma sayfasına gönderebilirsiniz.

IdP&#39;de oturum aç düğmesini tıkladıktan sonra gösterilen pop-up pencere.
IdP'de oturum aç düğmesini tıkladıktan sonra gösterilen bir pop-up pencere.
ziyaret edin.

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

{
  "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 ne olacağı IdP'ye bağlıdır, ancak herhangi bir zaman aralığı yoktur Herkese açık kullanıcı adları Kısıtlanmış Taraf'a kaynaklar arası iletişim isteği göndermek için kullanılabilir. sayfasını ziyaret edin. Kullanıcı oturum açtıktan sonra IdP şunları yapmalıdır:

  • IdP-SignIn-Status: action=signin üstbilgisini gönderin veya IdentityProvider.login() Tarayıcıya, kullanıcının oturum açıldı.
  • Kendisini kapatmak için IdentityProvider.close() çağırın (pop-up pencere).
ziyaret edin. 
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}
Bir kullanıcı, FedCM'yi kullanarak IdP'de oturum açtıktan sonra Kısıtlanmış Taraf'ta oturum açtı

IdP Sign-In Status API davranışını şurada deneyebilirsiniz: demo'ya gidin. Oturum üç dakika içinde sona erecek (demo IdP'de oturum açtıktan sonra) Ardından IdP'de oturum açma işlemini pop-up pencere davranışı aracılığıyla görebilir.

Kaynak denemesine katılın

Bir Chrome
'u etkinleştirerek IdP Sign-In Status API'yi yerel olarak deneyebilirsiniz işaretle
üzerinde chrome://flags#fedcm-idp-signin-status-api Chrome 116 veya sonraki sürümler.

Bir kaynak deneme sürümüne kaydolarak IdP Sign-In Status API'yi de etkinleştirebilirsiniz iki kez:

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.

IdP Sign-In Status API kaynak denemesi Chrome 116 - Chrome 116 arası Chrome 119.

IdP için kaynak denemesi kaydettirme

  1. Kaynak deneme kaydı sayfasına gidin.
  2. 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. Kullanılan sayfaların başına origin-trial <meta> etiketi ekleyin IdentityProvider.close(). Örneğin, bu değer şuna benzer:
    <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.
ziyaret edin.

Kısıtlanmış taraf için üçüncü taraf kaynak denemesi kaydettirme

  1. Kaynak deneme kaydı sayfasına gidin.
  2. 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 kaynaklara 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 bir üçüncü taraf web sitesine yerleştirmek için aşağıdaki kodu 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.

Etkileşimde bulunun ve geri bildirim paylaşın

Test sırasında geri bildiriminiz varsa veya herhangi bir sorunla karşılaşırsanız bunları paylaşabilirsiniz ile crbug.com.

Fotoğraf: Dan Cristian Pădure meydan'da Unsplash