Birleşik Kimlik Bilgisi Yönetimi API'si geliştirici kılavuzu

Gizliliği korumaya yönelik kimlik federasyonu için FedCM'yi nasıl kullanacağınızı öğrenin.

FedCM (Birleşik Kimlik Bilgisi Yönetimi) gizliliği korumaya yönelik bir (ör. "... ile oturum aç" gibi) birleştirilmiş kimlik hizmetlerine Kullanıcılar, kişisel bilgilerini kimlik hizmeti veya site.

FedCM kullanım alanları, kullanıcı akışları ve API yol haritası hakkında daha fazla bilgi edinmek için şu sayfaya göz atın: ilk adımı FedCM API'de bulabilirsiniz.

FedCM geliştirme ortamı

Chrome'daki hem IdP hem de RP'de güvenli bir bağlama (HTTPS veya localhost) ihtiyacınız vardır FedCM'yi kullanıyor.

Android'de Chrome'da hata ayıklama kodu

FedCM kodunuzdaki hataları ayıklamak için yerel olarak bir sunucu oluşturup çalıştırın. Şunları yapabilirsiniz: bu sunucuya erişin bağlantı noktası olan USB kablosuyla bağlanmış bir Android cihazdaki Chrome'da ele alacağız.

Android'de Chrome'da hata ayıklamak için masaüstünde Geliştirici Araçları'nı kullanarak şu adımları izleyebilirsiniz: Android'de uzaktan hata ayıklama talimatları cihazlar.

Chrome'da üçüncü taraf çerezlerini engelle

Chrome'u, üçüncü taraf çerezlerini engelleyecek şekilde yapılandırarak üçüncü taraf çerezlerinin kullanımdan kaldırılmasını simüle etme
Chrome'u üçüncü taraf çerezlerini engelleyecek şekilde yapılandırarak üçüncü taraf çerezlerinin kullanımdan kaldırılmasını simüle etme

Chrome'da üçüncü taraf çerezleri olmadan FedCM'nin nasıl çalıştığını test edebilirsiniz. zorunlu olduğunu düşünebilir.

Üçüncü taraf çerezlerini engellemek için Gizli moda gir modunda arayın veya "Engelle"yi üçüncü taraf çerezleri" chrome://settings/cookies adresinden veya şurada masaüstü ayarlarınızdan mobil cihazınızda Ayarlar'a gidin > Site ayarları > Çerezler.

FedCM API'yi kullanma

İyi bilinen bir dosya oluşturarak FedCM ile entegrasyon sağlayabilirsiniz. hesap için yapılandırma dosyası ve uç noktalar listesi, iddia verilmesi ve isteğe bağlı olarak istemci meta verilerini de kullanabilirsiniz.

FedCM, RP'lerin oturum açmak için kullanabileceği JavaScript API'lerini girin.

İyi bilinen bir dosya oluşturma

İzleyicilerin içeriğin bir defa API kullanıyorsanız iyi bilinen bir dosya şu fiyattan sunum yapıldı: /.well-known/web-identity Şu bilgilerin eTLD+1: IdP'yi seçin.

Örneğin, IdP uç noktaları https://accounts.idp.example/ kullanıyorsa https://idp.example/.well-known/web-identity ve IdP yapılandırması dosyası olduğundan emin olun. İyi bilinen bir dosya içeriği örneği:

{
  "provider_urls": ["https://accounts.idp.example/config.json"]
}

JSON dosyası, IdP dizisine sahip provider_urls özelliğini içermelidir. bir yapılandırma dosyası dosyasının yol parçası olarak belirtilebilecek navigator.credentials.get bölgesinde kısıtlanmış taraflara göre configURL. Kullanılan Dizideki URL dizeleri birle sınırlıdır, ancak bu dize ve geri bildirim almaktır.

IdP yapılandırma dosyası ve uç noktalar oluşturma

IdP yapılandırma dosyası, tarayıcı için gerekli uç noktaların listesini sağlar. IdPs bu yapılandırma dosyasını, gerekli uç noktaları ve URL'leri barındırır. Tüm JSON yanıtlar application/json içerik türüyle sunulmalıdır.

Yapılandırma dosyasının URL'si, Kısıtlanmış taraflı navigator.credentials.get araması yürütüldü.

const credential = await navigator.credentials.get({
  identity: {
    context: 'signup',
    providers: [{
      configURL: 'https://accounts.idp.example/config.json',
      clientId: '********',
      nonce: '******'
    }]
  }
});
const { token } = credential;

configURL olarak IdP yapılandırma dosyası konumunun tam URL'sini belirtin. Zaman Kısıtlanmış tarafta, tarayıcıda navigator.credentials.get() çağrılır yapılandırma dosyasını Origin başlığı veya GET isteğiyle Referer üstbilgisi. İstek çerez içermiyor ve yönlendirmeleri takip etmiyor. Bu işlem, IdP'nin istekte bulunan kişiyi ve istekte bulunan kullanıcıyı öğrenmesini etkili bir şekilde engeller Kısıtlanmış taraf bağlanmaya çalışıyor. Örneğin:

GET /config.json HTTP/1.1
Host: accounts.idp.example
Accept: application/json
Sec-Fetch-Dest: webidentity

Tarayıcı, IdP'den aşağıdaki bilgileri içeren bir JSON yanıtı bekler. özellikler:

