Credential Management API to oparty na standardach interfejs API przeglądarki, który zapewnia zautomatyzowany interfejs między stroną a przeglądarką, co umożliwia bezproblemowe logowanie się na różnych urządzeniach.
Interfejs Credential Management API:
- Usprawnianie logowania – użytkownicy mogą być automatycznie logowani z powrotem w witrynie, nawet jeśli ich sesja wygasła lub zapisali dane logowania na innym urządzeniu.
- Pozwala na logowanie się jednym dotknięciem za pomocą funkcji wyboru konta – użytkownicy mogą wybrać konto w natywnym narzędziu wyboru kont.
- Przechowuj dane logowania – aplikacja może przechowywać kombinację nazwy użytkownika i hasła, a nawet sfederowane dane konta. Dane logowania mogą być synchronizowane między urządzeniami za pomocą przeglądarki.
Chcesz zobaczyć, jak to działa? Wypróbuj prezentację interfejsu Credential Management API i zapoznaj się z kodem.
Sprawdź obsługę interfejsu Credential Management API w przeglądarce
Zanim zaczniesz korzystać z interfejsu Credential Management API, sprawdź, czy obsługiwany jest interfejs PasswordCredential
lub FederatedCredential
.
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
Zaloguj użytkownika
Aby zalogować użytkownika, pobierz dane logowania z menedżera haseł przeglądarki i użyj ich do zalogowania się.
Na przykład:
- Gdy użytkownik trafi do Twojej witryny, który nie jest zalogowany, wywołaj metodę
navigator.credentials.get()
. - Użyj pobranych danych logowania, aby zalogować użytkownika.
- Zaktualizuj interfejs, aby wskazać, że użytkownik jest zalogowany.
Więcej informacji znajdziesz w artykule Logowanie użytkowników.
Zapisywanie i aktualizowanie danych logowania użytkownika
Jeśli użytkownik zalogował się przy użyciu sfederowanego dostawcy tożsamości, takiego jak Google Sign-In, Facebook czy GitHub:
- Gdy użytkownik zaloguje się lub utworzy konto, utwórz
FederatedCredential
z adresem e-mail użytkownika jako identyfikatorem 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 znajdziesz w artykule Logowanie użytkowników.
Jeśli użytkownik zalogował się przy użyciu nazwy użytkownika i hasła:
- Gdy użytkownik zaloguje się lub utworzy konto, utwórz
PasswordCredential
z identyfikatorem użytkownika i hasłem. - Zapisz obiekt danych logowania za pomocą narzędzia
navigator.credentials.store()
.
Więcej informacji znajdziesz w artykule Zapisywanie danych logowania z Formularzy.
Wyloguj się
Gdy użytkownik się wyloguje, wywołaj navigator.credentials.preventSilentAccess()
, aby uniemożliwić jego 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 a osobistymi lub między kontami na współdzielonych urządzeniach, bez konieczności ponownego podawania danych logowania.
Więcej informacji znajdziesz w sekcji Wyloguj się.