FedCM güncellemeleri: Button Mode API kaynak denemesi, CORS ve SameSite

Eiji Kitamura

Button Mode API, Chrome 125'ten itibaren başlangıç sürümünü kullanın. Düğme Modu API'si ile kimlik sağlayıcılar, API çağrısı sırasında kullanıcıların etkin IdP oturumları olmasa bile FedCM API'yi kullanabilir. Böylece kullanıcılar, bir web sitesinde bir web sitesinde bir oturuma sahip olmadan, birleşik hesaplarıyla IdP sitesine gitti. Düğme modundaki FedCM kullanıcı arayüzü daha belirgindir kullanıcı tarafından sağlandığı için mevcut widget akışındaki ve kullanıcının oturum açma niyetini daha iyi yansıtır.

Düğme Modu API'sı

FedCM kullanıcı arayüzü, sağ üstte görüntülenen bir widget olarak kullanıma sunuldu sayfada veya mobil cihazlarda alt sayfa olarak, API çağrıldığında Bu, kullanıcı bağlı tarafa (RP) ulaştığında gerçekleşebilir. Buna widget modunu kullanın. Widget'ın gösterilebilmesi için kullanıcının IdP'de oturum açmış olması gerekir hemfikir olmasını isteriz. FedCM, gizliliklerini Kullanıcının Kısıtlanmış Taraf'ta oturum açmasına izin verilmeden önce IdP'de oturum açması (IdP'de mevcut olan hesabı kullanın). FedCM, bunun için bir yöntem eklemek üzeredir.

Widget modu sayesinde, kullanıcı etkinleştirmesi olmadan masaüstü Chrome'da sağ üst köşede bir iletişim kutusu gösterilir.

Yeni Button Mode API, button modu adı verilen yeni bir kullanıcı arayüzü modu ekler. Şunlardan farklı olarak: widget modunu kullanıyorsanız, düğme modu, kullanıcı sayfayı açar açmaz Kısıtlanmış Taraf Bunun yerine, kullanıcı bir oturum açma akışı başlattığında çağrılması amaçlanmıştır Örneğin, "IdP ile oturum açın"a basarak düğmesini tıklayın.

Düğmeye basıldığında FedCM, kullanıcının IdP aracılığıyla hesaplara getirme uç nokta veya adresine kaydedilen giriş durumunu tarayıcı. Öğe kullanıcı henüz oturum açmadıysa FedCM, kullanıcıdan login_url bir pop-up pencere üzerinden IdP tarafından sağlanır. Tarayıcı, kullanıcının IdP'de zaten oturum açmışsa veya kullanıcı IdP'de şununla oturum açar açmaz: FedCM, kullanıcının IdP seçmesi için kalıcı bir iletişim kutusu açar oturum açmanız gerekir. Kullanıcı bir hesap seçerek devam edebilir ve IdP'ye giriş yapmasını sağlar.

Düğme modu kullanıcı arayüzünde, görüntülenen oturum açma iletişim kutusu widget'ı modunda kullanabilirsiniz. Görsel tutarlılığı korumak için marka simgesi de kullanılmalıdır. Widget modu için minimum simge boyutu 25x25 piksel olsa da düğme modunda simge 40x40 pikseldir. IdP'nin iyi bilinenleri dosyası birden çok simge URL'sini aşağıdaki gibi belirtmek gerekir:

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}

Düğme modu kullanıldığında, masaüstü Chrome'un üst orta kısmında daha büyük bir simgeyle kalıcı iletişim kutusu görüntülenir.

Şu adreste bulunan Chrome 125 sürümünü kullanarak kendiniz deneyin: https://fedcm-rp-demo.glitch.me/button_flow.

Bir kullanıcı, Button Mode API'yi kullanarak Kısıtlanmış Taraf'ta oturum açıyor.

Düğme Modu API'sini kullanmak için:

• chrome://flags ürününde FedCmButtonMode adlı deneysel özelliği etkinleştir.
• Geçici kullanıcı etkinleştirmesinin arkasındaki API'yi çağırdığınızdan emin olun mesela bir düğme tıklaması gibi.
• mode parametresiyle API'yi şu şekilde çağırın:

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

Not: Chrome şu anda yeni mode mülkünde yalnızca "button" özelliğini desteklemektedir. Diğer Chrome bu özelliği gönderdiğinde "widget" gibi özellikler eklenir.

Tarayıcı, ID assertion'a yeni bir parametre gönderecek uç nokta istek türünü mode=button ekleyerek temsil eder:

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=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button