Özellik Açıklama
accounts_endpoint (zorunlu) Hesaplar uç noktasının URL'si.
client_metadata_endpoint (isteğe bağlı) İstemci meta verisi uç noktasının URL'si.
id_assertion_endpoint (zorunlu) Kimlik onayı uç noktasının URL'si.
disconnect (isteğe bağlı) Bağlantıyı kesme uç noktasının URL'si.
login_url (zorunlu) Kullanıcının IdP'de oturum açmak için kullanacağı giriş sayfası URL'si.
branding (isteğe bağlı) Çeşitli markalama seçeneklerini içeren nesne.
branding.background_color (isteğe bağlı) "Şu adla devam et..." öğesinin arka plan rengini belirleyen markalama seçeneği düğmesini tıklayın. Alakalı CSS söz dizimini kullanın. hex-color hsl(), rgb() veya named-color
branding.color (isteğe bağlı) "Şu adla devam et..." öğesinin metin rengini belirleyen markalama seçeneği düğmesini tıklayın. Alakalı CSS söz dizimini kullanın. hex-color hsl(), rgb() veya named-color
branding.icons (isteğe bağlı) Simge nesnesini ayarlayan ve oturum açma iletişim kutusunda görüntülenen markalama seçeneği. Simge nesnesi, iki parametreli bir dizidir:
  • url (gerekli): Simge resminin URL'si. Bu, SVG resimleri desteklemez.
  • size (isteğe bağlı): Uygulamanın kare ve tek çözünürlüklü olduğu varsayılan simge boyutları. Bu sayı en az 25 olmalıdır.

Kısıtlanmış taraf, FedCM iletişim kutusundaki kullanıcı arayüzünde identity.context değeri aracılığıyla dizeyi değiştirebilir. Önceden tanımlanmış kimlik doğrulamasını gerçekleştirmek üzere navigator.credentials.get() için bağlamlar. İsteğe bağlı özellik şunlardan biri olabilir: "signin" (varsayılan), "signup", "use" veya "continue".

Markalama, FedCM iletişim kutusuna nasıl uygulanır?
Marka bilinci oluşturma, FedCM iletişim kutusuna nasıl uygulanır?

Aşağıda, IdP'den alınan örnek bir yanıt gövdesi verilmiştir:

{
  "accounts_endpoint": "/accounts.php",
  "client_metadata_endpoint": "/client_metadata.php",
  "id_assertion_endpoint": "/assertion.php",
  "disconnect_endpoint": "/disconnect.php",
  "login_url": "/login",
  "branding": {
    "background_color": "green",
    "color": "#FFEEAA",
    "icons": [{
      "url": "https://idp.example/icon.ico",
      "size": 25
    }]
  }
}

Tarayıcı yapılandırma dosyasını aldıktan sonra, sonraki istekleri IdP uç noktaları:

IdP uç noktaları
IdP uç noktaları

Hesaplar uç noktası

IdP'nin hesaplar uç noktası, kullanıcının şu anda IdP'de oturum açmış durumda. IdP birden fazla hesabı destekliyorsa uç nokta, oturum açılmış tüm hesapları döndürür.

Tarayıcı, SameSite=None çerezleriyle birlikte bir GET isteği gönderir, ancak bu istek olmadan bir client_id parametresi, Origin veya Referer üstbilgisi. Bu IdP'nin, kullanıcının hangi kısıtlanmış taraf'ı imzalamaya çalıştığını öğrenmesini etkili bir şekilde engeller inceleyebilirsiniz. Örneğin:

GET /accounts.php HTTP/1.1
Host: accounts.idp.example
Accept: application/json
Cookie: 0x23223
Sec-Fetch-Dest: webidentity

İsteği aldıktan sonra sunucu şunları yapmalıdır:

  1. İsteğin bir Sec-Fetch-Dest: webidentity HTTP başlığı içerdiğini doğrulayın.
  2. Oturum çerezlerini halihazırda oturum açmış hesapların kimlikleriyle eşleştirin.
  3. Hesap listesiyle yanıt verin.

Tarayıcı, accounts özelliği içeren bir JSON yanıtı bekliyor aşağıdaki mülklere sahip bir dizi hesap bilgisi içerir:

Özellik Açıklama
id (zorunlu) Kullanıcının benzersiz kimliği.
name (zorunlu) Kullanıcının adı ve soyadı.
email (zorunlu) Kullanıcının e-posta adresi.
given_name (isteğe bağlı) Kullanıcının adı.
picture (isteğe bağlı) Kullanıcı avatarı resminin URL'si.
approved_clients (isteğe bağlı) Kullanıcının kaydolduğu bir RP istemci kimliği dizisi.
login_hints (isteğe bağlı) IdP'nin belirtmek için desteklediği tüm olası filtre türlerini içeren dizi bir hesap oluşturabilirsiniz. Kısıtlanmış taraf, navigator.credentials.get() öğesini çağırabilir. loginHint özelliği ile belirtilen hesabı seçerek gösterebilir.
domain_hints (isteğe bağlı) Hesabın ilişkili olduğu tüm alan adlarının bir dizisi. Kısıtlanmış taraf, navigator.credentials.get() adlı kişiye şu çağrıyı yap: domainHint özelliğini kullanarak hesaplar.

Örnek yanıt gövdesi:

