Aby zalogować użytkowników, pobierz dane logowania z menedżera haseł przeglądarki i użyj ich do automatycznego logowania. Użytkownicy z wieloma kontami mogą wybrać konto jednym kliknięciem za pomocą funkcji wyboru kont.
Automatyczne logowanie
Logowanie automatyczne może się odbywać w dowolnym miejscu w witrynie – nie tylko na stronie najwyższego poziomu, ale także na innych stronach leaf page. Jest to przydatne, gdy użytkownicy docierają do różnych stron w witrynie za pomocą wyszukiwarki.
Aby włączyć automatyczne logowanie:
- Pobieranie danych logowania.
- Uwierzytelnij użytkownika.
- Zaktualizuj interfejs lub otwórz spersonalizowaną stronę.
Pobieranie danych logowania
Aby uzyskać dane logowania, wywołaj navigator.credentials.get().
Określ typ danych logowania, o które prosisz, nadając mu password lub federated.
Zawsze używaj mediation: 'silent' do automatycznego logowania, aby móc łatwo zamknąć ten proces, jeśli użytkownik:
- Brak zapisanych danych logowania.
- Zawiera wiele zapisanych danych logowania.
- Jest wylogowany.
Zanim uzyskasz dane logowania, sprawdź, czy użytkownik jest już zalogowany:
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
});
// ...
}
}
Obietnica zwrócona przez funkcję navigator.credentials.get() jest odczytywana za pomocą obiektu danych logowania lub elementu null.
Aby określić, czy jest to PasswordCredential czy FederatedCredential, sprawdź po prostu właściwość .type obiektu, która może mieć wartość password lub federated.
Jeśli .type to federated, właściwość .provider jest ciągiem znaków reprezentującym dostawcę tożsamości.
Uwierzytelnij użytkownika
Gdy masz dane logowania, uruchom proces uwierzytelniania w zależności od ich typu: password lub federated:
}).then(c => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
Gdy obietnica się zakończy, sprawdź, czy otrzymano obiekt danych logowania. Jeśli nie, oznacza to, że nie udało się zalogować automatycznego. Dyskretnie zamknij proces automatycznego logowania.
Zaktualizuj interfejs użytkownika
Jeśli uwierzytelnianie się powiedzie, zaktualizuj interfejs użytkownika lub przekieruj użytkownika na spersonalizowaną stronę:
}).then(profile => {
if (profile) {
updateUI(profile);
}
Nie zapomnij pokazać komunikatu o błędzie uwierzytelniania
Aby nie wprowadzać użytkowników w błąd, podczas pobierania obiektu danych logowania użytkownicy powinni widzieć niebieski komunikat „Logowanie”:
Ważna wskazówka: jeśli uda Ci się uzyskać obiekt danych logowania, ale nie uda Ci się uwierzytelnić użytkownika, powinien wyświetlić się komunikat o błędzie:
}).catch(error => {
showError('Sign-in Failed');
});
}
}
Przykład pełnego kodu
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials
.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
})
.then((c) => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
})
.then((profile) => {
if (profile) {
updateUI(profile);
}
})
.catch((error) => {
showError('Sign-in Failed');
});
}
}
Zaloguj się przez funkcję wyboru konta
Jeśli użytkownik wymaga zapośredniczenia lub ma wiele kont, użyj funkcji wyboru kont, aby zezwolić mu na zalogowanie się, pomijając zwykły formularz logowania, np.:
Czynności, które należy wykonać, aby zalogować się za pomocą funkcji wyboru konta, są takie same jak w przypadku logowania automatycznego, z dodatkowym wywołaniem funkcji wyboru konta podczas uzyskiwania danych logowania:
- Uzyskaj dane logowania i wyświetl narzędzie do wybierania kont.
- Uwierzytelnij użytkownika.
- Zaktualizuj interfejs lub otwórz spersonalizowaną stronę.
Uzyskaj informacje o danych logowania i pokaż wybór konta
wyświetlać opcję wyboru konta w odpowiedzi na zdefiniowane działanie użytkownika, np. gdy kliknie przycisk „Zaloguj się”. Zadzwoń pod numer navigator.credentials.get() i dodaj mediation: 'optional' lub mediation: 'required', aby wyświetlić funkcję wyboru konta.
Jeśli w polu mediation ustawiona jest wartość required, użytkownikowi zawsze wyświetlany jest ekran wyboru konta umożliwiający zalogowanie się.
Dzięki tej opcji użytkownicy mający wiele kont mogą łatwo przełączać się między nimi.
Jeśli mediation ma wartość optional, użytkownik widzi opcję wyboru konta, która umożliwia zalogowanie się po wywołaniu navigator.credentials.preventSilentAccess().
Dzięki temu masz pewność, że logowanie automatyczne nie nastąpi po tym, jak użytkownik zdecyduje się się wylogować lub się wyrejestrować.
Przykładowy element mediation: 'optional':
var signin = document.querySelector('#signin');
signin.addEventListener('click', e => {
if (window.PasswordCredential || window.FederatedCredential) {
navigator.credentials.get({
password: true,
federated: {
providers: [
'https://accounts.google.com'
]
},
mediation: 'optional'
}).then(c => {
Gdy użytkownik wybierze konto, obietnica ustępuje wraz z danymi logowania.
Jeśli użytkownik anuluje funkcję wyboru konta lub jeśli dane logowania nie będą przechowywane, obietnica zniknie dzięki null.
W takim przypadku wróć do formularza logowania.
Pamiętaj, by wrócić do formularza logowania
Zalecamy powrót do formularza logowania z jednego z tych powodów:
- Nie są przechowywane żadne dane logowania.
- Użytkownik zamknął funkcję wyboru konta, nie wybierając konta.
- Interfejs API jest niedostępny.
}).then(profile => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
}).catch(error => {
location.href = '/signin';
});
Przykład pełnego kodu
var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
if (window.PasswordCredential || window.FederatedCredential) {
navigator.credentials
.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'optional',
})
.then((c) => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
})
.then((profile) => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
})
.catch((error) => {
location.href = '/signin';
});
}
});
Logowanie sfederowane
Logowanie sfederowane umożliwia użytkownikom logowanie się jednym kliknięciem i bez konieczności zapamiętywania dodatkowych danych logowania do witryny.
Aby wdrożyć logowanie sfederowane:
- Uwierzytelnij użytkownika przy użyciu tożsamości zewnętrznej.
- Przechowuj informacje o tożsamości.
- Zaktualizuj interfejs lub otwórz spersonalizowaną stronę (tak samo jak przy automatycznym logowaniu).
Uwierzytelnij użytkownika przy użyciu tożsamości zewnętrznej
Gdy użytkownik kliknie przycisk logowania sfederowanego, uruchom określony proces uwierzytelniania dostawcy tożsamości za pomocą FederatedCredential.
Jeśli na przykład dostawcą jest Google, użyj biblioteki JavaScriptu funkcji logowania Google:
navigator.credentials
.get({
password: true,
mediation: 'optional',
federated: {
providers: ['https://account.google.com'],
},
})
.then(function (cred) {
if (cred) {
// Instantiate an auth object
var auth2 = gapi.auth2.getAuthInstance();
// Is this user already signed in?
if (auth2.isSignedIn.get()) {
var googleUser = auth2.currentUser.get();
// Same user as in the credential object?
if (googleUser.getBasicProfile().getEmail() === cred.id) {
// Continue with the signed-in user.
return Promise.resolve(googleUser);
}
}
// Otherwise, run a new authentication flow.
return auth2.signIn({
login_hint: id || '',
});
}
});
Logowanie przez Google powoduje wygenerowanie tokena tożsamości jako dowodu uwierzytelnienia.
Ogólnie logowanie sfederowane opiera się na standardowych protokołach takich jak OpenID Connect czy OAuth. Aby dowiedzieć się, jak uwierzytelniać się za pomocą kont sfederowanych, zapoznaj się z dokumentacją odpowiednich dostawców tożsamości sfederowanej. Popularne przykłady:
Przechowywanie informacji o tożsamości
Po zakończeniu uwierzytelniania możesz zapisać informacje o tożsamości.
Przechowywane tutaj informacje to id od dostawcy tożsamości i ciąg znaków dostawcy reprezentujący dostawcę tożsamości (name i iconURL są opcjonalne).
Więcej informacji na ten temat znajdziesz w specyfikacji zarządzania danymi logowania.
Aby przechowywać szczegóły sfederowanego konta, utwórz instancję nowego obiektu FederatedCredential z identyfikatorem użytkownika i identyfikatorem dostawcy.
Następnie wywołaj navigator.credentials.store(), aby zapisać informacje o tożsamości.
Po udanej federacji zainicjuj synchronicznie lub asynchronicznie stronę FederatedCredential:
Przykład podejścia synchronicznego:
// Create credential object synchronously.
var cred = new FederatedCredential({
id: id, // id in IdP
provider: 'https://account.google.com', // A string representing IdP
name: name, // name in IdP
iconURL: iconUrl, // Profile image url
});
Przykład podejścia asynchronicznego:
// Create credential object asynchronously.
var cred = await navigator.credentials.create({
federated: {
id: id,
provider: 'https://accounts.google.com',
name: name,
iconURL: iconUrl,
},
});
Następnie zapisz obiekt danych logowania:
// Store it
navigator.credentials.store(cred).then(function () {
// continuation
});
Wyloguj się
Wylogowuj użytkowników po kliknięciu przycisku wylogowania. Najpierw zakończ sesję, a potem wyłącz automatyczne logowanie przy kolejnych wizytach. (Sposób zakończenia sesji zależy całkowicie od Ciebie).
Wyłącz automatyczne logowanie przy kolejnych wizytach
Zadzwoń do:
navigator.credentials.preventSilentAccess():
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Dzięki temu automatyczne logowanie nastąpi dopiero wtedy, gdy użytkownik włączy tę funkcję. Aby wznowić automatyczne logowanie, użytkownik może celowo się zalogować, wybierając z menu wyboru konto, na które chce się logować. W takim przypadku użytkownik będzie zawsze zalogowany z powrotem, dopóki nie wyloguje się z niego bezpośrednio.