FedCM güncellemeleri: Continuation API paketi ve Storage Access API otomatik izni için kaynak denemeleri

Chrome 126'dan itibaren geliştiriciler, bazı yetkilendirme kullanım alanlarını etkinleştiren masaüstü Federated Credential Management API (FedCM) özelliklerinin bir paketi için kaynak denemesi çalıştırmaya başlayabilir. Paket, kimlik sağlayıcı (IdP) tarafından sağlanan izin iletişim kutusunu içeren OAuth yetkilendirme akışı benzeri bir deneyim sunan Continuation API ve Parameters API'den oluşur. Pakette Fields API, birden fazla configURL ve özel hesap etiketleri gibi diğer değişiklikler de yer alır. Chrome 126'tan itibaren, kullanıcı geçmişte FedCM'yi kullanarak başarılı bir şekilde oturum açtıysa SAA isteklerini otomatik olarak veren Storage Access API (SAA) için bir kaynak denemesi de sunuyoruz.

Kaynak denemesi: FedCM Continuation API paketi

FedCM Continuation API paketi birden fazla FedCM uzantısından oluşur:

Continuation API

Kullanıcı, RP'de oturum açtıktan sonra düğme modu üzerinden yetki veriyor.

Glitch'teki API demosuna göz atabilirsiniz.

Continuation API, kimlik sağlayıcının kimlik beyanı uç noktasının isteğe bağlı olarak FedCM'nin kullanıcının çok adımlı oturum açma akışına devam etmesine izin vermek için oluşturacağı bir URL döndürmesine olanak tanır. Bu sayede IdP, kullanıcıdan mevcut FedCM kullanıcı arayüzünde mümkün olanın ötesinde güvenilir taraf (RP) izinleri (ör. kullanıcının sunucu tarafı kaynaklarına erişim) vermesini isteyebilir.

Kimlik beyanı uç noktası genellikle kimlik doğrulama için gereken bir jeton döndürür.

{
  "token": "***********"
}

Ancak Continuation API ile kimlik beyanı uç noktası, kimlik beyanı uç noktasının mutlak yolunu veya göreli yolunu içeren bir continue_on mülkü döndürebilir.

{
  // In the id_assertion_endpoint, instead of returning a typical
  // "token" response, the IdP decides that it needs the user to
  // continue on a pop-up window:
  "continue_on": "/oauth/authorize?scope=..."
}

Tarayıcı continue_on yanıtını alır almaz yeni bir pop-up pencere açılır ve kullanıcıyı belirtilen yola yönlendirir.

Kullanıcı sayfayla etkileşime geçtikten sonra (ör. RP ile ek bilgi paylaşmak için daha fazla izin verdikten sonra) IdP sayfası, orijinal navigator.credentials.get() çağrısını çözmek ve bağımsız değişken olarak bir jeton döndürmek için IdentityProvider.resolve() çağrısı yapabilir.

document.getElementById('allow_btn').addEventListener('click', async () => {
  let accessToken = await fetch('/generate_access_token.cgi');
  // Closes the window and resolves the promise (that is still hanging
  // in the relying party's renderer) with the value that is passed.
  IdentityProvider.resolve(accessToken);
});

Tarayıcı daha sonra pop-up'ı kendi kendine kapatır ve jetonu API çağırıcıya döndürür.

Kullanıcı isteği reddederse IdentityProvider.close() çağrısı yaparak pencereyi kapatabilirsiniz.

IdentityProvider.close();

Kullanıcı, pop-up'ta bir nedenle hesabını değiştirdiyse (örneğin, kimlik sağlayıcı "kullanıcıyı değiştir" işlevi sunuyorsa veya yetkilendirme durumlarında) resolve çağrısı, aşağıdaki gibi bir şeye izin veren isteğe bağlı ikinci bir bağımsız değişken alır:

