Aby zalogować użytkowników, pobierz dane logowania z hasła przeglądarki i używać ich do automatycznego logowania użytkowników. W przypadku użytkowników z wieloma kontami: pozwalają wybrać konto jednym kliknięciem za pomocą funkcji wyboru konta.
Automatyczne logowanie
Automatyczne logowanie może nastąpić w dowolnym miejscu w witrynie. nie tylko u góry strony, ale też na innych stronach typu leaf page. Przydaje się to, gdy użytkownicy wchodzą na różne strony w witrynie, za pomocą wyszukiwarki.
Aby włączyć automatyczne logowanie:
- Uzyskaj dane logowania.
- Uwierzytelnij użytkownika.
- Zaktualizuj UI lub otwórz spersonalizowaną stronę.
Uzyskaj dane logowania
Aby uzyskać dane logowania, wywołaj
navigator.credentials.get()
Określ typ danych logowania, o które prosisz
nadając mu wartość password
lub federated
.
Zawsze używaj adresu mediation: 'silent'
do automatycznego logowania.
Można więc łatwo zakończyć procedurę, jeśli użytkownik:
- Brak zapisanych danych logowania.
- Zawiera wiele danych logowania.
- nie jesteś zalogowany(-a).
Zanim uzyskasz certyfikat, nie zapomnij sprawdzić, 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 użytkownika navigator.credentials.get()
zostaje rozwiązana
za pomocą obiektu danych logowania lub obiektu null
.
Aby określić, czy chodzi o PasswordCredential
czy FederatedCredential
,
wystarczy spojrzeć na właściwość .type
obiektu,
które to 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 już uzyskasz certyfikat,
uruchomić 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 wygaśnie, sprawdzić, czy otrzymano obiekt danych logowania. Jeśli tak się nie stało, oznacza to, że nie udało się zalogować się automatycznie. Zamknij proces automatycznego logowania po cichu.
Zaktualizuj UI
Jeśli uwierzytelnienie 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 uniknąć dezorientacji użytkownika, użytkownicy powinni zobaczyć niebieski toast z napisem „Logowanie się” w momencie pobierania obiektu danych logowania:
![Niebieski toast informujący, że użytkownik się loguje.](https://web.developers.google.cn/static/articles/security-credential-management-retrieve-credentials/image/blue-toast-showing-user-i-434a344bb78b3.png?authuser=0000&hl=pl)
Ważna wskazówka: jeśli uda Ci się uzyskać obiekt danych logowania ale gdy użytkownik nie zostanie uwierzytelniony, powinien pojawić 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, możesz użyć sekcji wyboru konta, aby umożliwić użytkownikowi zalogowanie się, pomijając zwykły formularz logowania, na przykład:
![Wybór konta Google z kilkoma kontami.](https://web.developers.google.cn/static/articles/security-credential-management-retrieve-credentials/image/google-account-chooser-sh-76222c6b4a3fb.png?authuser=0000&hl=pl)
Aby zalogować się za pomocą funkcji wyboru konta, wykonaj te same czynności co w logowanie automatyczne, z dodatkowym wywołaniem, które wyświetla wybór konta. aby uzyskać dane logowania:
- Uzyskaj dane logowania i wyświetl moduł wyboru konta.
- Uwierzytelnij użytkownika.
- Zaktualizuj interfejs lub otwórz spersonalizowaną stronę.
Uzyskaj dane logowania i pokaż wybór konta
wyświetlać wybór konta w odpowiedzi na zdefiniowane działanie użytkownika,
na przykład gdy użytkownik kliknie przycisk „Zaloguj się”. Przycisk Zadzwoń do nas
navigator.credentials.get()
i dodaj mediation: 'optional'
lub mediation: 'required'
, aby wyświetlić wybór konta.
Jeśli mediation
ma wartość required
, użytkownik zawsze widzi opcję wyboru konta, która może się zalogować.
Dzięki tej opcji użytkownicy z wieloma kontami mogą łatwo przełączać się między nimi.
Gdy mediation
to optional
,
po kliknięciu przycisku „Wybierz konto” użytkownik będzie wyświetlany
navigator.credentials.preventSilentAccess()
.
.
Zwykle pomaga to uniknąć automatycznego logowania.
gdy użytkownik się wyloguje lub wyrejestruje.
Przykład strony 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 staje się ważna wraz z danymi uwierzytelniającymi.
Jeśli użytkownik anuluje wybieranie konta,
lub nie są zapisane dane logowania,
obietnica rozwiązuje null
.
W takim przypadku wróć do interfejsu formularza logowania.
Nie zapomnij skorzystać z formularza logowania
Użyj formularza logowania z jednego z tych powodów:
- Dane logowania nie są przechowywane.
- Użytkownik zamknął funkcję wyboru konta, ale nie wybrał 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 bez konieczności zapamiętywania dodatkowych danych logowania do witryny.
Aby wdrożyć logowanie sfederowane:
- Uwierzytelnij użytkownika za pomocą tożsamości zewnętrznej.
- Przechowuj informacje o tożsamości.
- Zaktualizuj interfejs lub otwórz spersonalizowaną stronę (tak samo jak w przypadku logowania automatycznego).
Uwierzytelnianie użytkownika za pomocą tożsamości zewnętrznej
Gdy użytkownik kliknie przycisk logowania sfederowanego,
uruchomić proces uwierzytelniania konkretnego dostawcy tożsamości za pomocą
FederatedCredential
Jeśli na przykład dostawcą jest Google, użyj atrybutu Biblioteka JavaScript logowania przez 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 || '',
});
}
});
Wynikiem Logowania przez Google są tokeny tożsamości, które stanowią dowód uwierzytelniania.
Logowanie sfederowane jest na ogół oparte na standardowych protokołach, takich jak OpenID Connect lub OAuth: Aby dowiedzieć się, jak uwierzytelniać się na kontach sfederowanych, możesz znaleźć na stronie odpowiednich dostawców tożsamości sfederowanej dokumenty. Popularne przykłady:
Przechowuj informacje o tożsamości
Po zakończeniu uwierzytelniania możesz zapisać informacje o tożsamości.
Informacje, które będziesz tu przechowywać, to id
od dostawcy tożsamości
oraz ciąg tekstowy dostawcy reprezentujący dostawcę tożsamości.
(name
i iconURL
są opcjonalne).
Więcej informacji na ten temat znajdziesz w
Specyfikacja zarządzania danymi logowania.
Aby przechowywać szczegóły sfederowanego konta, utwórz nową instancję
FederatedCredential
z identyfikatorem użytkownika i dostawcy.
Następnie wywołaj
navigator.credentials.store()
do przechowywania informacji o tożsamości.
Po udanej federacji
Utwórz instancję FederatedCredential
synchronicznie lub asynchronicznie:
Przykład metody synchronicznej:
// 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 metody asynchronicznej:
// 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ę
Wylogowywanie użytkowników po kliknięciu przycisku wylogowania. Najpierw zakończ sesję, a następnie wyłącz automatyczne logowanie na potrzeby przyszłych wizyt. (Sposób zakończenia sesji zależy wyłącznie od Ciebie).
Wyłącz automatyczne logowanie na potrzeby przyszłych wizyt
Zadzwoń do nas
navigator.credentials.preventSilentAccess()
:
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Dzięki temu logowanie automatyczne będzie możliwe dopiero wtedy, gdy użytkownik następnym razem włączy tę funkcję. Aby wznowić automatyczne logowanie, użytkownik może zalogować się celowo wybierając konto, na które chce się zalogować, Użytkownik jest wtedy zawsze zalogowany z powrotem, dopóki się nie wyloguje.