Credential Management API to oparty na standardach interfejs API przeglądarki między witryną a przeglądarką, co ułatwia logowanie się na różnych urządzeniach.
Interfejs Credential Management API:
- Upraszczanie procesu logowania się – użytkownicy mogą być automatycznie logowani na stronie nawet wtedy, gdy ich sesja wygasła lub zapisali dane logowania na innym urządzeniu.
- Umożliwia logowanie się jednym kliknięciem przy użyciu funkcji wyboru konta – użytkownicy mogą wybrać konto w natywnym narzędziu do wybierania konta.
- Przechowuje dane logowania – aplikacja może przechowywać kombinację nazwy użytkownika i hasła, a nawet szczegóły konta sfederowanego. Przeglądarka może synchronizować te dane logowania między urządzeniami.
Chcesz zobaczyć, jak to działa? Wypróbuj Wersja demonstracyjna interfejsu Credential Management API i przyjrzyj się kodem.
Sprawdzanie obsługi przeglądarki Credential Management API przez przeglądarkę
Zanim zaczniesz korzystać z interfejsu Credential Management API, sprawdź, czy PasswordCredential
lub FederatedCredential
.
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
Zalogowany użytkownik
Aby zalogować użytkownika, pobierz dane logowania z hasła przeglądarki i używać ich do logowania użytkownika.
Na przykład:
- Gdy użytkownik trafia na Twoją stronę bez logowania się,
zadzwoń do:
navigator.credentials.get()
. - Zaloguj użytkownika przy użyciu pobranych danych logowania.
- Zaktualizuj interfejs, aby wskazać, że użytkownik jest zalogowany.
Więcej informacji: Logowanie użytkowników.
Zapisywanie i aktualizowanie danych logowania użytkownika
Jeśli użytkownik zalogował się przy użyciu dostawcy tożsamości sfederowanego, takiego jak Google Logowanie, Facebook, GitHub:
- Gdy użytkownik zaloguje się lub utworzy konto, utwórz
FederatedCredential
z adresem e-mail użytkownika takim jak identyfikator i określ dostawcę tożsamości za pomocąFederatedCredentials.provider
. - Zapisz obiekt danych logowania za pomocą narzędzia
navigator.credentials.store()
.
Więcej informacji: Logowanie użytkowników.
Jeśli użytkownik zalogował się, korzystając z nazwy użytkownika i hasła:
- Gdy użytkownik zaloguje się lub utworzy konto, utwórz
PasswordCredential
z identyfikatorem użytkownika i hasła. - Zapisz obiekt danych logowania za pomocą narzędzia
navigator.credentials.store()
.
Więcej informacji: Zapisywanie danych logowania z Formularzy
Wyloguj się
Gdy użytkownik się wyloguje, wywołaj navigator.credentials.preventSilentAccess()
, aby uniemożliwić automatyczne zalogowanie użytkownika z powrotem.
Wyłączenie automatycznego logowania umożliwia też łatwe przełączanie się między kontami, na przykład między kontami służbowymi i osobistymi lub między kontami współdzielonych urządzeniach, bez konieczności ponownego wpisywania danych logowania.
Więcej informacji: Wyloguj się.