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

Eiji Kitamura

Od wersji 125 Chrome interfejs Button Mode API jest testowany w wersji próbnej origin na komputerach. Dzięki interfejsowi API w trybie przycisku dostawcy tożsamości mogą korzystać z interfejsu FedCM API, nawet jeśli ich użytkownicy nie mają aktywnych sesji dostawcy tożsamości w momencie wywołania interfejsu API. Użytkownicy mogą wtedy logować się w witrynie przy użyciu konta sfederowanego bez przekierowania do witryny dostawcy tożsamości. Interfejs FedCM w trybie przycisku jest bardziej widoczny niż w dotychczasowym procesie korzystania z widżetu, ponieważ jest zabezpieczony gestem użytkownika i lepiej odzwierciedla jego intencję zalogowania się.

Button Mode API

Interfejs FedCM jest dostępny jako widżet wyświetlany w prawym górnym rogu na komputerze lub jako panel dolny na urządzeniu mobilnym, gdy tylko wywołany zostanie interfejs API, co może nastąpić, gdy użytkownik wejdzie na stronę strony trzeciej. Jest to tzw. tryb widżetu. Aby wyświetlić widżet, użytkownik musi zalogować się w usługodawcy tożsamości, zanim wyświetli stronę dostawcy treści. Sam interfejs FedCM nie miał niezawodnego sposobu na zalogowanie użytkownika w dostawcy tożsamości, zanim umożliwił mu zalogowanie się w usługodawcy RP za pomocą konta dostępnego w dostawcy tożsamości. Wkrótce udostępnimy taką możliwość w FedCM.

W trybie widżetu w prawym górnym rogu przeglądarki Chrome na komputerze wyświetla się okno bez konieczności aktywacji przez użytkownika.

Nowy interfejs Button Mode API dodaje nowy tryb interfejsu użytkownika o nazwie button. W przeciwieństwie do trybu widżetu tryb przycisku nie jest uruchamiany, gdy użytkownik wejdzie na stronę RP. Zamiast tego ma być wywoływany, gdy użytkownik rozpocznie proces logowania, np. naciśnie przycisk „Zaloguj się za pomocą dostawcy tożsamości”.

Gdy tylko użytkownik naciśnie przycisk, FedCM sprawdza, czy jest zalogowany w usługach dostawcy tożsamości, korzystając z wyszukiwania na interfejsie API kont lub stanu logowania zapisanego w przeglądarce. Jeśli użytkownik nie jest jeszcze zalogowany, FedCM poprosi go o zalogowanie się w dostawcy tożsamości za pomocąlogin_urldostawcy tożsamości w wyskakującym okienku. Jeśli przeglądarka wie, że użytkownik jest już zalogowany w dostawcy tożsamości, lub gdy użytkownik zaloguje się w dostawcy tożsamości za pomocą okna wyskakującego, FedCM otworzy okno modalne, w którym użytkownik będzie mógł wybrać konto dostawcy tożsamości, za pomocą którego chce się zalogować. Po wybraniu konta 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, a także ikona marki powinna być większa, aby zachować spójność wizualną. Minimalny rozmiar ikony w trybie widżetu to 25 x 25 pikseli, a minimalny rozmiar ikony w trybie przycisku to 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
      }
    ]
  }
}

W trybie przycisku w Chrome na komputerze w górnej części ekranu wyświetla się okno modalne z większą ikoną.

Wypróbuj to samodzielnie, używając Chrome 125 na stronie https://fedcm-rp-demo.glitch.me/button_flow.

Użytkownik loguje się w usłudze RP za pomocą interfejsu Button Mode API.

Aby używać interfejsu ButtonMode API:

• Włącz funkcję eksperymentalną FedCmButtonMode w sekcji chrome://flags.
• Pamiętaj, aby wywołać interfejs API w ramach przelotnego aktywowania użytkownika, np. kliknięcia przycisku.
• Wywołaj interfejs API za pomocą parametru mode w ten sposób:

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

Uwaga: Chrome obsługuje obecnie tylko "button" w nowej usłudze mode. Inne właściwości, takie jak "widget", zostaną dodane, gdy Chrome udostępni tę funkcję.

Przeglądarka wyśle nowy parametr do punktu końcowego oświadczenia o tożsamości reprezentującego typ żądania, podając 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

