Aktualizacje FedCM: interfejs Id Sign-In Status API, podpowiedź logowania i inne

Chrome 116 udostępnia funkcje FedCM, takie jak interfejs Login Hint API, User Info API i RP Context API, oraz rozpoczyna testowanie interfejsu IdP Sign-In Status API.

W Chrome 116 wprowadzamy te 3 nowe funkcje Federated Credential Management (FedCM):

  • Login Hint API: określa preferowane konto użytkownika, na które ma nastąpić logowanie.
  • User Info API: pobiera informacje o powracającym użytkowniku, aby dostawca tożsamości mógł renderować spersonalizowany przycisk logowania w ramce iframe.
  • RP Context API: w oknie FedCM użyj tytułu innego niż „Zaloguj się”.

Chrome rozpoczyna też eksperyment dotyczący interfejsu IdP Sign-In Status API. Interfejs IdP Sign-in Status API jest wymagany i po wprowadzeniu będzie zmianą powodującą niezgodność wsteczną. Jeśli masz już wdrożoną usługę FedCM, weź udział w okresie próbnym pochodzenia.

Login Hint API

Gdy FedCM jest wywoływany, przeglądarka wyświetla zalogowane konto od określonego dostawcy tożsamości. Jeśli dostawca tożsamości obsługuje wiele kont, wyświetla listę wszystkich zalogowanych kont.

Okno FedCM z kilkoma kontami użytkowników.
Okno dialogowe FedCM z wieloma kontami użytkowników

Po zalogowaniu się użytkownika strona ufająca (RP) czasami prosi go o ponowne uwierzytelnienie. Użytkownik może jednak nie mieć pewności, którego konta używa. Jeśli dostawca tożsamości może określić, na które konto ma się zalogować użytkownik, łatwiej mu będzie wybrać konto. Podpowiedź dotycząca logowania jest dostępna w Chrome 116. Dzięki niej dostawca tożsamości może zawęzić listę do jednego elementu.

To rozszerzenie dodaje do odpowiedzi punktu końcowego listy kont tablicę login_hints z wszystkimi możliwymi typami filtrów obsługiwanymi przez dostawcę tożsamości. Na przykład odpowiedź dotycząca kont może wyglądać tak, gdy dostawca tożsamości obsługuje filtrowanie według adresu e-mail i identyfikatora:

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

Przekazując login_hints na liście kont, dostawca tożsamości może wywołać navigator.credentials.get() z właściwością loginHint, jak pokazano w tym przykładowym kodzie, aby selektywnie wyświetlać określone konto:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

User Info API

Przyciski logowania ozdobione logo dostawcy tożsamości, które umożliwiają użytkownikom logowanie się za pomocą federacji tożsamości, są obecnie powszechne. Jednak ozdobienie przycisku ikoną profilu użytkownika i jego informacjami jest jeszcze bardziej intuicyjne, zwłaszcza jeśli użytkownik zarejestrował się już w tej witrynie za pomocą dostawcy tożsamości.

przycisk Zaloguj się przez Google,
Przycisk Zaloguj się przez Google
spersonalizowany przycisk Zaloguj się przez Google,
Spersonalizowany przycisk Zaloguj się przez Google

Problem polega na tym, że spersonalizowany przycisk zależy od plików cookie innych firm w domenie dostawcy tożsamości w ramce iframe, które identyfikują zalogowanego użytkownika w celu renderowania przycisku. Po wycofaniu plików cookie innych firm nie będzie on dostępny.

Interfejs User Info API, który będzie dostępny w Chrome 116, umożliwia dostawcy tożsamości uzyskiwanie informacji o powracającym użytkowniku z serwera bez korzystania z plików cookie innych firm.

Interfejs API powinien być wywoływany przez dostawcę tożsamości z elementu iframe osadzonego w witrynie RP, aby mógł pobierać informacje o użytkowniku i renderować spersonalizowany przycisk tak, jakby był częścią interfejsu RP. W ramach wywołania interfejsu API przeglądarka wysyła żądanie do punktu końcowego listy kont, a następnie zwraca tablicę informacji o użytkowniku, jeśli:

  • Użytkownik zalogował się już w stronie zależnej za pomocą dostawcy tożsamości w ramach FedCM w tej samej instancji przeglądarki, a dane nie zostały wyczyszczone.
  • Użytkownik jest zalogowany w systemie dostawcy tożsamości w tej samej instancji przeglądarki.
// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

Pamiętaj, że aby umożliwić wywoływanie funkcji IdentityProvider.getUserInfo() w ramce iframe o tym samym pochodzeniu co dostawca tożsamości, osadzający kod HTML musi wyraźnie zezwalać na to za pomocą identity-credentials-get zasad dotyczących uprawnień.

