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

Eiji Kitamura

W Chrome 125 interfejs API Button Mode uruchamia interfejs API wersji testowej origin na komputerze. Dzięki interfejsowi Button Mode API dostawcy tożsamości mogą używać FedCM API, nawet jeśli ich użytkownicy nie mają aktywnych sesji dostawcy tożsamości po wywołaniu interfejsu API. Dzięki temu użytkownicy będą mogli logować się w witrynie za pomocą konta sfederowanego przeszedł do witryny dostawcy tożsamości. Interfejs FedCM w trybie przycisku jest bardziej widoczny. w porównaniu z bieżącym widżetem, ponieważ jest on strzeżony przez użytkownika gestu i lepiej odzwierciedla zamiar zalogowania się.

Interfejs Button Mode API

Interfejs FedCM jest teraz dostępny jako widżet wyświetlany w prawym górnym rogu na komputerze lub jako planszę dolną na urządzeniach mobilnych, gdy tylko zostanie wywołany interfejs API. co może nastąpić, gdy użytkownik trafi do strony uzależnionej. Jest to tzw. widżety. Aby wyświetlić widżet, użytkownik musi być zalogowany u dostawcy tożsamości zanim trafią do RP. Usługa FedCM nie miała niezawodnej metody użytkownik może zalogować się u dostawcy tożsamości, zanim będzie mógł zezwolić użytkownikowi na zalogowanie się w RP. za pomocą konta dostępnego u dostawcy tożsamości. Zespół FedCM zamierza dodać taki sposób.

W trybie widżetu w prawym górnym rogu przeglądarki Chrome na komputerze pojawia się okno dialogowe bez aktywacji użytkownika.
W trybie widżetu w prawym górnym rogu w Chrome na komputery w prawym górnym rogu bez aktywacji użytkownika.

Nowy interfejs Button Mode API dodaje nowy tryb interfejsu o nazwie przycisk. W przeciwieństwie do trybu widżetu, tryb przycisku nie powinien być wywoływany, gdy tylko użytkownik RP. Powinna być wywoływana, gdy użytkownik zainicjuje proces logowania. na przykład przez kliknięcie opcji „Zaloguj się przy użyciu dostawcy tożsamości”. Przycisk

Po naciśnięciu przycisku FedCM sprawdza, czy użytkownik jest zalogowany Dostawca tożsamości za pomocą pobrania na konta punktu końcowego lub stan logowania zapisany w Jeśli użytkownik nie jest jeszcze zalogowany, FedCM prosi go o zalogowanie się u dostawcy tożsamości przy użyciu login_url udostępnione 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 za pomocą FedCM otwiera okno, w którym użytkownik może wybrać dostawcę tożsamości konto, za pomocą którego chcesz się zalogować. Wybierając konto, użytkownik może przejść do logowania przy użyciu konta dostawcy tożsamości.

W interfejsie w trybie przycisku wyświetlane okno logowania jest większe niż widżetu. Powinna to być też ikona marki, by zachować spójność wizualną. Minimalny rozmiar ikony dla trybu widżetu to 25x25 pikseli, a minimalny rozmiar ikona w trybie przycisku ma rozmiar 40 x 40 pikseli. Dobrze znany dostawca tożsamości umożliwia określając wiele adresów URL ikon w następujący 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 na środku u góry w Chrome na komputerze wyświetla się okno modalne.
W trybie przycisków na górze w Chrome na komputerze na górze wyświetla się modalne okno z większą ikoną.

Wypróbuj Chrome 125 na https://fedcm-rp-demo.glitch.me/button_flow.

Użytkownik loguje się w grupie objętej ograniczeniami przy użyciu interfejsu Button Mode API.

Aby użyć interfejsu Button Mode API:

  • Włącz eksperymentalną funkcję FedCmButtonMode w aplikacji chrome://flags.
  • Pamiętaj, aby wywoływać interfejs API służący do tymczasowej aktywacji użytkownika np. kliknięcie przycisku.
  • Wywołaj interfejs API, używając parametru mode w następujący 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 potwierdzenia identyfikatora punkt końcowy reprezentujący typ żądania, dodając do niego 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: sprawdź za pomocą 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 innej opcji konta

RP może umożliwić użytkownikom „korzystanie z innych kont” w narzędziu wyboru konta, na przykład wtedy, gdy dostawcy tożsamości obsługują wiele kont lub zastępują istniejące konto.

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

  • Włącz eksperymentalną funkcję FedCmUseOtherAccount w aplikacji chrome://flags lub zarejestruj się w wersji próbnej origin interfejsu Button Mode API.
  • Dostawca tożsamości określa te elementy w konfiguracji dostawcy tożsamości :
{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

Weź udział w testowaniu origin

Aby wypróbować interfejs Button Mode API lokalnie, włącz Chrome flaga chrome://flags#fedcm-button-mode w przeglądarce Chrome 125 lub nowszej.

Dostawcy tożsamości mogą też włączyć tryb przycisku, rejestrując wersję próbną origin:

Wersje próbne origin dają Ci możliwość wypróbowania nowych funkcji i przekazania opinii na temat użyteczność, praktyczność i skuteczność w społeczności standardów internetowych. Dla: więcej informacji znajdziesz w przewodniku dotyczącym testowania origin w witrynach Programistów.

Testowanie origin interfejsu Button Mode API jest dostępne od wersji Chrome 125 do Chrome 130)

  1. Przejdź do rejestracji próbnej origin .
  2. Kliknij przycisk Zarejestruj i wypełnij formularz, aby poprosić o token.
  3. Wpisz źródło dostawcy tożsamości jako Web Origin.
  4. Zaznacz Dopasowanie innej firmy, aby wstawić token z JavaScriptem na inne źródeł.
  5. Kliknij Prześlij.
  6. Umieść wydany token na stronie internetowej innej firmy.

Aby umieścić token w witrynie innej firmy, dodaj ten kod do dostawcy tożsamości Biblioteka JavaScript lub pakiet SDK udostępniany ze źródła dostawcy 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 własnym tokenem.

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

CORS

Chrome będzie egzekwować CORS na identyfikatorze asercja punkt końcowy od Chrome 125.

CORS (cross-Origin-Resource-Sharing) to system, który obejmuje przesyłanie nagłówki HTTP, które określają, czy przeglądarki blokują kod JavaScript frontendu; dostępu do odpowiedzi na żądania z innych domen. Punkt końcowy asercji identyfikatora włączony serwer dostawcy tożsamości musi odpowiedzieć na żądanie przy użyciu dodatkowych nagłówków. poniżej znajdziesz przykładowy nagłówek 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

SameSite=None

Plik cookie SameSite określa, czy plik cookie jest ograniczony do kontekstu własnego lub tej samej witryny. Określając ma wartość None, plik cookie może być wysłany do domeny innej firmy.

W FedCM Chrome wysyła pliki cookie do kont punktu końcowego, potwierdzenie identyfikatora punktu końcowego oraz rozłączenie punktu końcowego. Od Chrome 125, Chrome będzie wysyłać te żądania z danymi uwierzytelniającymi tylko z plikami cookie wyraźnie oznaczone jako SameSite=None.