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

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

Eiji Kitamura

Geliştiriciler, Chrome 126'dan itibaren birçok erişim sağlayan masaüstü Federated Credential Management API (FedCM) Yetkilendirme kullanım alanları. Paket, Continuation API ve OAuth yetkilendirme akışı benzeri bir deneyim sağlayan Parameters API Kimlik Sağlayıcı (IdP) tarafından sağlanan izin iletişim kutusu da dahil. Paket ayrıca Fields API, Multiple configURLs ve Custom gibi diğer değişiklikleri içerir Hesap Etiketleri. Ayrıca Chrome 126'dan itibaren Kullanıcının aşağıdaki durumlarda SAA isteklerini otomatik olarak veren Storage Access API (SAA) geçmişte FedCM'yi kullanarak başarıyla giriş yaptı.

Kaynak Deneme: FedCM Continuation API paketi

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

Continuation API
Parameters API
Fields API
Birden çok configURL
Özel Hesap Etiketleri

Continuation API'si

Kullanıcı, kısıtlanmış taraf hesabında oturum açıyor ve ardından düğme moduyla yetkilendiriyor.

Glitch'te API demosuna göz atabilirsiniz.

Continuation API, IdP'nin kimlik onayı uç nokta'yı isteğe bağlı olarak, kullanıcının bir web sitesine devam etmesine izin vermek için FedCM'nin oluşturacağı bir URL'yi çok adımlı oturum açma akışı. Bu işlem, IdP'nin kullanıcıdan mevcut FedCM kullanıcı arayüzünde mümkün olanın ötesinde bağlı taraf (RP) izinleri, örneğin, kullanıcının sunucu tarafı kaynaklarına erişim gibi.

Genellikle kimlik onayı uç noktası, kimlik doğrulama.

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

Ancak Continuation API'de ID onayı uç nokta mutlak yol veya göreli yol içeren bir continue_on özelliği döndürür kimlik onayı uç noktasının yolu.

{
  // 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şimde bulunduktan sonra (örneğin, daha fazla izin vermek) Kısıtlanmış taraf ile ek bilgi paylaşmak için IdP sayfası Orijinali çözümlemek için IdentityProvider.resolve() navigator.credentials.get() çağrısı ve bağımsız değişken olarak bir jeton döndürür.

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);
});

Ardından tarayıcı pop-up'ı kendiliğinden kapatır ve jetonu API'ye döndürür. arayan

Kullanıcı isteği reddederse şunu çağırarak pencereyi kapatabilirsiniz: IdentityProvider.close()

IdentityProvider.close();

Herhangi bir nedenle kullanıcı pop-up'ta hesabını değiştirdiyse (örneğin, IdP, "kullanıcı değiştir" seçeneğini sunuyor RACI matrisi üzerinde yapılan değişiklikler) çağrısı, isteğe bağlı ikinci bir bağımsız değişkene izin veren bir şekilde şunun gibi bir şey alır:

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

Parametreler API'si

Parameters API, Kısıtlanmış Taraf'a izin verir. Kimlik onayına ek parametreler sağlamak için uç nokta. Parametreler API'si ile RP'ler, aşağıdaki işlemler için IdP'ye ek parametreler geçirebilir: temel oturum açmanın dışındaki kaynaklar için izin isteme Kullanıcı, Bu izinleri, Continuation API.

API'yi kullanmak için params özelliğine navigator.credentials.get() sesli arama.

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 nesnesindeki özellik adlarının başına param_ eklenir. yukarıdaki örnekte, params özelliği '1', foo olarak IDP_SPECIFIC_PARAM değerini içerir 'BAR', 'MOAR' olarak ETC ve 'calendar.readonly photos.write' olarak scope. Bu, şu şekilde çevrilecek: param_IDP_SPECIFIC_PARAM=1&param_foo=BAR&param_ETC=MOAR&param_scope=calendar.readonly%20photos.write. ifadesini girin:

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ınızın izin istemesi durumunda, uygulama geliştirmenin en kolay olduğuna inandığı durumlar yerine, Örneğin, Örneğin, kullanıcı az önce görüntü almak üzereyken kameraya erişim izni isteme kullanıcı sayfaya geldikten hemen sonra izin isteme web sitesi. Aynı uygulama sunucu kaynakları için de geçerlidir. Yalnızca izin iste yanıt verebiliyorum. Buna "dinamik yetkilendirme" adı verilir.

FedCM ile dinamik bir şekilde yetkilendirme istemek için IdP şunları yapabilir:

IdP'nin yapabileceği gerekli parametreleri kullanarak navigator.credentials.get() adlı kişiyi çağırın (ör. scope) ifade eder.
Kimlik onayı uç nokta kullanıcının zaten oturum açmış olduğunu onaylar ve continue_on URL'si ile yanıt verir.
Tarayıcı, IdP'nin izin sayfasında şunların sorulduğu bir pop-up pencere açar: İstenen kapsamlarla eşleşen ek izin.
IdentityProvider.resolve() aracılığıyla IdP tarafından yetkilendirildikten sonra, pencere Kısıtlanmış tarafın ilk navigator.credentials.get() görüşmesi Kısıtlanmış Taraf'ın bunu bir üçüncü taraf platformuyla takas edebilmesi için ilgili jeton doğru erişim jetonu.