{
  "accounts": [{
    "id": "1234",
    "given_name": "John",
    "name": "John Doe",
    "email": "john_doe@idp.example",
    "picture": "https://idp.example/profile/123",
    "approved_clients": ["123", "456", "789"],
    "login_hints": ["demo1", "demo1@idp.example"]
  }, {
    "id": "5678",
    "given_name": "Johnny",
    "name": "Johnny",
    "email": "johnny@idp.example",
    "picture": "https://idp.example/profile/456",
    "approved_clients": ["abc", "def", "ghi"],
    "login_hints": ["demo2", "demo2@idp.example"],
    "domain_hints": ["corp.example"]
  }]
}

Kullanıcı oturum açmamışsa HTTP 401 (Yetkilendirilmemiş) ile yanıt verin.

Döndürülen hesaplar listesi tarayıcı tarafından kullanılır ve RP.

İstemci meta verisi uç noktası

IdP'nin istemci meta verisi uç noktası, bağımlı tarafın meta verilerini (ör. Kısıtlanmış Taraf'ın gizlilik politikası ve hizmet şartları. Kısıtlanmış taraf, belirli bir hedefe ve hizmet şartlarını IdP'ye önceden bildirmesini isteyin. Bu bağlantılar Kullanıcı Kısıtlanmış Taraf'a kaydolmadığında oturum açma iletişim kutusunda görüntülenir. emin olun.

Tarayıcı, client_id kullanarak bir GET isteği gönderir navigator.credentials.get çerez içermeyen. Örneğin:

GET /client_metadata.php?client_id=1234 HTTP/1.1
Host: accounts.idp.example
Origin: https://rp.example/
Accept: application/json
Sec-Fetch-Dest: webidentity

İsteği aldıktan sonra sunucu şunları yapmalıdır:

  1. client_id için Kısıtlanmış Taraf'ı belirleyin.
  2. Müşteri meta verileriyle yanıt verin.

İstemci meta veri uç noktasının özellikleri şunlardır:

Özellik Açıklama
privacy_policy_url (isteğe bağlı) Kısıtlanmış taraf gizlilik politikası URL'si.
terms_of_service_url (isteğe bağlı) Kısıtlanmış taraf hizmet şartları URL'si.

Tarayıcı, uç noktadan bir JSON yanıtı bekler:

{
  "privacy_policy_url": "https://rp.example/privacy_policy.html",
  "terms_of_service_url": "https://rp.example/terms_of_service.html",
}

Döndürülen istemci meta verileri tarayıcı tarafından kullanılır ve Kısıtlanmış taraf da kullanılabilir.

Kimlik onayı uç noktası

IdP'nin kimlik onayı uç noktası, oturum açmış olan kullanıcı için bir onay işlemi döndürür. Kullanıcı, navigator.credentials.get() kullanarak kısıtlanmış taraf web sitesinde oturum açtığında çağrısı, tarayıcı şunu içeren bir POST istek gönderir SameSite=None ve içerik türü olarak application/x-www-form-urlencoded şu bilgileri içeren bu uç noktayı:

Özellik Açıklama
client_id (zorunlu) Kısıtlanmış tarafın müşteri tanımlayıcısı.
account_id (zorunlu) Oturum açan kullanıcının benzersiz kimliği.
nonce (isteğe bağlı) Kısıtlanmış taraf tarafından sağlanan tek seferlik istek.
disclosure_text_shown Sonuçlar, "true" veya "false" dizesiyle (boole yerine) elde edilir. Açıklama metni gösterilmemişse sonuç "false" olur. Kısıtlanmış tarafın istemci kimliği, hesap uç noktasından gelen yanıtın approved_clients özellik listesine eklendiğinde veya tarayıcı geçmişte approved_clients yokken bir kayıt anı gözlemlediğinde bu durum gerçekleşir.
is_auto_selected Kısıtlanmış taraf üzerinde otomatik yeniden kimlik doğrulama gerçekleştirilirse is_auto_selected, "true" değerini belirtir. Diğer durumlarda "false". Bu, güvenlikle ilgili daha fazla özelliğin desteklenmesine yardımcı olur. Örneğin, bazı kullanıcılar kimlik doğrulamada açık kullanıcı uyumlulaştırması gerektiren daha yüksek bir güvenlik katmanını tercih edebilir. Bir IdP, böyle bir uyumlulaştırma olmadan jeton isteği alırsa isteği farklı şekilde işleyebilir. Örneğin, kısıtlanmış tarafın FedCM API'yi mediation: required ile tekrar çağırabileceği bir hata kodu döndürün.

Örnek HTTP üst bilgisi:

POST /assertion.php HTTP/1.1
Host: accounts.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=Ct60bD&disclosure_text_shown=true&is_auto_selected=true

İsteği aldıktan sonra sunucu şunları yapmalıdır:

  1. İsteğe CORS (Kaynaklar Arası Kaynak) ile yanıt verin Paylaşım).
  2. İsteğin bir Sec-Fetch-Dest: webidentity HTTP başlığı içerdiğini doğrulayın.
  3. Origin başlığını, client_id tarafından belirlenen RP kaynağıyla eşleştirin. Eşleşmiyorlarsa reddedin.
  4. account_id öğesini, halihazırda oturum açmış olan hesabın kimliğiyle eşleştirin. Şu durumda reddet: eşleşmiyorlar.
  5. Jeton kullanarak yanıt ver. İstek reddedilirse hata mesajıyla yanıt verin yanıt ekleyin.