IdentityProvider.resolve(token, {accountId: '1234');

Parameters API

Parameters API, RP'nin kimlik beyanı uç noktasına ek parametreler sağlamasına olanak tanır. RP'ler, Temel oturum açma dışındaki kaynaklar için izin istemek amacıyla Parameters API ile kimlik sağlayıcıya ek parametreler iletebilir. Kullanıcı, Continuation API üzerinden başlatılan, IdP tarafından kontrol edilen bir kullanıcı deneyimi akışı aracılığıyla bu izinleri yetkilendirir.

API'yi kullanmak için navigator.credentials.get() çağrısında params mülküne nesne olarak parametreler ekleyin.

let {token} = await navigator.credentials.get({
  identity: {
    providers: [{
      clientId: '1234',
      configURL: 'https://idp.example/fedcm.json',
      // Key/value pairs that need to be passed from the
      // RP to the IdP but that don't really play any role with
      // the browser.
      params: {
        IDP_SPECIFIC_PARAM: '1',
        foo: 'BAR',
        ETC: 'MOAR',
        scope: 'calendar.readonly photos.write',
      }
    },
  }
});

params nesnesinde param_ önek olarak eklenir. Yukarıdaki örnekte, params mülkü '1' olarak IDP_SPECIFIC_PARAM, 'BAR' olarak foo, 'MOAR' olarak ETC ve 'calendar.readonly photos.write' olarak scope içeriyor. Bu, isteğin HTTP gövdesinde param_IDP_SPECIFIC_PARAM=1&param_foo=BAR&param_ETC=MOAR&param_scope=calendar.readonly%20photos.write olarak çevrilir:

POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity

account_id=123&client_id=client1234&nonce=234234&disclosure_text_shown=false&param_IDP_SPECIFIC_PARAM=1&param_foo=BAR&param_ETC=MOAR&param_scope=calendar.readonly%20photos.write

İzinleri dinamik olarak alma

Genel olarak, kullanıcılar için izinlerin geliştiricinin uygulamanın en kolay olduğunu düşündüğü zamandan ziyade ihtiyaç duyulduğunda istenmesi en yararlı olanıdır. Örneğin, kullanıcı web sitesine ulaştığı anda izin istemek yerine, fotoğraf çekmek üzereyken kameraya erişim izni istemek tercih edilir. Aynı uygulama sunucu kaynakları için de geçerlidir. İzinleri yalnızca kullanıcı için gerekli olduğunda isteyin. Buna "dinamik yetkilendirme" denir.

FedCM ile dinamik olarak yetkilendirme isteğinde bulunmak için kimlik sağlayıcı şunları yapabilir:

  1. navigator.credentials.get() çağrısını, kimlik sağlayıcının anlayabileceği gerekli parametrelerle (ör. scope) çağırın.
  2. Kimlik beyanı uç noktası, kullanıcının zaten oturum açtığını onaylar ve continue_on URL'si ile yanıt verir.
  3. Tarayıcı, istenen kapsamlarla eşleşen ek izin isteyen kimlik sağlayıcının izin sayfasını içeren bir pop-up pencere açar.
  4. IdP tarafından IdentityProvider.resolve() aracılığıyla yetkilendirildikten sonra pencere kapatılır ve RP'nin orijinal navigator.credentials.get() çağrısı, RP'nin uygun bir erişim jetonuyla değiştirebilmesi için alakalı bir jeton veya yetkilendirme kodu alır.

Fields API

Fields API, tarayıcı FedCM iletişim kutusunda uygun bir açıklama kullanıcı arayüzü oluşturabilmesi için RP'nin kimlik sağlayıcıdan isteyecek hesap özelliklerini belirtmesine olanak tanır. İstenen alanları döndürülen jetona dahil etmek kimlik sağlayıcının sorumluluğundadır. Bunu OpenID Connect'te "temel profil" istemek ve OAuth'ta "kapsamlar" istemek olarak düşünebilirsiniz.

Widget modundaki açıklama mesajı.
Widget modundaki bilgilendirme mesajı.
Düğme modundaki açıklama mesajı.
Düğme modunda açıklama mesajı.

Fields API'yi kullanmak için navigator.credentials.get() çağrısında fields mülküne parametreleri dizi olarak ekleyin. Alanlar şu anda 'name', 'email' ve 'picture' içerebilir ancak gelecekte daha fazla değer içerecek şekilde genişletilebilir.

fields içeren bir istek şöyle görünür:

let { token } = await navigator.credentials.get({
  identity: {
    providers: [{
      fields: ['name', 'email', 'picture'],
      clientId: '1234',
      configURL: 'https://idp.example/fedcm.json',
      params: {
        scope: 'drive.readonly calendar.readonly',
      }
    },
  }
  mediation: 'optional',
});

Kimlik beyanı uç noktasına gönderilen HTTP isteği, RP tarafından belirtilen fields parametresini içerir. Bu parametre, geri gelen bir kullanıcı değilse disclosure_text_shown parametresi true olarak ayarlanır ve tarayıcı tarafından kullanıcıya açıklanan alanları bir disclosure_shown_for parametresinde içerir:

POST /id_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity

account_id=123&client_id=client1234&nonce=234234&disclosure_text_shown=true&fields=email,name,picture&disclosure_shown_for=email,name,picture

RP'nin, kimlik sağlayıcıdaki ek verilere (ör. takvime erişim) erişmesi gerekiyorsa bu, yukarıda belirtildiği gibi özel bir parametreyle ele alınmalıdır. IdP, izin istemek için bir continue_on URL döndürür.

fields boş bir diziyse istek şöyle görünür:

let { token } = await navigator.credentials.get({
  identity: {
    providers: [{
      fields: [],
      clientId: '1234',
      configURL: 'https://idp.example/fedcm.json',
      params: {
        scope: 'drive.readonly calendar.readonly',
      }
    },
  }
  mediation: 'optional',
});

fields boş bir diziyse kullanıcı aracısı, açıklama kullanıcı arayüzünü atlar.

Açıklama mesajı widget modunda gösterilmez. Düğme akışında, açıklama kullanıcı arayüzü tamamen atlanır.
Açıklama mesajı widget modunda gösterilmiyor. Düğme akışında, açıklama kullanıcı arayüzü tamamen atlanıyor.

Bu durum, accounts uç noktasından gelen yanıt approved_clients'deki RP ile eşleşen bir istemci kimliği içermese bile geçerlidir.

Bu durumda, kimlik beyanı uç noktasına gönderilen disclosure_text_shown, HTTP gövdesinde yanlıştır:

POST /id_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity

account_id=123&client_id=client1234&nonce=234234&disclosure_text_shown=false

Birden fazla configURL

Birden fazla configURL, IdP'lerin well-known dosyasında accounts_endpoint ve login_url parametrelerini yapılandırma dosyalarıyla aynı şekilde belirterek bir IdP için birden fazla yapılandırma dosyası kullanmasına olanak tanır.

accounts_endpoint ve login_url, well-known dosyasına eklenirse IdP'nin birden fazla yapılandırma dosyasını destekleyebilmesi için provider_urls yoksayılır. Aksi takdirde, geriye dönük uyumlu olması için provider_urls geçerli olmaya devam eder.

Birden çok configURL'yi destekleyen .well-known dosyası şu şekilde görünebilir:

{
  "provider_urls": [ "https://idp.example/fedcm.json" ],
  "accounts_endpoint": "https://idp.example/accounts",
  "login_url": "https://idp.example/login"
}

Bu sayede:

  1. Bilinen mevcut dosyalarla ve kullanımda olan tarayıcıların önceki sürümleriyle geriye ve ileriye dönük uyumluluğu koruma
  2. İstediğiniz sayıda yapılandırma dosyası olabilir. Ancak tüm bu dosyalar aynı accounts_endpoint ve login_url değerlerini göstermelidir.
  3. ".well-known" düzeyinde belirtilmesi gerektiğinden, accounts_endpoint adresine yapılan kimlik bilgisi getirme isteğine entropi eklenemez.

Birden fazla configURL desteklemek isteğe bağlıdır ve mevcut FedCM uygulamaları aynı kalabilir.

Özel Hesap Etiketleri

Özel hesap etiketleri, FedCM kimlik sağlayıcılarının hesapları notlandırmasına olanak tanır. Böylece, RP'ler bir yapılandırma dosyasında etiketi belirterek hesapları filtreleyebilir. Benzer filtreleme, navigator.credentials.get() çağrısında Domain Hint API ve Login Hint API'yi belirterek mümkün olmuştur. Ancak özel hesap etiketleri, yapılandırma dosyasını belirterek kullanıcıları filtreleyebilir. Bu özellikle birden fazla configURL kullanıldığında faydalıdır. Özel hesap etiketleri, giriş veya alan adı ipuçları gibi RP'den değil, IdP sunucusundan sağlandığı için de farklıdır.

Örnek

Bir kimlik sağlayıcı, sırasıyla tüketici ve kurumsal için iki configURL'yi destekler. Tüketici yapılandırma dosyasında 'consumer' etiketi, kurumsal yapılandırma dosyasında ise 'enterprise' etiketi bulunur.

Bu tür bir kurulumda, .well-known dosyası birden fazla configURL'ye izin vermek için accounts_endpoint ve login_url içerir.

{
  "provider_urls": [ "https://idp.example/fedcm.json" ],
  "accounts_endpoint": "https://idp.example/accounts",
  "login_url": "https://idp.example/login"
}

accounts_endpoint, well-known dosyasında sağlandığında provider_urls yoksayılır. RP, navigator.credentials.get() çağrısında doğrudan ilgili yapılandırma dosyalarını işaret edebilir.

Tüketici yapılandırma dosyası https://idp.example/fedcm.json adresindedir ve include kullanarak 'consumer' değerini belirten accounts özelliğini içerir.

{
  "accounts_endpoint": "https://idp.example/accounts",
  "client_metadata_endpoint": "/client_metadata",
  "login_url": "https://idp.example/login",
  "id_assertion_endpoint": "/assertion",
  "accounts": {
    "include": "consumer"
  }
}

Kuruluş yapılandırma dosyası https://idp.example/enterprise/fedcm.json adresindedir. Bu dosya, include kullanarak 'enterprise' değerini belirten accounts özelliğini içerir.

{
  "accounts_endpoint": "https://idp.example/accounts",
  "client_metadata_endpoint": "/enterprise/client_metadata",
  "login_url": "https://idp.example/login",
  "id_assertion_endpoint": "/assertion",
  "accounts": {
    "include": "enterprise"
  }
}

Ortak kimlik sağlayıcı hesaplar uç noktası (bu örnekte https://idp.example/accounts), her hesap için bir dizi içinde atanan labels içeren bir etiketler mülkü içeren hesapların listesini döndürür. Aşağıda, iki hesabı olan bir kullanıcı için örnek bir yanıt verilmiştir. Biri tüketiciler, diğeri ise kuruluşlar içindir:

{
 "accounts": [{
   "id": "123",
   "given_name": "John",
   "name": "John Doe",
   "email": "john_doe@idp.example",
   "picture": "https://idp.example/profile/123",
   "labels": ["consumer"]
  }], [{
   "id": "4567",
   "given_name": "Jane",
   "name": "Jane Doe",
   "email": "jane_doe@idp.example",
   "picture": "https://idp.example/profile/4567",
   "labels": ["enterprise"]
  }]
}

Bir RP, 'enterprise' kullanıcılarının oturum açmasına izin vermek istediğinde navigator.credentials.get() çağrısında 'enterprise' configURL 'https://idp.example/enterprise/fedcm.json' değerini belirtebilir:

let { token } = await navigator.credentials.get({
  identity: {
    providers: [{
      clientId: '1234',
      nonce: '234234',
      configURL: 'https://idp.example/enterprise/fedcm.json',
    },
  }
});

Sonuç olarak, kullanıcının oturum açması için yalnızca '4567' hesabının kimliği kullanılabilir. Kullanıcıya bu sitedeki kimlik sağlayıcı tarafından desteklenmeyen bir hesap sunulmaması için '123' kimlikli hesap, tarayıcı tarafından sessizce gizlenir.

Kaynak denemesi: Storage Access API için güven sinyali olarak FedCM

Chrome 126'ta, Depolama Aksesuarı API'si için güven sinyali olarak FedCM kaynak denemesi başlatılıyor. Bu değişiklikle birlikte, FedCM aracılığıyla önceden izin verilmesi, Storage Access API'leri tarafından depolama alanı erişim isteğinin otomatik olarak onaylanmasına yönelik geçerli bir neden haline gelir.

Bu, yerleştirilmiş bir iframe kişiselleştirilmiş kaynaklara erişmek istediğinde kullanışlıdır. Örneğin, idp.example rp.example'e yerleştirilmişse ve kişiselleştirilmiş bir kaynak göstermesi gerekiyorsa. Tarayıcı, üçüncü taraf çerezlerine erişimi kısıtlıyorsa kullanıcı FedCM ile idp.example'i kullanarak rp.example'de oturum açmış olsa bile, istekler üçüncü taraf çerezlerini içermediğinden yerleşik idp.example iFrame'si kişiselleştirilmiş kaynaklar isteyemez.

Bunu yapmak için idp.example'in web sitesine yerleştirilmiş iFrame'i aracılığıyla depolama erişimi izni alması gerekir. Bu izin yalnızca bir izin istemi aracılığıyla alınabilir.

Depolama Erişim API'si için güven sinyali olarak FedCM kullanıldığında, Depolama Erişim API'si izin kontrolleri yalnızca depolama erişimi istemi tarafından verilen izin verme işlemini değil, FedCM istemi tarafından verilen izin verme işlemini de kabul eder.

// In top-level rp.example:

// Ensure FedCM permission has been granted.
const cred = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: 'https://idp.example/fedcm.json',
      clientId: '123',
    }],
  },
  mediation: 'optional',
});

// In an embedded IdP iframe:

// No user gesture is needed to call this, and the call will be auto-granted.
await document.requestStorageAccess();

// This returns `true`.
const hasAccess = await document.hasStorageAccess();

Kullanıcı FedCM ile oturum açtıktan sonra, FedCM kimlik doğrulaması etkin olduğu sürece izin otomatik olarak verilir. Bu, kullanıcının bağlantısı kesildikten sonra izin isteğinde bulunulduğunda bir istem gösterileceği anlamına gelir.

Kaynak denemesine katılma

Chrome 126 veya sonraki sürümlerde bir Chrome işaretini chrome://flags#fedcm-authz etkinleştirerek FedCM Continuation API paketini yerel olarak deneyebilirsiniz. Ayrıca, Chrome 126 veya sonraki sürümlerde #fedcm-with-storage-access-api'ü etkinleştirerek Storage Access API için yerel bir güven sinyali olarak FedCM'yi de deneyebilirsiniz.

Bu özellikler, kaynak denemeleri olarak da kullanılabilir. Kaynak denemeleri, yeni özellikleri denemenize ve kullanılabilirlikleri, pratiklikleri ve etkililikleri hakkında geri bildirim vermenize olanak tanır. Daha fazla bilgi için Kaynak denemelerini kullanmaya başlama başlıklı makaleyi inceleyin.

FedCM Continuation API bundle origin deneme sürümünü denemek için iki kaynak deneme jetonu oluşturun:

Düğme akışıyla birlikte Devam API'yi etkinleştirmek istiyorsanız Düğme Modu API kaynağı deneme sürümünü de etkinleştirin:

Storage Access API kaynak denemesi için güven sinyali olarak FedCM'yi denemek üzere:

Continuation API paketi kaynak denemesi ve Storage Access API kaynak denemesi için güven sinyali olarak FedCM, Chrome 126'dan itibaren kullanılabilir.

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

  1. Kaynak deneme sürümü kayıt sayfasına gidin.
  2. 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şlemeyi kontrol edin.
  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 JavaScript kitaplığına veya kimlik sağlayıcının kaynağından sunulan SDK'ya 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.