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 okres próbny w przypadku interfejsu Id Sign-In Status API.

W Chrome 116 Chrome udostępnia te 3 nowe funkcje zarządzania sfederowanymi danymi logowania (FedCM):

• Login Hint API: określ preferowane konto użytkownika, na które chcesz się zalogować.
• Interfejs użytkownika informacji o użytkownikach: pobiera informacje o powracającym użytkowniku, aby dostawca tożsamości mógł wyrenderować spersonalizowany przycisk logowania w elemencie iframe.
• RP Context API: użyj tytułu innego niż „Zaloguj się” w oknie dialogowym FedCM.

Oprócz tego Chrome rozpoczyna okres próbny domeny dla interfejsu API stanu logowania dostawcy tożsamości. Interfejs Id Sign-in Status API jest wymagany i zmieni się po jego wysłaniu. Jeśli masz już implementację FedCM, pamiętaj o uczestnictwie w testowaniu origin.

Interfejs API podpowiedzi logowania

Po wywołaniu FedCM przeglądarka pokazuje konto zalogowanego dostawcy tożsamości. Jeśli dostawca tożsamości obsługuje wiele kont, wyświetla listę wszystkich zalogowanych kont.

Okno FedCM z widocznymi kontami użytkowników

Czasami po zalogowaniu się strona uzależniona (RP) prosi użytkownika o ponowne uwierzytelnienie. Użytkownik może jednak nie być pewny, z którego konta korzystał. Jeśli w grupie objętej ograniczeniami można określić konto, za pomocą którego chcesz się zalogować, użytkownik będzie łatwiej wybrać konto. Wskazówka dotycząca logowania to dostawa w Chrome 116, dzięki czemu RP może zawęzić listę do jednego.

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

{
  "accounts": [{
    "id": "demo1",
    "email": "[e-mail]",
    "name": "John Doe",
    "login_hints": ["demo1", "[e-mail]"],
    ...
  }, {
    "id": "demo2",
    "email": "[e-mail]",
    "name": "Jane Doe",
    "login_hints": ["demo2", "[e-mail]"],
    ...
  }, ...]
}

Przekazując login_hints na liście kont, grupa z ograniczonym dostępem może wywołać metodę navigator.credentials.get() z właściwością loginHint, jak w tym przykładzie kodu, by selektywnie wyświetlić określone konto:

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

Interfejs User Info API

Obecnie powszechnie używane są przyciski logowania ozdobione logo dostawcy tożsamości, które umożliwiają użytkownikom logowanie się przy użyciu federacji tożsamości. Dekorowanie przycisku za pomocą ikony profilu użytkownika oraz jego informacji jest jednak jeszcze bardziej intuicyjne, zwłaszcza jeśli użytkownik wcześniej zarejestrował się na tej stronie u dostawcy tożsamości.

Przycisk Zaloguj się przez Google

Przycisk Spersonalizowane logowanie przez Google

Problem polega na tym, że spersonalizowany przycisk identyfikuje zalogowanego użytkownika na potrzeby renderowania przycisku, który zależy od plików cookie innych firm znajdujących się w domenie dostawcy tożsamości w elemencie iframe. Nie będzie on dostępny po wycofaniu plików cookie innych firm.

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

Interfejs API powinien być wywoływany przez dostawcę tożsamości z elementu iframe umieszczonego na stronie objętej ograniczeniami, aby mógł pobrać informacje o użytkowniku i wyrenderować spersonalizowany przycisk tak, jakby był częścią powierzchni objętej ograniczeniami. Za pomocą wywołania interfejsu API przeglądarka wysyła żądanie do punktu końcowego listy kont, a potem zwraca tablicę informacji o użytkowniku, jeśli:

• Użytkownik zalogował się w przeszłości w tej samej instancji przeglądarki u dostawcy tożsamości przez FedCM, a dane nie zostały wyczyszczone.
• Użytkownik jest zalogowany u 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 elementu IdentityProvider.getUserInfo() z elementu iframe o tym samym pochodzeniu co dostawca tożsamości, osadzony kod HTML musi wyraźnie zezwalać na to z zasadą uprawnień identity-credentials-get.

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