Not: Bir sorun olduğunda FedCM API, düğme modunu kullanarak çağrıda bulunur anında yanıt veriyor, widget modundayken ise yanıt vermeyi geciktiriyor isteyerek. Bunun nedeni, kullanıcının IdP'de oturum açma durumunun kısa süre içinde bir hata sinyali göndermek, RP'ye bir hata sinyalini ipucu olarak, kullanıcının IdP oturum açma durumuyla ilgili bilgi edinebilirsiniz. Düğme modunda kullanıcıdan yine de, kullanıcının IdP oturum açma bilgilerini açığa çıkarma konusunda bir sorun yoksa IdP'de oturum açmanız gerekir. devre dışı bırakabilirsiniz.

Not: Kullanıcılar, Chrome'da FedCM widget modunu devre dışı bırakabilir. Ayarlar'a gidin. Bu iletişim Giriş isteği, bir kullanıcı tarafından başlatıldığı için Düğme Modu API'sini etkiler. Hareketin ve tarayıcı, kullanıcılara giriş akışını tamamlama konusunda yardımcı olmalıdır.

Özellik algılama

Tarayıcının düğme modunu kullanmaya uygun olup olmadığını belirlemek için: aşağıdaki kodla inceleyin:

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

Diğer hesap seçeneğini kullan

Kısıtlanmış taraf, kullanıcıların "diğer hesapları kullanmasına" izin verebilir hesap seçicide Örneğin, IdP'ler birden fazla hesabı desteklediğinde veya mevcut hesabın yerini değiştirdiğinde.

Başka hesabı kullanma seçeneğini etkinleştirmek için:

• chrome://flags ürününde FedCmUseOtherAccount adlı deneysel özelliği etkinleştir veya Button Mode API kaynak denemesine kaydolun.
• IdP, IdP yapılandırmasında aşağıdakileri belirtir: dosya:

{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

Kaynak denemesine katılın

Chrome'u açarak Button Mode API'yi yerel olarak deneyebilirsiniz işaretle Chrome 125 veya sonraki sürümlerde chrome://flags#fedcm-button-mode.

IdP'ler ayrıca bir kaynak denemesi kaydederek Düğme Modu'nu etkinleştirebilir:

• Üçüncü taraf kaynak denemesine kaydolma elde eder.

Kaynak denemeleri, yeni özellikleri denemenize ve bu özelliklerle ilgili geri bildirimde bulunmanıza olanak kullanılabilirlik, pratiklik ve etkililik gibi konuları ele aldık. Örneğin, Daha fazla bilgi için Web İçin Kaynak Denemeleri Kılavuzu'na bakın Geliştiriciler.

Button Mode API kaynak denemesi Chrome 125 ve Chrome arasında kullanılabilir 130.)

1. Kaynak deneme kaydına gidin. öğrenin.
2. Kaydol düğmesini tıklayın ve jeton istemek için formu doldurun.
3. IdP'nin kaynağını Web Origin (Web Kaynağı) olarak girin.
4. Diğer kaynaklar.
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 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.

Not: FedCM API, IdP'den yüklenen komut dosyası tarafından değil, RP tarafından çağrılırsa Kısıtlanmış Taraf, kaynağını kaydetmeli ve birinci taraf kaynağını çalıştırmalıdır. deneyebilirsiniz.

Chrome 125'te CORS ve SameSite=None gerekir

CORS

Chrome'un zorunlu kılması ID'deki CORS onaylama uç nokta (Chrome 125 sürümünden itibaren)

CORS (Cross-Origin-Resource-Sharing) bir sistemdir. Bu sistemde kaynaklar, Tarayıcıların ön uç JavaScript kodunu engelleyip engellemediğini belirleyen HTTP üstbilgileri kaynaklar arası istekler için yanıtlara erişmesini engeller. Şu adresteki kimlik onayı uç noktası: IdP sunucusu, isteğe ek üst bilgilerle yanıt vermelidir. İlgili içeriği oluşturmak için kullanılan Aşağıda, https://fedcm-rp-demo.glitch.me:

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

Not: Access-Control-Allow-Credentials değeri doğru olarak ayarlandığından, Access-Control-Allow-Origin açık bir alan adı döndürmelidir ve * ile gösterilen joker karakter.

SameSite=Hiçbiri

Çerezin SameSite parametresi birinci taraf veya aynı site bağlamıyla kısıtlanmışsa. Bunu belirterek None ise çerez üçüncü taraf bir alana gönderilebilir.

Chrome, FedCM'de çerezleri hesaplara uç nokta, kimlik onayı uç nokta ve bağlantı kesme uç nokta. Başlangıç tarihi: Chrome 125 ile birlikte Chrome, kimlik bilgisi içeren istekleri yalnızca çerezlerle gönderir açıkça SameSite=None olarak işaretlendi.