Uwaga: gdy coś pójdzie nie tak, wywołanie interfejsu FedCM API w trybie przycisku odpowiada natychmiast, podczas gdy w trybie widżetu celowo opóźnia odpowiedź. Dzieje się tak, ponieważ logowanie użytkownika w dostawcy tożsamości jest uważane za informację prywatną, a wysłanie sygnału o błędzie daje dostawcy aplikacji wskazówkę dotyczącą logowania użytkownika w dostawcy tożsamości. W trybie przycisku użytkownik jest proszony o zalogowanie się w dostawcy tożsamości, więc nie ma potrzeby ujawniania dostawcy tożsamości stanu logowania użytkownika.

Uwaga: użytkownicy mogą wyłączyć tryb widżetu FedCM w ustawieniach Chrome. Nie ma to wpływu na interfejs ButtonMode API, ponieważ żądanie logowania jest inicjowane przez gest użytkownika, a przeglądarka powinna pomagać użytkownikom w ukończeniu procesu logowania.

Wykrywanie cech

Aby sprawdzić, czy przeglądarka obsługuje tryb 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 oknie wyboru konta, na przykład gdy dostawcy tożsamości obsługują wiele kont lub zastępują istniejące konto.

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

• Włącz funkcję eksperymentalną FedCmUseOtherAccount w chrome://flags lub zarejestruj się w próbie wersji natywnej interfejsu Button Mode API.
• W pliku konfiguracyjnym dostawcy tożsamości dostawca tożsamości określa:

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

Udział w okresie próbnym usługi pochodzenia

Interfejs API trybu przycisku możesz wypróbować lokalnie, włączając flagę Chrome chrome://flags#fedcm-button-mode w Chrome w wersji 125 lub nowszej.

IdP mogą też włączyć tryb przycisku, rejestrując okres próbny pochodzenia:

• Zarejestruj wersję próbną pochodzącą od strony trzeciej dla RP.

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

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

1. Otwórz stronę rejestracji próbnego konta źródłowego.
2. Aby poprosić o token, kliknij przycisk Zarejestruj się i wypełnij formularz.
3. Wpisz miejsce pochodzenia uwierzytelniciela jako miejsce pochodzenia internetowe.
4. Aby wstrzyknąć token za pomocą kodu JavaScript w innych źródłach, zaznacz opcję Dopasowywanie do stron innych firm.
5. Kliknij Prześlij.
6. Umieść wydany token na stronie innej firmy.

Aby umieścić token w witrynie innej firmy, dodaj do biblioteki JavaScript lub pakietu SDK dostawcy tożsamości kod podany poniżej. Kod ten jest obsługiwany przez dostawcę tożsamości.

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

Zastąp TOKEN_GOES_HERE swoim tokenem.

Uwaga: jeśli interfejs FedCM API jest wywoływany przez RP, a nie przez skrypt wczytany z IdP, RP musi samodzielnie zarejestrować swoje pochodzenie i przeprowadzić test pochodzenia od pierwszego źródła.

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

CORS

Począwszy od Chrome 125, Chrome będzie wymagać CORS na punktach końcowych weryfikacji tożsamości.

CORS (Cross-Origin-Resource-Sharing) to system, który składa się z przesyłanych nagłówków HTTP i określa, czy przeglądarki blokują dostęp kodu JavaScript na froncie do odpowiedzi na żądania między domenami. Punkt końcowy potwierdzenia tożsamości na serwerze dostawcy tożsamości musi odpowiadać na żądanie dodatkowymi nagłówkami. Oto przykład nagłówka odpowiedzi na żądanie z https://fedcm-rp-demo.glitch.me:

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

Uwaga: ponieważ parametr Access-Control-Allow-Credentials ma wartość true, funkcja Access-Control-Allow-Origin musi zwracać domenę w sposób jawny i nie może używać symbolu wieloznacznego wskazywanego przez parametr *.

SameSite=None

Parametr SameSite pliku cookie określa, czy plik cookie jest ograniczony do kontekstu własnego lub kontekstu tej samej witryny. Jeśli ustawisz wartość None, plik cookie może zostać wysłany do domeny innej firmy.

W ramach FedCM Chrome wysyła pliki cookie do punktu końcowego kont, punktu końcowego oświadczenia tożsamości i punktu końcowego odłączania. Od wersji 125 przeglądarka Chrome będzie wysyłać te żądania z danymi logowania tylko z plikami cookie wyraźnie oznaczonymi jako SameSite=None.