<iframe src="https://fedcm-demo-idp.dev" allow="identity-credentials-get"></iframe>

Możesz zobaczyć, jak to działa, na stronie https://fedcm-demo-rp.dev/active-mode.

RP Context API

Interfejs RP Context API, który jest dostępny w Chrome 116, umożliwia RP modyfikowanie ciągu znaków w interfejsie okna dialogowego FedCM, aby można było uwzględnić predefiniowane konteksty uwierzytelniania. Na zrzutach ekranu poniżej znajdziesz różne opcje:

Okno FedCM z tekstem „Zaloguj się w usłudze ****”.
Okno FedCM renderowane z tekstem „Zaloguj się w ****”. Jest to opcja domyślna, jeśli nie określono kontekstu RP.
Okno FedCM wyrenderowane z
Okno FedCM z tekstem „Zarejestruj się w usłudze ****”
Okno FedCM wyrenderowane z
Okno FedCM z przyciskiem „Kontynuuj w usłudze ****”
Okno FedCM z tekstem „Użyj ****”
Okno FedCM z przyciskiem „Użyj ****”

Użycie jest proste: podaj właściwość identity.context o wartości "signin" (domyślna), "signup", "use" lub "continue".

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

Testowanie origin interfejsu IdP Sign-In Status API

W Chrome 116 rozpoczęliśmy na komputerach testowanie origin interfejsu IdP Sign-In Status API. Później wprowadzimy go w Chrome na Androida. Wersje próbne origin dają dostęp do nowej lub eksperymentalnej funkcji, dzięki której możesz tworzyć funkcje, które użytkownicy mogą wypróbować przez ograniczony czas, zanim zostaną one udostępnione wszystkim.

IdP Sign-In Status API to mechanizm, w którym dostawca tożsamości informuje przeglądarkę o stanie logowania użytkownika w systemie dostawcy tożsamości. Dzięki temu interfejsowi API przeglądarka może ograniczyć liczbę niepotrzebnych żądań wysyłanych do dostawcy tożsamości i zapobiegać potencjalnym atakom czasowym.

informowanie przeglądarki o stanie logowania użytkownika,

Dostawcy tożsamości mogą sygnalizować przeglądarce stan logowania użytkownika, wysyłając nagłówek HTTP lub wywołując interfejs JavaScript API, gdy użytkownik jest zalogowany u dostawcy tożsamości lub gdy jest wylogowany ze wszystkich kont u dostawcy tożsamości. Przeglądarka rejestruje stan jako „sign-in”, „sign-out” lub „unknown” (domyślnie).

Aby zasygnalizować, że użytkownik jest zalogowany, wyślij nagłówek HTTP w nawigacji najwyższego poziomu lub w żądaniu zasobu podrzędnego z tej samej domeny:IdP-SignIn-Status: action=signin

IdP-SignIn-Status: action=signin

Możesz też wywołać interfejs JavaScript API IdentityProvider.login() z domeny dostawcy tożsamości:

IdentityProvider.login()

Będą one rejestrować stan logowania użytkownika jako „zalogowany”. Gdy stan logowania użytkownika jest ustawiony na „zalogowany”, wywołanie PR FedCM wysyła żądania do punktu końcowego listy kont dostawcy tożsamości i wyświetla dostępne konta w oknie FedCM.

Aby zasygnalizować, że użytkownik jest wylogowany ze wszystkich kont, wyślij nagłówek HTTP IdP-SignIn-Status: action=signout-all w nawigacji najwyższego poziomu lub w żądaniu zasobu podrzędnego z tej samej domeny:

IdP-SignIn-Status: action=signout-all

Możesz też wywołać interfejs JavaScript API IdentityProvider.logout() z domeny dostawcy tożsamości:

IdentityProvider.logout()

Zarejestrują one stan logowania użytkownika jako „wylogowany”. Gdy stan logowania użytkownika to „wylogowany”, wywołanie FedCM kończy się niepowodzeniem bez wysyłania żądania do punktu końcowego listy kont dostawcy tożsamości.

