Aktualizacje FedCM: testowanie origin interfejsu Button Mode API, CORS i SameSite

Eiji Kitamura

Od Chrome w wersji 125 rozpoczynamy testowanie origin interfejsu Button Mode API na komputerach. Dzięki interfejsowi Button Mode API dostawcy tożsamości mogą korzystać z interfejsu FedCM API, nawet jeśli użytkownicy nie mają aktywnych sesji u dostawcy tożsamości w momencie wywołania interfejsu API. Użytkownicy mogą następnie logować się w witrynie za pomocą konta sfederowanego bez przekierowywania do witryny dostawcy tożsamości. Interfejs FedCM w trybie przycisku jest bardziej widoczny niż w przypadku obecnego widżetu, ponieważ jest aktywowany przez gest użytkownika i lepiej odzwierciedla jego intencje związane z logowaniem.

Button Mode API

Interfejs użytkownika FedCM był dostępny jako widżet wyświetlany w prawym górnym rogu na komputerze lub jako arkusz u dołu na urządzeniu mobilnym, gdy tylko wywoływano interfejs API, co mogło nastąpić, gdy użytkownik trafił na stronę podmiotu ufającego. Jest to tzw. tryb widżetu. Aby widget się wyświetlał, użytkownik musi być zalogowany w IdP, zanim przejdzie do RP. FedCM nie miał niezawodnego sposobu na umożliwienie użytkownikowi zalogowania się u dostawcy tożsamości, zanim będzie mógł zalogować się w usłudze RP przy użyciu konta dostępnego u dostawcy tożsamości. W przypadku FedCM wkrótce dodamy taką możliwość.

Nowy interfejs Button Mode API dodaje nowy tryb interfejsu o nazwie button. W przeciwieństwie do trybu widżetu tryb przycisku nie jest przeznaczony do wywoływania natychmiast po tym, jak użytkownik trafi na stronę RP. Zamiast tego ma być wywoływana, gdy użytkownik rozpoczyna proces logowania, np. klikając przycisk „Zaloguj się u dostawcy tożsamości”.

Gdy tylko użytkownik naciśnie przycisk, FedCM sprawdzi, czy jest zalogowany u dostawcy tożsamości, wysyłając żądanie pobrania danych do punktu końcowego kont lub sprawdzając stan logowania zapisany w przeglądarce. Jeśli użytkownik nie jest jeszcze zalogowany, FedCM poprosi go o zalogowanie się u dostawcy tożsamości za pomocą login_url udostępnionego przez dostawcę tożsamości w wyskakującym okienku. Jeśli przeglądarka wie, że użytkownik jest już zalogowany u dostawcy tożsamości, lub gdy tylko użytkownik zaloguje się u dostawcy tożsamości w wyskakującym okienku, FedCM otworzy okno modalne, w którym użytkownik może wybrać konto dostawcy tożsamości, za pomocą którego chce się zalogować. Wybierając konto, użytkownik może zalogować się w RP za pomocą konta IdP.

W interfejsie trybu przycisku wyświetlane okno logowania jest większe niż w trybie widżetu, więc ikona marki też powinna być większa, aby zachować spójność wizualną. Minimalny rozmiar ikony w trybie widżetu to 25 x 25 pikseli, a w trybie przycisku – 40 x 40 pikseli. Znany plik dostawcy tożsamości umożliwia określenie wielu adresów URL ikon w ten sposób:

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

Wypróbuj to w Chrome 125 na stronie https://fedcm-demo-rp.dev/active-mode.

Aby użyć interfejsu Button Mode API:

• Włącz funkcję eksperymentalną FedCmButtonMode w chrome://flags.
• Pamiętaj, aby wywoływać interfejs API za pomocą przejściowej aktywacji użytkownika, np. kliknięcia przycisku.
• Wywołaj interfejs API z parametrem mode w ten sposób:

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

Przeglądarka wyśle nowy parametr do punktu końcowego potwierdzenia identyfikatora reprezentujący typ żądania, w tym mode=button:

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

Wykrywanie cech

Aby sprawdzić, czy przeglądarka może używać trybu przycisku, możesz użyć tego kodu:

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

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

Użyj opcji innego konta

RP może zezwolić użytkownikom na „używanie innych kont” w selektorze kont, na przykład gdy dostawcy tożsamości obsługują wiele kont lub zastępowanie istniejącego konta.

Aby włączyć opcję używania innego konta:

• Włącz eksperymentalną funkcję FedCmUseOtherAccount w chrome://flags lub zarejestruj się w programie testów Button Mode API.
• Dostawca tożsamości określa w pliku konfiguracyjnym dostawcy tożsamości te elementy:

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

Udział w eksperymencie

Możesz wypróbować interfejs Button Mode API lokalnie, włączając flagę Chrome chrome://flags#fedcm-button-mode w Chrome 125 lub nowszej wersji.

Dostawcy tożsamości mogą też włączyć tryb przycisku, rejestrując test pochodzenia:

• Zarejestruj testowanie interfejsu API pochodzącego od firmy zewnętrznej w przypadku RP.

Wersje próbne origin umożliwiają wypróbowanie nowych funkcji i przekazanie społeczności zajmującej się standardami internetowymi opinii na temat ich użyteczności, praktyczności i skuteczności. Więcej informacji znajdziesz w przewodniku po testowaniu origin dla programistów internetowych.

Testowanie origin interfejsu Button Mode API jest dostępne w Chrome w wersjach od 125 do 130.

1. Otwórz stronę rejestracji w programie testów źródła.
2. Kliknij przycisk Zarejestruj się i wypełnij formularz, aby poprosić o token.
3. Wpisz miejsce pochodzenia dostawcy tożsamości jako Miejsce pochodzenia w internecie.
4. Zaznacz Dopasowywanie do danych innych firm, aby wstrzykiwać token za pomocą JavaScriptu w innych domenach.
5. Kliknij Prześlij.
6. Umieść wydany token w witrynie zewnętrznej.

Aby umieścić token w witrynie innej firmy, dodaj ten kod do biblioteki JavaScript lub pakietu SDK dostawcy tożsamości, które są udostępniane z jego domeny.

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

Zastąp TOKEN_GOES_HERE własnym tokenem.

W Chrome 125 wymagane będą CORS i SameSite=None

CORS

Od Chrome 125 Chrome będzie wymuszać CORS w punkcie końcowym asercji identyfikatora.

CORS (Cross-Origin-Resource-Sharing) to system składający się z przesyłania nagłówków HTTP, który określa, czy przeglądarki blokują kod JavaScript na stronie frontendowej przed uzyskaniem dostępu do odpowiedzi na żądania z różnych domen. Punkt końcowy potwierdzenia tożsamości na serwerze dostawcy tożsamości musi odpowiadać na żądanie za pomocą dodatkowych nagłówków. Oto przykładowy nagłówek odpowiedzi na żądanie z domeny https://fedcm-rp-demo.glitch.me:

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

SameSite=None

Parametr SameSite pliku cookie określa, czy plik cookie jest ograniczony do kontekstu tej samej witryny lub kontekstu własnego. Jeśli ustawisz wartość None, plik cookie będzie można wysyłać do domeny innej firmy.

W FedCM Chrome wysyła pliki cookie do punktu końcowego kont, punktu końcowego potwierdzenia tożsamości i punktu końcowego rozłączenia. Od wersji Chrome 125 Chrome będzie wysyłać te żądania z uwierzytelnianiem tylko z plikami cookie wyraźnie oznaczonymi jako SameSite=None.