ziyaret edin.

Jetonun nasıl verileceği IdP'ye bağlıdır ancak genellikle jeton Böylece, hesap kimliği, istemci kimliği, kartı veren kuruluşun kaynağı, nonce gibi bilgiler kısıtlanmış taraf, jetonun orijinal olduğunu doğrulayabilir.

Tarayıcı, aşağıdaki özelliği içeren bir JSON yanıtı bekler:

Özellik Açıklama
token (zorunlu) Jeton, kimlik doğrulamayla ilgili hak taleplerini içeren bir dizedir.
{
  "token": "***********"
}

Döndürülen jeton, kısıtlanmış tarafın (RP) tarafından kimlik doğrulamasını doğrulayabilirsiniz.

Hata yanıtı döndürme

id_assertion_endpoint da "hata" döndürebilir (isteğe bağlı iki alanı vardır):

  • code: IdP, OAuth 2.0'da bulunan bilinen hatalardan birini seçebilir. belirtilen hata liste (invalid_request, unauthorized_client, access_denied, server_error ve temporarily_unavailable) veya rastgele bir dize kullanın. İkinci durumda Chrome, hata kullanıcı arayüzünü genel bir hata mesajıyla oluşturur ve kodu RP'ye iletir.
  • url: hatasını döndürür. Bu alan Tarayıcılar bir tarayıcıda zengin hata iletileri sağlayamadığından, yerel kullanıcı arayüzü. Örneğin, sonraki adımlar, müşteri hizmetleri iletişim bilgileri için bağlantılar görüntüleyebilir ve kullanabilirsiniz. Kullanıcı hata ayrıntıları hakkında daha fazla bilgi edinmek isterse ve nasıl düzeltileceğini öğrenmek için, tarayıcı arayüzünde sağlanan sayfayı inceleyebilirsiniz. URL, IdP configURL ile aynı siteye ait olmalıdır.
// id_assertion_endpoint response
{
  "error" : {
     "code": "access_denied",
     "url" : "https://idp.example/error?type=access_denied"
  }
}

Uç noktanın bağlantısını kes

IdentityCredential.disconnect() çağrıldığında, tarayıcı bir çapraz kaynak gönderir SameSite=None ile çerezler ve içerik türü ile POST isteği application/x-www-form-urlencoded şu bilgileri bulabilirsiniz:

Özellik Açıklama
account_hint IdP hesabıyla ilgili bir ipucu.
client_id Kısıtlanmış tarafın müşteri tanımlayıcısı.
POST /disconnect.php HTTP/1.1
Host: idp.example
Origin: rp.example
Content-Type: application/x-www-form-urlencoded
Cookie: 0x123
Sec-Fetch-Dest: webidentity

account_hint=account456&client_id=rp123

İsteği aldıktan sonra sunucu şunları yapmalıdır:

  1. İsteğe CORS (Kaynaklar Arası Kaynak) ile yanıt verin Paylaşım).
  2. İsteğin bir Sec-Fetch-Dest: webidentity HTTP başlığı içerdiğini doğrulayın.
  3. Origin başlığını, client_id tarafından belirlenen RP kaynağıyla eşleştirin. Eşleşmiyorlarsa reddedin.
  4. account_hint öğesini, halihazırda oturum açmış durumdaki hesapların kimlikleriyle eşleştirin.
  5. Kullanıcı hesabının Kısıtlanmış Taraf ile bağlantısını kaldırın.
  6. Tanımlanmış kullanıcı hesabı bilgileriyle tarayıcıya JSON biçiminde yanıt verme biçimindedir.
ziyaret edin.

Örnek bir yanıt JSON yükü şu şekilde görünür:

{
  "account_id": "account456"
}

Bunun yerine IdP, tarayıcının herhangi bir hesap kimliğiyle eşleşmeyen bir dize (ör. "*") iletin.

Giriş URL'si