Możesz go zobaczyć na stronie https://fedcm-rp-demo.glitch.me/button.

Interfejs RP Context API

Interfejs RP Context API, który jest dostępny w Chrome 116, umożliwia grupie objętej ograniczeniami zmodyfikowanie ciągu znaków w interfejsie okna FedCM, aby dostosować go do zdefiniowanych wstępnie kontekstów uwierzytelniania. Oto zrzuty ekranu przedstawiające różne opcje:

Wyrenderowano okno FedCM z komunikatem „Zaloguj się do ****”. Jeśli kontekst RP nie jest określony, jest to opcja domyślna.

Wyrenderowano okno FedCM z tekstem „Sign up to ****”

Okno FedCM wyrenderowane z komunikatem „Przejdź do ****”

Okno FedCM zostało wyrenderowane z oznaczeniem „Użyj ****”

Korzystanie z usługi jest proste. Podaj właściwość identity.context jako jedną z "signin" (wartość 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 API stanu logowania dostawcy tożsamości

W przeglądarce Chrome w wersji 116 na komputerze Chrome rozpoczyna test origin interfejsu API stanu logowania dostawcy tożsamości, a później Chrome na Androida. Okres próbny daje Ci dostęp do nowej lub eksperymentalnej funkcji, którą użytkownicy mogą wypróbować przez ograniczony czas, zanim stanie się ona dostępna dla wszystkich.

Ważne: interfejs Id Sign-In Status API to zmiana powodująca niezgodność i będzie wymagana dla FedCM w momencie wysyłki.

Interfejs API stanu logowania dostawcy tożsamości to mechanizm, dzięki któremu dostawca tożsamości informuje przeglądarkę o stanie logowania użytkownika u dostawcy tożsamości. Dzięki temu interfejsowi przeglądarka może zmniejszyć liczbę niepotrzebnych żądań wysyłanych do dostawcy tożsamości i łagodzić potencjalne ataki czasowe.

Uwaga: FedCM wprowadza żądanie danych uwierzytelniających do punktu końcowego listy kont. To żądanie nie wysyła danych identyfikujących osobę zgłaszającą prośbę i nie zezwala na przekazywanie danych dostarczanych przez grupę objętą uwierzytelnianiem. Jednak przeglądarka oddzielnie wykonuje żądanie bez danych uwierzytelniających zawierające informacje z grupy objętej ograniczeniami do client_metadata_endpoint, serwer dostawcy tożsamości może skorelować żądanie bez uprawnień (stochatycznie) z żądaniem uwierzytelnionym, korzystając z czasu lub innych danych odciskowych. Więcej informacji znajdziesz na tych slajdach.

Informowanie przeglądarki o stanie logowania użytkownika

Dostawcy tożsamości mogą informować przeglądarkę o stanie logowania użytkownika, wysyłając nagłówek HTTP lub wywołując interfejs JavaScript API, gdy użytkownik jest zalogowany w tym systemie lub gdy użytkownik jest zalogowany ze wszystkich swoich kont dostawcy tożsamości. Przeglądarka może zarejestrować jeden z tych stanów: „logowanie”, „wylogowanie” lub „nieznane” (domyślnie).

Aby zasygnalizować, że użytkownik jest zalogowany, wyślij nagłówek HTTP IdP-SignIn-Status: action=signin w nawigacji najwyższego poziomu lub w żądaniu zasobu podrzędnego tego samego źródła:

IdP-SignIn-Status: action=signin

Możesz też wywołać JavaScript API IdentityProvider.login() ze źródła dostawcy tożsamości:

IdentityProvider.login()

Spowoduje to zarejestrowanie stanu logowania użytkownika jako „zalogowania”. Gdy stan logowania użytkownika to „zaloguj się”, funkcja wywołująca PR FedCM wysyła żądania do punktu końcowego listy kont dostawcy tożsamości i wyświetla użytkownikowi 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 panelu nawigacyjnym najwyższego poziomu lub w żądaniu zasobu podrzędnego tego samego źródła:

IdP-SignIn-Status: action=signout-all

Możesz też wywołać JavaScript API IdentityProvider.logout() ze źródła dostawcy tożsamości:

IdentityProvider.logout()

Spowoduje to zarejestrowanie stanu zalogowania użytkownika jako „wylogowanie”. Gdy stan logowania użytkownika to „wyloguj się”, 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 Id Sign-In Status API. Wprowadzamy ten stan, aby ułatwić przejście, ponieważ użytkownik mógł już być zalogowany u dostawcy tożsamości, gdy wysyłamy ten interfejs API, a dostawca tożsamości może nie mieć możliwości zasygnalizowania tego do przeglądarki przed pierwszym wywołaniem FedCM. W takim przypadku wysyłamy żądanie do punktu końcowego listy kont dostawcy tożsamości i aktualizujemy stan na podstawie odpowiedzi punktu końcowego listy kont:

• Jeśli punkt końcowy zwraca listę aktywnych kont, zmień stan na „logowanie” i otwórz okno FedCM, aby je wyświetlić.
• Jeśli punkt końcowy nie zwraca żadnych kont, zaktualizuj stan na „sign-out” (wyloguj się), a wywołanie FedCM się nie uda.

Co się stanie, gdy sesja użytkownika wygaśnie? Zezwalaj użytkownikowi na logowanie się w ramach dynamicznego procesu logowania

Dostawca tożsamości będzie nadal informować przeglądarkę o stanie logowania użytkownika, ale może nie być zsynchronizowany, na przykład o wygaśnięciu sesji. Przeglądarka próbuje wysłać do punktu końcowego listy kont żądanie danych uwierzytelniających, gdy stan logowania to „logowanie”, ale serwer je odrzuca, ponieważ sesja nie jest już dostępna. W takiej sytuacji przeglądarka może dynamicznie zezwolić użytkownikowi na logowanie się w dostawcy tożsamości przez wyskakujące okienko.

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

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

Gdy klikniesz przycisk Dalej, przeglądarka otworzy wyskakujące okienko z linkiem do strony logowania dostawcy tożsamości.

Po kliknięciu przycisku logowania się przy użyciu przycisku dostawcy tożsamości pojawi się wyskakujące okienko.

Uwaga: witryna nie ma kontroli nad rozmiarem wyskakującego okienka przed jego otwarciem. Domyślny rozmiar to 500 pikseli (szerokość) i 600 pikseli (wysokość). Po otwarciu okna z poziomu treści strona może zmienić jego rozmiar.

Adres URL strony logowania (który musi być źródłem dostawcy tożsamości) można określić za pomocą atrybutu signin_url w 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 korzysta z własnych plików cookie. Wszystko, co dzieje się w oknie treści, zależy od dostawcy tożsamości, ale nie są dostępne żadne uchwyty okien, dzięki którym można wysłać żądanie komunikacji między domenami 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ę o zalogowaniu użytkownika.
• Wywołaj metodę IdentityProvider.close(), aby się zamknąć (wyskakujące okienko).

// 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 grupie objętej ograniczeniami po zalogowaniu się u dostawcy tożsamości przy użyciu FedCM

Uwaga: to dynamiczne logowanie jest przydatne, gdy sesja dostawcy tożsamości wygasła bez uprzedniego wylogowania, co powoduje sprzeczny stan logowania w przeglądarce. Nie zostanie on aktywowany w przypadku użytkowników, którzy nie zalogowali się jeszcze u dostawcy tożsamości. Ten nowy proces został opracowany z myślą o sytuacjach, gdy stan logowania dostawcy tożsamości w przeglądarce to „logowanie”, ale punkt końcowy na liście kont dostawcy tożsamości nie zwraca żadnych kont.

Zakładając, że interfejs Id Sign-In Status API zostanie wywołany niezwłocznie po wywołaniu FedCM, może wystąpić dowolny z tych scenariuszy:

• Jeśli przeglądarka nie zna stanu logowania użytkownika („nieznany”), stan jest aktualizowany (w zależności od odpowiedzi dostawcy tożsamości z punktu końcowego listy kont). Dynamiczny proces logowania nie zostanie aktywowany.
• Jeśli użytkownik zalogował się w dostawcy tożsamości w przeglądarce („logowanie”), a potem wyraźnie wylogował się z tego dostawcy, dynamiczny proces logowania nie zostanie aktywowany.
• Jeśli użytkownik zalogował się w usłudze dostawcy tożsamości w przeglądarce („logowanie”), ale sesja wygaśnie bez jednoznacznego wylogowania, zostanie uruchomiony dynamiczny proces logowania.

Interfejs API stanu logowania dostawcy tożsamości nie umożliwia wyświetlania przez grupę objętą tożsamością okna „Zaloguj się w dostawcy tożsamości” użytkownikom, którzy nie są zalogowani w usłudze dostawcy tożsamości. To osobna funkcja, która może zostać dodana w przyszłości.

Możesz wypróbować działanie interfejsu API stanu logowania dostawcy tożsamości w naszej prezentacji. Sesja wygasa po 3 minutach od zalogowania się w demonstracyjnym dostawcy tożsamości. Następnie możesz obserwować, jak logowanie u dostawcy tożsamości działa w wyskakującym okienku.

Weź udział w testowaniu origin

Możesz wypróbować interfejs API stanu logowania dostawcy tożsamości lokalnie, włączając włączoną
flagę Chrome chrome://flags#fedcm-idp-signin-status-api w Chrome
Chrome 116 lub nowszą wersję.

Interfejs API stanu logowania dostawcy tożsamości możesz też włączyć, rejestrując wersję próbną origin 2 razy:

• Zarejestruj wersję próbną origin dla dostawcy tożsamości.
• Zarejestruj w grupie objętej ograniczeniami testowy origin zewnętrzny.

Testowanie origin pozwala testować nowe funkcje oraz przekazywać społeczności użytkowników standardów internetowych opinie na temat ich użyteczności, praktyki i skuteczności. Więcej informacji znajdziesz w przewodniku po okresie próbnym dla twórców witryn.

Testowanie origin interfejsu API stanu logowania dostawcy tożsamości jest dostępne od Chrome 116 do Chrome 119.

Zarejestruj wersję próbną origin u dostawcy tożsamości

1. Otwórz stronę rejestracji wersji próbnej.
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. Kliknij Prześlij.
5. Dodaj tag origin-trial <meta> w nagłówku stron, które korzystają z adresu IdentityProvider.close(). Przykład:
   <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

Ostrzeżenie: wysłanie nagłówka HTTP Origin-Trial nie będzie działać w przypadku tego interfejsu API.

Rejestrowanie testowania zewnętrznego źródła dla grupy objętej ograniczeniami

1. Otwórz stronę rejestracji wersji próbnej.
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 innych firm, aby wstrzyknąć token z JavaScriptem w innych źródłach.
5. Kliknij Prześlij.
6. Umieść wystawiony token na stronie innej firmy.

Aby umieścić token na stronie innej firmy, dodaj poniższy kod do swojej biblioteki JavaScript lub pakietu SDK udostępnianego 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.

Uwaga: jeśli usługa FedCM jest wykonywana bezpośrednio przez grupę z ograniczonym dostępem bez wczytywania skryptów dostawcy tożsamości,
musi zarejestrować swój punkt początkowy na potrzeby testowania origin.

Angażuj i dziel się opiniami

Jeśli masz uwagi lub napotkasz jakieś problemy podczas testowania, możesz podzielić się nimi na stronie crbug.com.

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