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

Eiji Kitamura

Chrome 125'ten itibaren Button Mode API, masaüstünde kaynak denemesi başlatıyor. Düğme modu API'si sayesinde kimlik sağlayıcılar, kullanıcılarının API çağrısı sırasında etkin IdP oturumları olmasa bile FedCM API'yi kullanabilir. Kullanıcılar daha sonra IdP sitesine yönlendirilmeksizin birleşik hesaplarıyla bir web sitesinde oturum açabilir. Düğme modundaki FedCM kullanıcı arayüzü, kullanıcı hareketiyle kapatıldığı ve kullanıcının oturum açma niyetini daha iyi yansıttığı için mevcut widget akışındakine kıyasla daha belirgindir.

Button Mode API

FedCM kullanıcı arayüzü, API çağrıldıktan hemen sonra masaüstünde sağ üst köşede görüntülenen bir widget olarak veya mobil cihazlarda alt sayfa olarak kullanılabilir. API çağrısı, kullanıcı güvenilir tarafa (RP) ulaştığında da yapılabilir. Buna widget modu denir. Widget'ın gösterilmesi için kullanıcının RP'ye yönlendirilmeden önce kimlik sağlayıcıda oturum açmış olması gerekir. FedCM'nin tek başına, kullanıcının IdP'de bulunan hesabı kullanarak RP'de oturum açmasına izin vermeden önce kullanıcının IdP'de oturum açmasına izin vermenin güvenilir bir yolu yoktu. FedCM, bunu yapmanın bir yolunu eklemek üzeredir.

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

Yeni Button Mode API, düğme modu adlı yeni bir kullanıcı arayüzü modu ekler. Widget modunun aksine, düğme modunun kullanıcı RP'ye ulaştığı anda çağrılması amaçlanmamıştır. Bunun yerine, kullanıcı bir oturum açma akışı başlattığında (ör. "IdP ile oturum aç" düğmesine basıldığında) çağrılması amaçlanmıştır.

Düğmeye basıldığı anda FedCM, hesaplar uç noktasına bir getirme veya tarayıcıya kayıtlı bir giriş durumu aracılığıyla kullanıcının IdP'de oturum açıp açmadığını kontrol eder. Kullanıcı henüz oturum açmamışsa FedCM, pop-up pencerede IdP tarafından sağlanan login_url ile IdP'de oturum açmasını ister. Tarayıcı, kullanıcının IdP'de oturum açtığını biliyorsa veya kullanıcı pop-up pencereyle IdP'de oturum açtığı anda FedCM, kullanıcının oturum açacağı IdP hesabını seçmesi için bir modal iletişim kutusu açar. Kullanıcı, bir hesap seçerek kimlik sağlayıcı hesabını kullanarak RP'de oturum açabilir.

Düğme modu kullanıcı arayüzünde gösterilen oturum açma iletişim kutusu, widget moduna kıyasla daha büyüktür. Bu nedenle, görsel tutarlılığı korumak için marka simgesi de daha büyük olmalıdır. Widget modu için minimum simge boyutu 25x25 piksel, düğme modu için minimum simge boyutu ise 40x40 pikseldir. IdP'nin bilinen dosyası, birden fazla simge URL'sinin aşağıdaki gibi belirtilmesine olanak tanır:

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

Düğme modunda, masaüstü Chrome'da üst orta kısımda daha büyük bir simgeyle modal iletişim kutusu gösterilir.

https://fedcm-rp-demo.glitch.me/button_flow adresinde Chrome 125'i kullanarak bu özelliği kendiniz deneyebilirsiniz.

Kullanıcı, Button Mode API'yi kullanarak RP'de oturum açıyor.

Button Mode API'yi kullanmak için:

• chrome://flags'te FedCmButtonMode deneysel özelliğini etkinleştirin.
• Düğme tıklaması gibi geçici kullanıcı etkinleştirme işlemlerinin arkasında API'yi çağırdığınızdan emin olun.
• API'yi mode parametresiyle ş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, yeni mode mülkünde şu anda yalnızca "button" özelliğini desteklemektedir. Chrome bu özelliği kullanıma sunarken "widget" gibi diğer mülkler de eklenecektir.