IdP, Login Status API (Giriş Durumu API'si) kullanıldığında kullanıcının durumunu kontrol edebilirsiniz. Ancak durum; örneğin, oturum sona erdiğinde. Böyle bir senaryoda tarayıcı, kullanıcının giriş sayfası üzerinden IdP'de oturum açmasına dinamik olarak izin verebilir idp yapılandırma dosyasının login_url ile belirtilen URL.

FedCM iletişim kutusunda, şurada gösterildiği gibi, oturum açmayı öneren bir mesaj görüntülenir: ekleyebilirsiniz.

A
IdP'de oturum açmanızı öneren bir FedCM iletişim kutusu.

Kullanıcı Devam düğmesini tıkladığında tarayıcı bir pop-up pencere açar. IdP'nin giriş sayfasına gidin.

An
IdP'de oturum açma düğmesi tıklandıktan sonra gösterilen örnek bir iletişim kutusu.
ziyaret edin.

İletişim kutusu, birinci taraf çerezlerine sahip normal bir tarayıcı penceresidir. Her neyse IdP'ye bağlıdır ve herhangi bir pencere tanıtıcısı kullanılamaz RP sayfasına erişim izni isteyebilir. Kullanıcı oturum açtığında IdP şunları yapmalıdır:

  • Set-Login: logged-in üstbilgisini gönderin veya navigator.login.setStatus("logged-in") API'sini kullanarak tarayıcıya kullanıcı oturum açtı.
  • İletişim kutusunu kapatmak için IdentityProvider.close() öğesini çağırın.
ziyaret edin.
A
Bir kullanıcı, FedCM'yi kullanarak IdP'de oturum açtıktan sonra Kısıtlanmış Taraf'ta oturum açıyor.

Tarayıcıyı, kullanıcının kimlik sağlayıcıdaki giriş durumu hakkında bilgilendirin

Login Status API (Giriş Durumu API'si), Bir web sitesi (özellikle de IdP) tarayıcıya kullanıcının giriş durumunu bildirir hesap oluşturabilirsiniz. Bu API ile tarayıcı, IdP'yi kullanarak zamanlamayla ilgili olası saldırıları azaltın.

IdP'ler, bir HTTP üstbilgisi göndererek kullanıcının giriş durumunu tarayıcıya bildirebilir veya kullanıcı IdP'de oturum açtığında veya kullanıcısının tüm IdP hesaplarındaki oturumu kapatılır. Her bir IdP (IdP) için yapılandırma URL'si) kullanıyorsa tarayıcı, giriş durumunu temsil eden bir üç durumlu değişken tutar olası değerlerle logged-in, logged-out ve unknown. Varsayılan durum unknown.

Kullanıcının oturum açtığını bildirmek için bir Set-Login: logged-in HTTP üst bilgisi gönderin üst düzey gezinme veya IdP'de aynı site alt kaynak isteğinde bulunma kaynak:

Set-Login: logged-in

Alternatif olarak, JavaScript API'sini navigator.login.setStatus("logged-in") çağırın seçeneğini belirleyin:

navigator.login.setStatus("logged-in")

Bu aramalar, kullanıcının giriş durumunu logged-in olarak kaydeder. Kullanıcı giriş yaptığında durum logged-in olarak ayarlanırsa RP araması FedCM, IdP'nin hesaplar uç noktası ile FedCM'de kullanılabilir hesapları gösterir iletişim kutusu.

Kullanıcının tüm hesaplarındaki oturumunun kapatıldığını bildirmek için üst düzey gezinme bölümünde veya aynı sitenin alt kaynağından Set-Login: logged-out HTTP üst bilgisi gönderin isteğini yerine getirir:

Set-Login: logged-out

Alternatif olarak, JavaScript API'sini navigator.login.setStatus("logged-out") çağırın seçeneğini belirleyin:

navigator.login.setStatus("logged-out")

Bu aramalar, kullanıcının giriş durumunu logged-out olarak kaydeder. Kullanıcı giriş durumu logged-out. FedCM, herhangi bir uyarı yapılmadan sessizce başarısız oluyor isteği gönderir.

unknown durumu, IdP Giriş Durumu'nu kullanarak sinyal göndermeden önce ayarlanır. API'ye gidin. Unknown, daha iyi bir geçiş için kullanıma sunulmuştur. Çünkü bir kullanıcı Bu API gönderildiğinde IdP'de zaten oturum açmış durumdasınız. IdP'de bunu, FedCM ilk kez çağrıldığı zaman tarayıcıya bildirme şansı. Burada Chrome, IdP'nin hesap uç noktasına bir istek gönderir ve durumu hesap uç noktasından gelen yanıta göre değiştirin:

  • Uç nokta etkin hesapların listesini döndürürse durumu şu şekilde güncelleyin: logged-in tıklayın ve FedCM iletişim kutusunu açarak bu hesapları görüntüleyin.
  • Uç nokta hiçbir hesap döndürmezse durumu logged-out olarak güncelleyin ve başarısız olabilir.
ziyaret edin.

Kullanıcının dinamik giriş akışıyla oturum açmasına izin verin

IdP, kullanıcının giriş durumunu tarayıcıya sürekli olarak bildirse de senkronize olmayabilir. Örneğin, oturumun süresi dolar. Tarayıcı, giriş durumu şu olduğunda hesap uç noktasına kimlik bilgileri içeren bir istek gönderin: logged-in, ancak oturum artık sona ermediğinden sunucu hiçbir hesap döndürmedi kullanılabilir. Böyle bir senaryoda, tarayıcı dinamik olarak kullanıcının oturum açmasına bir pop-up pencere üzerinden IdP'ye yönlendirebilirsiniz.

Bağlı tarafta kimlik sağlayıcı ile oturum açma

IdP'nin yapılandırması ve uç noktaları kullanılabilir olduğunda RP'ler telefon edebilir Kullanıcıların Kısıtlanmış Taraf'ta oturum açmasına izin verme isteğinde bulunmak için navigator.credentials.get() IdP ile değiştir.

API'yi çağırmadan önce [FedCM'nin kullanıcının tarayıcısı]. FedCM'nin kullanılıp kullanılamadığını kontrol etmek için bu kodu FedCM uygulaması:

if ('IdentityCredential' in window) {
  // If the feature is available, take action
}

Kullanıcıların IdP'de Kısıtlanmış Taraf'tan oturum açmasına izin vermek için aşağıdakileri yapın: örneğin:

const credential = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: 'https://accounts.idp.example/config.json',
      clientId: '********',
      nonce: '******'
    }]
  }
});
const { token } = credential;

providers özelliği, IdentityProvider dizisi alır nesnelerin aşağıdaki özellikleri kullanın:

