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

Wersja Chrome 116 zawiera funkcje FedCM, takie jak interfejsy Login Hint API, User Info API i RP Context API, oraz rozpoczyna okres próbny interfejsu Sign-In Status API.

W Chrome 116 udostępniamy 3 nowe funkcje federowanego zarządzania poświadczeniami (FedCM):

  • Interfejs Login Hint API: umożliwia określenie preferowanego konta użytkownika, na które ma nastąpić logowanie.
  • Interfejs API informacji o użytkowniku: pobiera informacje o powracającym użytkowniku, aby dostawca tożsamości (IdP) mógł wyświetlić spersonalizowany przycisk logowania w ramce iframe.
  • RP Context API: w dialogu FedCM użyj tytułu innego niż „Zaloguj się”.

Dodatkowo Chrome rozpoczyna testowanie wersji źródłowej interfejsu API stanu logowania dostawcy tożsamości. Interfejs API stanu logowania dostawcy tożsamości jest wymagany i będzie stanowić zmianę powodującą przerwanie działania, gdy zostanie wdrożony. Jeśli masz już implementację FedCM, weź udział w testach wersji źródłowej.

Login Hint API

Gdy wywołasz FedCM, przeglądarka wyświetla konto logowania z wybranego dostawcy tożsamości (IdP). Jeśli dostawca tożsamości obsługuje wiele kont, wyświetla wszystkie zalogowane konta.

Okno FedCM pokazujące wiele kont użytkowników
Okno FedCM z wieloma kontami użytkowników

Po zalogowaniu się użytkownika strona trzecia może poprosić go o ponowne uwierzytelnienie. Użytkownik może jednak nie być pewien, którego konta używał. Jeśli RP może określić, na którym koncie ma się zalogować, użytkownik łatwiej wybierze konto. Wskazówka logowania jest dostępna w Chrome 116, dzięki czemu RP może ograniczyć listę do jednego elementu.

To rozszerzenie dodaje tablicę login_hints w odpowiedzi listy kont od dostawcy tożsamości, wraz ze wszystkimi typami filtrów, które obsługuje dostawca tożsamości. Jeśli dostawca tożsamości obsługuje filtrowanie według adresu e-mail i identyfikatora, odpowiedź dotycząca kont może wyglądać tak:

{
  "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 parametr login_hints na liście kont, RP może wywołać funkcję navigator.credentials.get() z użyciem 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 z użyciem federacji tożsamości, są obecnie powszechne. Jednak ozdobienie przycisku za pomocą ikony profilu użytkownika i jego informacji jest jeszcze bardziej intuicyjne, zwłaszcza gdy użytkownik wcześniej zarejestrował się 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
Dostosowany 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 służą do identyfikowania zalogowanego użytkownika i wyświetlenia przycisku. Gdy pliki cookie innych firm zostaną wycofane, przycisk nie będzie dostępny.

Interfejs User Info API, dostępny w Chrome 116, umożliwia dostawcy usług uwierzytelniania pobieranie informacji o powracającym użytkowniku z serwera bez konieczności korzystania z plików cookie innych firm.

Interfejs API powinien być wywoływany przez dostawcę tożsamości w ramach elementu iframe umieszczonego w witrynie dostawcy usług, aby mógł pobierać informacje o użytkowniku i renderować spersonalizowany przycisk tak, jakby był częścią interfejsu dostawcy usług. Gdy wywołuje interfejs API, przeglądarka wysyła żądanie do punktu końcowego accounts list, a potem zwraca tablicę informacji o użytkowniku, jeśli:

  • Użytkownik zalogował się w przeszłości w tej samej instancji przeglądarki w usłudze RP za pomocą dostawcy tożsamości przez FedCM i dane nie zostały wyczyszczone.
  • Użytkownik jest zalogowany w usłudze 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.
}

Aby umożliwić wywoływanie funkcji IdentityProvider.getUserInfo() z ramki iframe, która ma ten sam element docelowy co dostawca tożsamości, kod HTML do umieszczania w ramce musi wyraźnie zezwalać na to za pomocą identity-credentials-get polityki uprawnień.

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

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

RP Context API

Interfejs Context API dla RP, dostępny w Chrome 116, umożliwia dostawcy usług uwierzytelniania modyfikowanie ciągu w interfejsie dialogowym FedCM, aby uwzględnić wstępnie zdefiniowane konteksty uwierzytelniania. Poniżej znajdziesz zrzuty ekranu z różnymi opcjami:

Okno FedCM renderowane za pomocą
Okno FedCM z tytułem „Zaloguj się w usłudze ****”. Jest to opcja domyślna, jeśli nie jest określony kontekst RP.
Okno FedCM renderowane za pomocą
Okno FedCM renderowane z opcją „Zarejestruj się w usłudze ****”
Okno FedCM renderowane za pomocą
Okno FedCM z opcją „Dalej” (****)
Okno FedCM renderowane za pomocą
Okno FedCM renderowane za pomocą opcji „Użyj ****”

Użycie jest proste. Właściwości identity.context nadaj wartość "signin" (domyślnie), "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

Chrome rozpoczyna testowanie origin interfejsu API stanu logowania w dostawcy tożsamości na komputerach z Chrome 116, a później w Chrome na Androida. Weryfikacja wersji próbnej origin daje dostęp do nowej lub eksperymentalnej funkcji, która umożliwia tworzenie funkcji, z której użytkownicy mogą korzystać przez ograniczony czas, zanim stanie się ona dostępna dla wszystkich.

Interfejs API stanu logowania dostawcy tożsamości 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ń do dostawcy tożsamości i zmniejszyć ryzyko potencjalnych ataków związanych z czasem.