Alanlar API'sı

Fields API, Kısıtlanmış Taraf'ın şunları yapmasına olanak tanır: Tarayıcının şunları yapabilmesi için, IdP'den istekte bulunacak hesap özelliklerini bildirmeniz gerekir: FedCM iletişim kutusunda uygun bir açıklama kullanıcı arayüzü oluşturmalıdır; IdP'nin sorumluluğundadır. istenen alanları döndürülen jetona ekleyin. Bunu göz önünde bulundurun "temel profil" ve "kapsamlar"ın karşılaştırması OAuth'ta devreye girin.

ziyaret edin.

Fields API'yi kullanmak için fields özelliğine navigator.credentials.get() sesli arama. Alanlar 'name', 'email' içerebilir ve 'picture' şimdilik ancak genişletilebilir. duymuş olabilirsiniz.

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

ID onayına yönelik HTTP isteği uç nokta RP tarafından belirtilen fields parametresini içerir ve disclosure_text_shown parametresini true olarak ayarlayacağız. Bu parametre geri gelen kullanıcı değilse kullanıcıya disclosure_shown_for parametresinde açıklanan tarayıcı:

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

Kısıtlanmış taraf, IdP'den alınan ek verilere (ör. bu işlem, yukarıda belirtildiği gibi özel bir parametreyle gerçekleştirilmelidir. İlgili içeriği oluşturmak için kullanılan IdP, izin istemek için bir continue_on URL'si 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österilmiyor. Düğme akışında, açıklama kullanıcı arayüzü tamamen atlanır. — Widget modunda açıklama mesajı gösterilmiyor. Düğme akışında, açıklama kullanıcı arayüzü tamamen atlanır.

Bu durum, hesaplarından gelen yanıt uç nokta approved_clients içindeki Kısıtlanmış Taraf ile eşleşen bir istemci kimliği içermiyor.

Bu durumda, disclosure_text_shown kimlik onayına gönderilir uç nokta false (yanlış) değerini alı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 çok configURL

Birden fazla configURL, IdP'lere izin veriyor bir IdP'ye ilişkin birden çok yapılandırma dosyasını barındırmak için tanınmış bölgede accounts_endpoint ve login_url aynı dosyayı olarak belirleyin.

accounts_endpoint ve login_url bilinen dosyaya eklenirse IdP'nin birden fazla yapılandırma dosyasını destekleyebilmesi için provider_urls yoksayılır. Aynı değillerse provider_urls geriye dönük olarak geçerli olmaya devam eder. uyumlu olmalıdır.

Birden fazla configURL'yi destekleyen iyi bilinen bir dosya şöyle görünebilir:

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

Bu sayede:

İyi bilinen mevcut dosyalarla geriye ve ileriye dönük uyumluluğu koruma ve zaten kullanıma hazır halde olan tarayıcıların önceki sürümleri de dahil edilir.
İsteğe bağlı sayıda yapılandırma dosyasına sahip olun (hepleri aynı accounts_endpoint ve login_url.
Kimlik bilgisi içeren getirme isteğine entropi ekleme fırsatı yok Zira accounts_endpoint için geçerlidir, çünkü bunun ".iyi-bilinen" seviyesinde olmalıdır.

Birden fazla configURL'nin desteklenmesi isteğe bağlıdır. Mevcut FedCM aynı kalabilir.

Özel Hesap Etiketleri

Özel Hesap Etiketleri, FedCM'ye izin verir. IdP'lerin hesaplara ek açıklama eklemesini sağlar. Böylece, RP'ler ilgili etiketi yapılandırma dosyasıdır. Alan İpucunu kullanılarak benzer filtreleme mümkün olmuştur. API ve Login İpucu API'si şu şekildedir: bunları navigator.credentials.get() çağrısında görebilirsiniz, ancak Özel Hesap Etiketleri yapılandırma dosyasını belirterek kullanıcıları filtreleyebilirsiniz. Bu, özellikle birden fazla configURL kullanıldığında. Özel Hesap Etiketleri: IdP sunucusundan sağlanmaları açısından da RP (ör. giriş veya alan ipuçları)

Örnek

Bir IdP, sırasıyla tüketici ve kuruluş için iki configURL'yi destekler. İlgili içeriği oluşturmak için kullanılan tüketici yapılandırma dosyasında 'consumer' etiketi ve kurumsal yapılandırma dosyası var 'enterprise' etiketine sahip.

Bu tür bir kurulumla, iyi bilinen dosyada accounts_endpoint ve Birden fazla configURL'ye izin vermek için login_url.

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

İyi bilinen dosyada accounts_endpoint sağlandığında provider_urls yok sayıldı. Kısıtlanmış taraf doğrudan ilgili yapılandırmayı işaret edebilir navigator.credentials.get() görüşmesindeki dosyalar.

Tüketici yapılandırma dosyası https://idp.example/fedcm.json adresinde. include kullanan 'consumer' öğesini belirten accounts özelliği.

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

Kurumsal yapılandırma dosyası https://idp.example/enterprise/fedcm.json adresinde. accounts özelliğini içeren 'enterprise' include.

{
  "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"
  }
}

