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
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:
- Gdy użytkownik wejdzie na Twoją stronę, ale nie zaloguje się,
zadzwoń pod numer
navigator.credentials.get()
. - Użyj odzyskanych 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 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:
- 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ę, 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łem. - 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ć mu automatyczne zalogowanie się.
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ę.