Tarayıcı, mode=button değerini ekleyerek istek türünü temsil eden yeni bir parametreyi kimlik beyanı uç noktasına gönderir:

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, düğme modunu kullanan FedCM API çağrısı hemen yanıt verir. Widget modunda ise yanıtı kasıtlı olarak geciktirir. Bunun nedeni, kullanıcının kimlik sağlayıcıda oturum açma durumunun özel bilgi olarak kabul edilmesi ve kısa süre içinde bir hata sinyali gönderilmesi durumunda RP'nin kullanıcının kimlik sağlayıcıda oturum açma durumu hakkında ipucu almasıdır. Düğme modunda kullanıcıdan IdP'de oturum açması istendiğinden kullanıcının IdP oturum açma durumunun RP'ye gösterilmesiyle ilgili bir sorun yaşanmaz.

Not: Kullanıcılar Chrome ayarlarında FedCM widget modunu devre dışı bırakabilir. Giriş isteği bir kullanıcı hareketiyle başlatıldığı ve tarayıcı kullanıcıların giriş akışını tamamlamasına yardımcı olması gerektiği için bu durum Button Mode API'yi etkilemez.

Özellik algılama

Tarayıcının düğme modunu kullanmaya uygun olup olmadığını belirlemek için aşağıdaki kodu kullanarak kontrol edebilirsiniz:

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

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

Başka hesap seçeneğini kullanma

RP, kullanıcıların hesap seçicide "diğer hesapları kullanmasına" izin verebilir. Örneğin, kimlik sağlayıcılar birden fazla hesabı desteklediğinde veya mevcut hesabı değiştirdiğinde.

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

• chrome://flags'te deneysel FedCmUseOtherAccount özelliğini etkinleştirin veya Button Mode API kaynak denemesine kaydolun.
• IdP, IdP yapılandırma dosyasında şunları belirtir:

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

Kaynak denemesine katılma

Chrome 125 veya sonraki sürümlerde Chrome işaretini chrome://flags#fedcm-button-mode etkinleştirerek Düğme Modu API'sini yerel olarak deneyebilirsiniz.

Kimlik sağlayıcılar, bir kaynak denemesi kaydederek düğme modunu da etkinleştirebilir:

• RP için üçüncü taraf kaynağı denemesi kaydedin.

Kaynak denemeleri, yeni özellikleri denemenize ve web standartları topluluğuna kullanılabilirlikleri, pratiklikleri ve etkililikleri hakkında geri bildirim vermenize olanak tanır. Daha fazla bilgi için Web Geliştiricileri İçin Kaynak Deneme Kılavuzu'na göz atın.

Button Mode API kaynak denemesi, Chrome 125 ile Chrome 130 arasında kullanılabilir.

1. Kaynak deneme 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şleşmesini 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.

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

Chrome 125'te CORS ve SameSite=None gerekli olacak

CORS

Chrome 125'ten itibaren Chrome, kimlik doğrulama uç noktasında CORS'yi zorunlu kılacaktır.

CORS (Cross-Origin-Resource-Sharing), tarayıcıların ön uç JavaScript kodunun kaynak dışı isteklerin yanıtlarına erişmesini engelleyip engellemediğini belirleyen, HTTP başlıklarının iletilmesinden oluşan bir sistemdir. IdP sunucusundaki kimlik beyanı uç noktası, isteğe ek üstbilgilerle yanıt vermelidir. Aşağıda, https://fedcm-rp-demo.glitch.me tarafından gönderilen bir isteğe verilen örnek bir yanıt üst bilgisi verilmiştir:

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

Not: Access-Control-Allow-Credentials doğru olarak ayarlandığından Access-Control-Allow-Origin açık bir şekilde bir alan döndürmelidir ve * ile belirtilen bir joker karakter kullanamaz.

SameSite=None

Çerezin SameSite parametresi, çerezin birinci taraf veya aynı site bağlamıyla kısıtlanıp kısıtlanmadığını belirtir. None olarak belirtildiğinde çerez üçüncü taraf bir alana gönderilebilir.

FedCM'de Chrome, çerezleri hesaplar uç noktasına, kimlik beyanı uç noktasına ve bağlantıyı kesme uç noktasına gönderir. Chrome 125'ten itibaren Chrome, kimlik bilgisi içeren bu istekleri yalnızca SameSite=None olarak açıkça işaretlenmiş çerezlerle gönderecektir.