Yaygın IdP hesapları uç nokta (bu örnekte https://idp.example/accounts), her hesap için bir dizide labels atanmış bir etiket özelliği içerir. Aşağıda, iki hesabı olan bir kullanıcı için örnek bir yanıt verilmiştir. Birincisi, tüketicilere, diğeri ise kurumsal işletmelere yöneliktir:

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

Kısıtlanmış taraf, 'enterprise' kullanıcılarının oturum açmasına izin vermek istediğinde 'enterprise' configURL'si: 'https://idp.example/enterprise/fedcm.json' navigator.credentials.get() araması:

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

Sonuç olarak, kullanıcı yalnızca '4567' hesap kimliğini imzalayabilir inç '123' kuruluşunun hesap kimliği tarayıcı tarafından sessizce gizlenir. Böylece, bu sitede IdP tarafından desteklenmeyen bir hesap verilmeyecektir.

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

Chrome 126, Depolama Erişimi API. Entegre bu değişiklikten sonra, FedCM aracılığıyla önceden verilmiş bir izin, tarafından otomatik olarak onaylanır.Depolama Erişimi API'ler.

Bu özellik, yerleştirilmiş bir iFrame'in kişiselleştirilmiş kaynaklara erişmek istediği durumlarda kullanışlıdır: Örneğin, idp.example, rp.example içine yerleştirilmişse ve kişiselleştirilmiş bir kaynaktır. Tarayıcı, üçüncü taraf çerezlerine erişimi kısıtlarsa kullanıcı FedCM ile idp.example kullanarak rp.example'da oturum açmış olsa bile yerleştirilmiş idp.example iframe, kişiselleştirilmiş kaynaklar isteyemez Çünkü istekler üçüncü taraf çerezlerini içermez.

Bunun için idp.example projesinin, iframe'dir ve bu yalnızca bir tarayıcı üzerinden edinilebilir. tıklayın.

Depolama Alanı Erişimi için güven sinyali olarak FedCM API Storage Access API izin kontrolleri yalnızca hem depolama alanı erişim istemi tarafından hem de FedCM istemi.

// 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'de oturum açtıktan sonra FedCM kimlik doğrulaması etkin. Bu, kullanıcının bağlantısı kesildiğinde bir istem görüntülenir.

Kaynak denemesine katılın

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

Bu özellikler kaynak denemeleri olarak da kullanılabilir. Kaynak denemeleri; yeni özellikleri deneyip kullanılabilirlik, pratik ve etkililik konularında geri bildirimde bulunmanıza olanak tanır. Daha fazla bilgi için Kaynak denemelerini kullanmaya başlama başlıklı makaleye göz atın.

FedCM Continuation API paketi kaynağını denemek için deneme, iki kaynak deneme jetonu oluşturun:

Deneme sürümüne kaydolun. Jetonu IdP'ye yerleştirin kaynak.
Üçüncü taraf eşleştirme onay kutusu işaretli olarak kaynak denemesine kaydolun. Şuradaki talimatları uygulayın: Kısıtlanmış taraf'ı kullanabilirsiniz.

düğmeyle birlikte Continuation API'yi de etkinleştirmek isterseniz: akışı sağlandığında, Düğme Modu'nu API kaynağı deneme ayrıca:

Üçüncü taraf olarak kaynak denemesine kaydolmak. Şu adresteki talimatları uygulayın: Yerleştirilmesi için Kısıtlanmış Taraf için üçüncü taraf kaynak denemesi kaydettirme RP'nin jetonundan sorumludur.

FedCM'yi Storage Access API kaynağına ilişkin bir güven sinyali olarak denemek için Deneme sürümü:

Kaynak deneme sürümüne kaydolun. Jetonu IdP'ye yerleştirin kaynak.

The Continuation API paketi kaynak denemesi ve FedCM, Storage Access API kaynak denemesi Chrome 126'dan itibaren mevcuttur.

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

Kaynak deneme kaydı sayfasına gidin.
Kaydol düğmesini tıklayın ve jeton istemek için formu doldurun.
IdP'nin kaynağını Web Origin (Web Kaynağı) olarak girin.
Jetonu başka kaynaklara JavaScript ile eklemek için Üçüncü taraf eşleşmesini kontrol edin.
Gönder'i tıklayın.
Verilen jetonu üçüncü taraf bir web sitesine yerleştirin.

Jetonu üçüncü taraf bir web sitesine yerleştirmek için aşağıdaki kodu IdP'nin 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.