Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

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.

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. — Birden fazla kullanıcı hesabını gösteren FedCM iletişim kutusu

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. — Google ile oturum aç düğmesi

Kişiselleştirilmiş Google ile Oturum Açma düğmesi. — Google ile Kişiselleştirilmiş Oturum Açma düğmesi

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: — FedCM iletişim kutusu "**** uygulamasında oturum aç" ile oluşturulur. RP Bağlamı belirtilmemişse varsayılan seçenek budur.

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",
    }],
  }
});

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.

Not: FedCM, hesap listesi uç noktasına bir kimlik bilgisi isteği ekler. Bu istek, istekte bulunanı tanımlayan veriler göndermez ve RP tarafından sağlanan verilerin geçirilmesine de izin vermez. Ancak tarayıcı, RP bilgilerini içeren kimlik bilgisi olmayan isteği client_metadata_endpoint ile ayrı olarak gerçekleştirir. Daha sonra IdP sunucusu, zamanlama veya diğer parmak izi verilerini kullanarak kimlik bilgisi olmayan isteği kimlik bilgisi olmayan istekle (stomekatik olarak) ilişkilendirebilir. Daha fazla bilgi için bu slaytları inceleyin.

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.

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.

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 veya IdentityProvider.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();
}

Bir kullanıcı, FedCM'yi kullanarak IdP'de oturum açtıktan sonra bir kısıtlanmış taraf üzerinde oturum açıyor

Not: Bu dinamik oturum açma deneyimi, açık bir oturum kapatma yapılmadan IdP oturumunun süresinin dolduğu ve bu nedenle, tarayıcının oturum açma durumunun gerçek durumla çelişmesine neden olduğu durumlar için tasarlanmıştır. Bu, henüz IdP'de oturum açmamış kullanıcılar için tetiklenmez. Bu yeni akış, kullanıcının tarayıcıdaki IdP oturum açma durumunun "oturum açma" olduğu ancak IdP'nin hesap listesi uç noktasının hiçbir hesap döndürmediği durumları kapsayacak şekilde tasarlanmıştır.

IdP Sign-In Status API'nin hemen çağrıldığı varsayıldığında, FedCM çağrıldığında aşağıdaki senaryolardan herhangi biri gerçekleşebilir:

Tarayıcı kullanıcının oturum açma durumunu ("bilinmiyor") bilmiyorsa durum, IdP'nin hesap listesi uç noktasından verdiği yanıta bağlı olarak güncellenir ("oturum açma" veya "oturumu kapatma"). Dinamik oturum açma akışı tetiklenmez.
Kullanıcı bir tarayıcı üzerinden IdP'de oturum açarsa ("oturum açma") ve ardından IdP'de açık bir şekilde oturumu kapatırsa ("oturumu kapat") dinamik oturum açma akışı tetiklenmez.
Bir kullanıcı tarayıcıdan IdP'de oturum açtıysa ("oturum açma"), ancak oturum, açık bir oturum kapatma işlemi yapılmadan sona ererse dinamik oturum açma akışı tetiklenir.

IdP Sign-In Status API, RP'nin IdP'de oturum açmamış kullanıcılara "IdP'de oturum açın" iletişim kutusu görüntüleme olanağı sağlamaz. Bu, ileride eklenebilecek ayrı bir özelliktir.

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-apiChrome
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şına origin-trial <meta> etiketi ekleyin. Bu, aşağıdaki gibi görünebilir:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

Uyarı: Origin-Trial HTTP üstbilgisi göndermek bu API'de işe yaramaz.

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)