Domyślnie stan logowania dostawcy tożsamości jest ustawiony na „nieznany”. Ten stan jest używany, zanim dostawca tożsamości wyśle sygnał za pomocą interfejsu IdP Sign-In Status API. Wprowadzamy ten stan, aby ułatwić przejście, ponieważ w momencie udostępnienia tego interfejsu API użytkownik może być już zalogowany u dostawcy tożsamości, a dostawca tożsamości może nie mieć możliwości poinformowania o tym przeglądarki, zanim zostanie po raz pierwszy wywołany interfejs FedCM. W takim przypadku wysyłamy żądanie do punktu końcowego listy kont dostawcy tożsamości i aktualizujemy stan na podstawie odpowiedzi z tego punktu:

  • Jeśli punkt końcowy zwróci listę aktywnych kont, zaktualizuj stan na „sign-in” i otwórz okno FedCM, aby wyświetlić te konta.
  • Jeśli punkt końcowy nie zwróci żadnych kont, zaktualizuj stan na „wylogowanie” i przerwij wywołanie FedCM.

Co się stanie, jeśli sesja użytkownika wygaśnie? Umożliwianie użytkownikowi logowania się w ramach dynamicznego procesu logowania

Mimo że dostawca tożsamości nadal informuje przeglądarkę o stanie logowania użytkownika, może on być niezsynchronizowany, np. gdy sesja wygaśnie. Gdy stan logowania to „zalogowano”, przeglądarka próbuje wysłać żądanie z danymi logowania do punktu końcowego listy kont, ale serwer odrzuca je, ponieważ sesja jest już niedostępna. W takim przypadku przeglądarka może dynamicznie zezwolić użytkownikowi na zalogowanie się w usłudze dostawcy tożsamości w wyskakującym okienku.

W oknie FedCM pojawi się komunikat, jak na tym obrazie:

Okienko FedCM z prośbą o zalogowanie się u dostawcy tożsamości.
Okno FedCM z propozycją zalogowania się u dostawcy tożsamości.

Po kliknięciu przycisku Dalej w przeglądarce otworzy się wyskakujące okienko, które przekieruje użytkownika na stronę logowania dostawcy tożsamości.

Wyskakujące okienko wyświetlane po kliknięciu przycisku logowania w usłudze tożsamości.
Wyskakujące okienko wyświetlane po kliknięciu przycisku logowania u dostawcy tożsamości.

Adres URL strony logowania (który musi być źródłem dostawcy tożsamości) można określić za pomocą signin_url w ramach pliku konfiguracji dostawcy tożsamości.

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

Wyskakujące okienko to zwykłe okno przeglądarki, które używa własnych plików cookie. To, co dzieje się w oknie treści, zależy od dostawcy tożsamości, ale nie są dostępne żadne uchwyty okna, które umożliwiałyby wysłanie żądania komunikacji między źródłami do strony RP. Po zalogowaniu się użytkownika dostawca tożsamości powinien:

  • Wyślij nagłówek IdP-SignIn-Status: action=signin lub wywołaj interfejs API IdentityProvider.login(), aby poinformować przeglądarkę, że użytkownik się zalogował.
  • Wywołanie IdentityProvider.close() spowoduje zamknięcie samego siebie (wyskakującego okienka).
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}
Użytkownik loguje się w stronie zależnej po zalogowaniu się w usłudze dostawcy tożsamości za pomocą FedCM

Zachowanie interfejsu IdP Sign-In Status API możesz sprawdzić w naszej wersji demonstracyjnej. Sesja wygasa po 3 minutach od zalogowania się w demonstracyjnym systemie tożsamości. Następnie możesz obserwować logowanie u dostawcy tożsamości w wyskakującym okienku.

Udział w eksperymencie

Możesz wypróbować interfejs IdP Sign-In Status API lokalnie, włączając flagę Chrome
 chrome://flags#fedcm-idp-signin-status-api w Chrome 116 lub nowszym.

Możesz też włączyć interfejs IdP Sign-In Status API, rejestrując dwukrotnie wersję próbną:

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 IdP Sign-In Status API jest dostępne w Chrome w wersjach od 116 do 119.

Rejestrowanie wersji próbnej IdP

  1. Otwórz stronę rejestracji w eksperymentalnym programie Origin Trial.
  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. Kliknij Prześlij.
  5. Dodaj tag origin-trial <meta> do sekcji head stron, które używają elementu IdentityProvider.close(). Może to wyglądać np. tak:
    <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

Rejestrowanie testu pochodzenia innej firmy w przypadku RP

  1. Otwórz stronę rejestracji w eksperymentalnym programie Origin Trial.
  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 wstawić token za pomocą JavaScriptu w innych źródłach.
  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 udostępnianego z domeny 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.

Angażowanie się i przesyłanie opinii

Jeśli masz jakieś uwagi lub napotkasz problemy podczas testowania, możesz je zgłosić na stronie crbug.com.

Zdjęcie: Dan Cristian Pădureț, Unsplash