Özellik Açıklama
configURL (zorunlu) IdP yapılandırma dosyasının tam yolu.
clientId (zorunlu) Kısıtlanmış tarafın IdP tarafından yayınlanan istemci tanımlayıcısı.
nonce (isteğe bağlı) Bu özel istek için yanıtın verilmesini sağlayan rastgele bir dize. Tekrarlanan saldırılarını engeller.
loginHint (isteğe bağlı) tarafından sağlanan login_hints değerlerinden birini belirterek hesap uç noktaları, FedCM iletişim kutusu, belirtilen hesabı seçici bir şekilde gösterir.
domainHint (isteğe bağlı) tarafından sağlanan domain_hints değerlerinden birini belirterek hesap uç noktaları, FedCM belirtilen hesabı seçerek gösterir.

Tarayıcı, kayıt ve oturum açma kullanım alanlarını hesaplar listesindeki yanıtta approved_clients varlığı uç nokta. Tarayıcı bir açıklama göstermeyecek Kullanıcı Kısıtlanmış Taraf'a zaten kaydolmuşsa "Şu hizmetle devam etmek için:..." kısa mesajı gönderin.

Kaydolma durumu, aşağıdaki koşulların mevcut olup olmadığına bağlı olarak belirlenir. karşılanıp karşılanmadığı:

  • approved_clients, kısıtlanmış tarafın clientId değerini içeriyorsa.
  • Tarayıcı, kullanıcının Kısıtlanmış Taraf'a zaten kaydolduğunu hatırlarsa.
ziyaret edin.
Bir kullanıcı, FedCM'yi kullanarak kısıtlanmış taraflarda oturum açar

Kısıtlanmış taraf navigator.credentials.get() adlı kişiyi çağırdığında aşağıdaki işlemler gerçekleşir yer:

  1. Tarayıcı istek gönderir ve çeşitli dokümanları getirir:
    1. İyi bilinen dosya ve IdP yapılandırması dosyasına eklemeniz gerekir.
    2. Hesaplar listesi.
    3. İsteğe bağlı: Kısıtlanmış tarafın gizlilik politikasının ve hizmet şartlarının URL'leri, istemci meta veri uç noktasından alınır.
  2. Tarayıcı, kullanıcının oturum açmak için kullanabileceği hesapların listesini görüntüler. ve varsa hizmet şartları ile gizlilik politikasını da gözden geçirin.
  3. Kullanıcı oturum açmak için bir hesap seçtiğinde kimlik isteğinde onay uç noktası, bir istek URL'si almak için IdP'ye jeton.
  4. Kısıtlanmış taraf, kullanıcının kimliğini doğrulamak için jetonu doğrulayabilir.
ziyaret edin.
giriş API çağrısı
login API çağrısı

RP'lerin, FedCM'yi desteklemeyen tarayıcıları desteklemesi beklenir. Bu nedenle, kullanıcılar FedCM dışı mevcut bir oturum açma işlemini kullanabilmelidir. Bitiş üçüncü taraf çerezlerine yönelik desteğin sonlandırılmasına rağmen sorun değil.

Jeton, RP sunucusu tarafından doğrulandıktan sonra RP, kullanıcıyı veya yeni bir oturum başlatmasına izin verebilirsiniz.

Giriş İpucu API'sı

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.

Kısıtlanmış taraf, belirli bir hesabı çağırarak Aşağıdakilerden birine sahip loginHint özelliği ile navigator.credentials.get() Hesap listesinden login_hints değer alındı uç noktası:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

loginHint ile eşleşen hesap olmadığında FedCM iletişim kutusunda bir giriş istemi gösterilir. Bu, kullanıcının Google tarafından istenen ipucuyla eşleşen bir IdP hesabına giriş yapmasına olanak tanır. RP. Kullanıcı isteme dokunduğunda yapılandırma dosyasında belirtilen giriş URL'si. Bağlantı o zaman sonuna giriş ipucu ve alan ipucu sorgu parametreleri eklenir.

Alan İpucu API'si

Kısıtlanmış tarafın yalnızca bir Belirli alanların siteye giriş yapmasına izin veriliyor. Bu durum özellikle erişilen sitenin yalnızca bir şirketle sınırlı olduğu kurumsal senaryolar alan. FedCM API, daha iyi bir kullanıcı deneyimi sağlamak için RP'nin yalnızca Kısıtlanmış Taraf'a giriş yapmak için kullanılabilecek hesapları gösterir. Bu işlem, Kullanıcı şirket dışından bir hesap kullanarak Kısıtlanmış Taraf'a giriş yapmaya çalıştığında yalnızca daha sonra bir hata mesajıyla sunulacak (ya da giriş başarısız oldu).

Kısıtlanmış hesaplar, çağırarak yalnızca eşleşen hesapları seçip gösterebilir. Aşağıdakilerden birine sahip domainHint özelliği ile navigator.credentials.get() Hesap listesinden domain_hints değer alındı uç noktası:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "abc",
      nonce: nonce,
      domainHint : "corp.example"
    }]
  }
});

domainHint ile eşleşen hesap olmadığında FedCM iletişim kutusunda bir giriş istemi gösterilir. Bu, kullanıcının Google tarafından istenen ipucuyla eşleşen bir IdP hesabına giriş yapmasına olanak tanır. RP. Kullanıcı isteme dokunduğunda yapılandırma dosyasında belirtilen giriş URL'si. Bağlantı o zaman sonuna giriş ipucu ve alan ipucu sorgu parametreleri eklenir.

