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'si
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¶m_foo=BAR¶m_ETC=MOAR¶m_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¶m_IDP_SPECIFIC_PARAM=1¶m_foo=BAR¶m_ETC=MOAR¶m_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 ilknavigator.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.
![Widget modunda açıklama mesajı.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-126-with-disclosure-widget.jpg?authuser=9&hl=tr)
![Düğme modunda açıklama mesajı.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-126-with-disclosure-button.jpg?authuser=9&hl=tr)
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.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-126-without-disclosure-widget.jpg?authuser=9&hl=tr)
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
velogin_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.