Credential Management API

Interfejs Credential Management API to oparty na standardach interfejs API przeglądarki, który zapewnia interfejs programowy między witryną a przeglądarką, aby umożliwić płynne logowanie na różnych urządzeniach.

Interfejs Credential Management API:

  • Uproszcza proces logowania – użytkownicy mogą automatycznie logować się na stronie nawet wtedy, gdy ich sesja wygasła lub dane logowania zostały zapisane na innym urządzeniu.
  • Możliwość logowania się jednym kliknięciem za pomocą narzędzia do wyboru konta – użytkownicy mogą wybrać konto w natywnym narzędziu do wyboru konta.
  • Przechowywanie danych logowania – aplikacja może przechowywać kombinację nazwy użytkownika i hasła, a nawet dane konta federacyjnego. Te dane logowania mogą być synchronizowane na różnych urządzeniach przez przeglądarkę.

Chcesz zobaczyć, jak to działa? Wypróbuj demonstrację interfejsu Credential Management API i zapoznaj się z kodem.

Sprawdzanie obsługi interfejsu Credential Management API w przeglądarkach

Obsługa przeglądarek

  • Chrome: 51.
  • Edge: 18.
  • Firefox: 60.
  • Safari: 13.

Źródło

Zanim użyjesz interfejsu Credential Management API, sprawdź, czy obsługiwane jest PasswordCredential lub FederatedCredential.

if (window.PasswordCredential || window.FederatedCredential) {
  // Call navigator.credentials.get() to retrieve stored
  // PasswordCredentials or FederatedCredentials.
}

Logowanie użytkownika

Aby zalogować użytkownika, pobierz dane logowania z menedżera haseł przeglądarki i użyj ich do zalogowania użytkownika.

Na przykład:

  1. Gdy użytkownik wejdzie na Twoją stronę, ale nie zaloguje się, zadzwoń pod numer navigator.credentials.get().
  2. Użyj odzyskanych danych logowania, aby zalogować użytkownika.
  3. Zaktualizuj interfejs użytkownika, aby pokazać, że użytkownik jest zalogowany.

Więcej informacji znajdziesz w artykule Logowanie użytkowników.

Zapisywanie lub aktualizowanie danych logowania użytkowników

Jeśli użytkownik zalogował się za pomocą dostawcy tożsamości sfederowanej, takiego jak Google Sign-In, Facebook czy GitHub:

  1. Po zalogowaniu się lub utworzeniu konta przez użytkownika utwórz FederatedCredential z adresem e-mail użytkownika jako identyfikatorem i wskaż dostawcę tożsamości za pomocą parametru FederatedCredentials.provider.
  2. Zapisz obiekt danych logowania za pomocą elementu navigator.credentials.store().

Więcej informacji znajdziesz w artykule Logowanie użytkowników.

Jeśli użytkownik zalogował się przy użyciu nazwy użytkownika i hasła:

  1. Gdy użytkownik zaloguje się lub utworzy konto, utwórz PasswordCredential z identyfikatorem użytkownika i hasłem.
  2. Zapisz obiekt danych logowania za pomocą elementu navigator.credentials.store().

Więcej informacji znajdziesz w artykule Zapisywanie danych logowania z formularzy.

Wyloguj się

Gdy użytkownik się wyloguje, wywołaj funkcję navigator.credentials.preventSilentAccess(), aby uniemożliwić automatyczne ponowne zalogowanie.

Wyłączenie automatycznego logowania umożliwia też użytkownikom łatwe przełączanie się między kontami, na przykład między kontami służbowymi i osobistymi lub między kontami na współdzielonych urządzeniach, bez konieczności ponownego wpisywania danych logowania.

Więcej informacji znajdziesz w sekcji Wyloguj się.

Prześlij opinię