domainHint ile eşleşen hesap olmadığında gösterilen örnek bir giriş istemi.
domainHint ile eşleşen hesap olmadığında gösterilen örnek bir giriş istemi.

Hata mesajı göster

IdP bazen geçerli sebeplerle jeton veremeyebilir. Örneğin: (ör. istemci yetkisizyken sunucu geçici olarak kullanılamaz.) Eğer IdP "hata" döndürüyor yanıt verene kadar, Kısıtlanmış taraf bunu Chrome'un yanı sıra tarafından sağlanan hata bilgilerini içeren bir tarayıcı kullanıcı arayüzü göstererek kullanıcıyı bilgilendirir yapılandırdığınızdan emin olun.

A
Kullanıcının oturum açma girişimi başarısız olduktan sonraki hata mesajını gösteren FedCM iletişim kutusu. Dize, hata türüyle ilişkilendirilir.
try {
  const cred = await navigator.credentials.get({
    identity: {
      providers: [
        {
          configURL: "https://idp.example/manifest.json",
          clientId: "1234",
        },
      ],
    }
  });
} catch (e) {
  const code = e.code;
  const url = e.url;
}

İlk kimlik doğrulamasından sonra kullanıcıların kimliğini otomatik olarak yeniden doğrula

FedCM otomatik yeniden kimlik doğrulama (kısaca "auto-reauthn") kimlik doğrulama işlemi, kullanıcılarınızın herhangi bir anda geri dönmelerini sağlamak istiyor. "İlk kimlik doğrulama Burada, kullanıcının bir hesap oluşturması veya Kısıtlanmış Taraf'ın web sitesinde değişiklik yapmak için FedCM'nin oturum açma iletişim kutusunda "Şu kullanıcı olarak devam et..." düğmesine dokunun: aynı tarayıcı örneğinde yapılıyor.

Uygunsuz kullanıcı deneyimi, kullanıcı sayfayı oluşturmadan önce mantıklı olsa da bir birleşik hesap oluşturarak (FedCM'nin ana hedeflerinden biridir) ve kullanıcı bir kez geçtikten sonra gereksiz bir şekilde zahmetli bir hale gelir. Kullanıcı, Kısıtlanmış Taraf ile IdP arasında iletişime izin verme izni verdiğinde, Başka bir uygunsuz kullanıcıyı zorunlu kılmanın gizlilik veya güvenlik açısından faydası yoktur zaten onayladıkları bir işlem için onay almış olurlar.

Otomatik yeniden kimlik doğrulamada, tarayıcı kullandığınız seçeneğe bağlı olarak davranışını değiştirir. navigator.credentials.get() çağrılırken mediation için belirtin.

const cred = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  },
  mediation: 'optional', // this is the default
});

// `isAutoSelected` is `true` if auto-reauthn was performed.
const isAutoSelected = cred.isAutoSelected;

mediation, Kimlik Bilgisi Yönetimi'ndeki bir özelliktir API, aynı şekilde davrandığı için aynı şekilde yol olduğu gibi PasswordCredential ve FederatedCredential tarafından kısmen destekleniyor. PublicKeyCredential de faydalı olabilir. Mülk, aşağıdaki dört değeri kabul eder:

  • 'optional'(varsayılan): Mümkünse otomatik yeniden kimlik doğrulama, değilse uyumlulaştırma gerektirir. Biz oturum açma sayfasında bu seçeneği belirlemenizi öneririz.
  • 'required': Devam etmek için her zaman uyumlulaştırma gerektirir. Örneğin, "Devam" düğmesini tıklayın. Kullanıcılarınızın şunları yapması bekleniyorsa bu seçeneği belirleyin: kimlik doğrulamalarının olması gerektiğinde bu izni açıkça vermelidir.
  • 'silent': Mümkünse otomatik yeniden kimlik doğrulama, arabuluculuk yapılmalıdır. Bu seçeneği, oturum açma sayfasını, yalnızca kullanıcıların oturumlarını açık tutmasını kargo web sitesindeki bir öğe sayfası veya bir haberdeki makale sayfası web sitesi.
  • 'conditional': WebAuthn için kullanılır ve şu anda FedCM için kullanılamaz.

Bu çağrıyla, otomatik yeniden kimlik doğrulama aşağıdaki koşullarda gerçekleşir:

  • FedCM kullanılabilir. Örneğin, kullanıcı FedCM'yi devre dışı bırakmamış global olarak ya da ayarlarda kısıtlanmış taraf için gösterilir.
  • Kullanıcı, bu web sitesinde oturum açmak için FedCM API ile yalnızca bir hesap kullanmıştır. emin olun.
  • Kullanıcı, IdP'de bu hesapla oturum açtı.
  • Otomatik yeniden kimlik doğrulama işlemi son 10 dakika içinde gerçekleşmedi.
  • Kısıtlanmış taraf çağrı yapmadı. Sonrasında navigator.credentials.preventSilentAccess() tekrar deneyin.

Bu koşullar karşılandığında, kullanıcı, FedCM navigator.credentials.get() çağrıldığı anda başlar.