Informowanie przeglądarki o stanie logowania użytkownika

Dostawcy tożsamości mogą sygnalizować stan logowania użytkownika przeglądarce, wysyłając nagłówek HTTP lub wywołując interfejs JavaScript API, gdy użytkownik jest zalogowany w dostawcy tożsamości, lub gdy jest wylogowany ze wszystkich kont dostawcy tożsamości. Przeglądarka rejestruje stan jako „logowanie”, „wylogowywanie” lub „nieznany” (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 żądaniu zasobu podrzędnego z tego samego źródła:

IdP-SignIn-Status: action=signin

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

IdentityProvider.login()

Stan logowania użytkownika zostanie zarejestrowany jako „logowanie”. Gdy stan logowania użytkownika jest ustawiony na „logowanie”, wywołanie FedCM przez PR 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 ramach nawigacji najwyższego poziomu lub żądania zasobu podrzędnego z tego samego źródła:

IdP-SignIn-Status: action=signout-all

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

IdentityProvider.logout()

Stan logowania użytkownika zostanie zarejestrowany jako „wylogowanie”. Gdy stan logowania użytkownika to „wylogowanie”, wywołanie interfejsu 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 API stanu logowania dostawcy tożsamości. Wprowadzamy ten stan, aby ułatwić przejście, ponieważ użytkownik może być już zalogowany w dostawcy tożsamości, gdy udostępnimy ten interfejs API, a dostawca tożsamości może nie mieć możliwości przekazania tej informacji przeglądarce w momencie pierwszego wywołania FedCM. W tym przypadku wysyłamy żądanie do punktu końcowego listy kont dostawcy tożsamości i aktualizujemy stan na podstawie odpowiedzi z punktu końcowego listy kont:

  • Jeśli punkt końcowy zwróci listę aktywnych kont, zmień stan na „logowanie” 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 zakończ wywołanie FedCM.

Co się stanie, jeśli sesja użytkownika wygaśnie? Zezwalanie użytkownikowi na logowanie się za pomocą dynamicznego procesu logowania

Mimo że dostawca tożsamości nadal informuje przeglądarkę o stanie logowania użytkownika, może on być niezsynchronizowany, na przykład po wygaśnięciu sesji. Gdy stan logowania to „logowanie”, przeglądarka próbuje wysłać do punktu końcowego listy kont żądanie z danymi logowania, ale serwer odrzuca je, ponieważ sesja nie jest już dostępna. W takim przypadku przeglądarka może dynamicznie umożliwić użytkownikowi zalogowanie się w usłudze dostawcy tożsamości za pomocą wyskakującego okienka.

W oknie FedCM pojawi się komunikat, jak pokazano na poniższym obrazie:

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

Po kliknięciu przycisku Dalej przeglądarka otwiera wyskakujące okienko, które przekierowuje użytkownika na stronę logowania dostawcy tożsamości.

Okno wyskakujące wyświetlane po kliknięciu przycisku logowania w usługach IdP.
Wyskakujące okienko wyświetlane po kliknięciu przycisku logowania do dostawcy tożsamości.

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

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

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 ma żadnych uchwytów okna, które umożliwiałyby wysłanie żądania komunikacji między domenami do strony strony RP. Gdy użytkownik się zaloguje, 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 zalogował się.
  • wywołać funkcję IdentityProvider.close(), aby 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 usłudze RP po zalogowaniu się w dostawcy tożsamości za pomocą FedCM

Aby wypróbować działanie interfejsu API stanu logowania dostawcy tożsamości, skorzystaj z naszego demo. Sesja wygaśnie po 3 minutach od zalogowania się w demonstracyjnym dostawcy tożsamości. Następnie możesz obserwować logowanie do dostawcy tożsamości w wyskakującym okienku.

Udział w okresie próbnym usługi pochodzenia

Aby przetestować interfejs API stanu logowania dostawcy tożsamości, możesz go uruchomić lokalnie, włączając flagę
chrome://flags#fedcm-idp-signin-status-api w
Chrome 116 lub nowszej.

Możesz też włączyć interfejs API stanu logowania dostawcy tożsamości, rejestrując próbną wersję pochodzenia dwukrotnie:

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

Zarejestruj wersję próbną pochodzenia dla dostawcy tożsamości

  1. Otwórz stronę rejestracji wersji próbnej origin.
  2. Aby poprosić o token, kliknij przycisk Zarejestruj się i wypełnij formularz.
  3. Wpisz miejsce pochodzenia uwierzytelniciela jako miejsce pochodzenia internetowego.
  4. Kliknij Prześlij.
  5. Dodaj do nagłówka stron, które używają tagu IdentityProvider.close(), tag origin-trial <meta>. Może to wyglądać na przykład tak:
    <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

Zarejestruj wersję próbną pochodzenia zewnętrznego dla RP

  1. Otwórz stronę rejestracji wersji próbnej origin.
  2. Aby poprosić o token, kliknij przycisk Zarejestruj się i wypełnij formularz.
  3. Wpisz miejsce pochodzenia uwierzytelniciela jako miejsce pochodzenia internetowego.
  4. Zaznacz Dopasowywanie zewnętrzne, aby wstrzyknąć token za pomocą kodu JavaScript w innych źródłach.
  5. Kliknij Prześlij.
  6. Umieść wydany token na stronie innej firmy.

Aby umieścić token w witrynie innej firmy, dodaj do swojej biblioteki JavaScriptu lub zestawu SDK kod pochodzący z ź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 swoim tokenem.

Zaangażowanie i przesyłanie opinii

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

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