mediation: optional olduğunda, otomatik yeniden kimlik doğrulama yapılabilir şu nedenlerle kullanılamıyor: bunu yalnızca tarayıcı bilir; Kısıtlanmış Taraf, otomatik yeniden kimlik doğrulamanın isAutoSelected özelliği inceleniyor.

Bu, API performansını değerlendirmek ve kullanıcı deneyimini buna göre iyileştirmek açısından faydalıdır. Ayrıca, bu özellik kullanılamadığında kullanıcıdan açık bir şekilde oturum açması istenebilir kullanıcı uyumlulaştırması: mediation: required

FedCM aracılığıyla otomatik olarak yeniden kimlik doğrulayan bir kullanıcı.

preventSilentAccess() ile uyumlulaştırmayı zorunlu kılın

Kullanıcıların oturumlarını kapattıktan hemen sonra otomatik olarak yeniden kimlik doğrulaması, çok iyi bir kullanıcı deneyimi sağlar. Bu nedenle, FedCM'nin bu davranışı önlemek için otomatik olarak yeniden kimlik doğrulama gerekir. Bu, otomatik yeniden kimlik doğrulamanın kullanıcı 10 dakikada bir tekrar oturum açmazsa 10 dakika. Kısıtlanmış taraf, navigator.credentials.preventSilentAccess() Kullanıcı oturumunu kapattığında otomatik yeniden kimlik doğrulamayı devre dışı bırakmasını açıkça isteme Kısıtlanmış Taraf'ı açıkça (ör. oturumu kapatma düğmesini tıklayarak) paylaşabilirsiniz.

function signout() {
  navigator.credentials.preventSilentAccess();
  location.href = '/signout';
}

Kullanıcılar, ayarlardan otomatik yeniden kimlik doğrulamayı devre dışı bırakabilir

Kullanıcılar, ayarlar menüsünden otomatik yeniden kimlik doğrulamayı devre dışı bırakabilir:

  • Masaüstü Chrome'da chrome://password-manager/settings > Oturum aç otomatik olarak oluşturur.
  • Android Chrome'da Ayarlar'ı açın > Şifre Yöneticisi > Bir dişli simgesini > Otomatik oturum aç'a dokunun.

Açma/kapatma düğmesi devre dışı bırakıldığında kullanıcı otomatik yeniden kimlik doğrulamanın tüm kapsamı dışında kalmayı seçebilir. birlikte. Bu ayar cihazlar arasında depolanır ve senkronize edilir. Chrome örneğinde bir Google hesabında oturum açmış etkin.

IdP'nin Kısıtlanmış Taraf ile bağlantısını kesme

Kullanıcı daha önce FedCM aracılığıyla IdP'yi kullanarak Kısıtlanmış Taraf'ta oturum açtıysa tarayıcı tarafından yerel olarak bağlı olan bağlı liste hesaplar. Kısıtlanmış taraf, IdentityCredential.disconnect() işlevi. Bu işlev, üst düzey RP çerçevesi. Kısıtlanmış tarafın, kullandığı clientId olan configURL öğesini geçirmesi gerekir. ve IdP'nin bağlantısının kaldırılması için bir accountHint girin. Hesap ipucu, bağlantı kesme uç noktası tanımlayabildiği sürece rastgele bir dize olabilir. bir e-posta adresi veya kullanıcı kimliği gibi, hesap listesi uç noktasının sağladığı hesap kimliğiyle eşleşmelidir:

// Disconnect an IdP account "account456" from the RP "https://idp.com/". This is invoked on the RP domain.
IdentityCredential.disconnect({
  configURL: "https://idp.com/config.json",
  clientId: "rp123",
  accountHint: "account456"
});

IdentityCredential.disconnect(), Promise döndürür. Bu vaat bir istisnayı kapsayabilir:

  • Kullanıcı, FedCM üzerinden IdP'yi kullanarak Kısıtlanmış Taraf'ta oturum açmamıştır.
  • API, FedCM izin politikası olmadan bir iFrame içinden çağrılır.
  • configURL geçersiz veya bağlantı kesme uç noktası yok.
  • İçerik Güvenliği Politikası (İGP) denetimi başarısız olur.
  • Bekleyen bir bağlantı kaldırma isteği var.
  • Kullanıcı, tarayıcı ayarlarında FedCM'yi devre dışı bırakmış.

IdP'nin bağlantı kesme uç noktası bir yanıtında, Kısıtlanmış Taraf ve IdP'nin bağlantısı kesilir. ve vaatleri tamamlanacak. Bağlantısı kesilen hesapların kimliği: bağlantı kesme işleminden uç nokta.

Kaynaklar arası iframe içinden FedCM'yi çağırma

FedCM, identity-credentials-get izin politikası (üst çerçeve izin veriyorsa). Alıcı: bunun için iframe etiketine allow="identity-credentials-get" özelliğini ekleyin şu şekilde:

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

Bu yöntemin işleyişini örnekte görebilirsiniz.

İsteğe bağlı olarak, üst çerçeve, kaynakları FedCM'yi çağıracak şekilde kısıtlamak isterse izin verilen kaynakların listesini içeren bir Permissions-Policy üstbilgisi gönderin.

Permissions-Policy: identity-credentials-get=(self "https://fedcm-cross-origin-iframe.glitch.me")

İzin Politikası'nın işleyiş şekli hakkında daha fazla bilgiyi Kontrol İzinleri olan tarayıcı özellikleri Politika.