Aby zapewnić użytkownikom wygodną obsługę, należy pomagać im uwierzytelniać się w Twojej witrynie. Uwierzytelnini użytkownicy mogą wchodzić w interakcję z: używać do tego specjalnego profilu, synchronizować dane między urządzeniami ani przetwarzać danych. gdy jesteś offline; lista jest dłuższa. Tworzenie, zapamiętywanie i pisanie hasła są uciążliwe dla użytkowników, zwłaszcza na ekranach telefonów komórkowych. co prowadzi do używania tych samych haseł na różnych stronach. Oczywiście jest zagrożeniem dla bezpieczeństwa.
Najnowsza wersja Chrome (51) obsługuje Credential Management API. To która zapewnia deweloperom zautomatyzowany dostęp do menedżera danych logowania w przeglądarce i ułatwia użytkownikom logowanie się.
Czym jest interfejs Credential Management API?
Interfejs Credential Management API umożliwia deweloperom przechowywanie i pobieranie haseł danych logowania i sfederowanych danych logowania oraz udostępnia 3 funkcje:
navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.requireUserMediation()
Te proste interfejsy API pozwalają programistom na:
- Pozwól użytkownikom logować się jednym kliknięciem.
- Zapamiętaj konto sfederowane, na które użytkownik się logował.
- Logowanie użytkowników z powrotem po wygaśnięciu sesji
W implementacji Chrome dane logowania będą przechowywane w haśle Chrome. . Jeśli użytkownicy są zalogowani w Chrome, mogą synchronizować ich hasła na różnych urządzeniach. Zsynchronizowane hasła można też udostępniać aplikacjom na Androida aplikacje korzystające z interfejsu API Smart Lock na hasła na Androida, dla wygody użytkowników korzystających z różnych platform.
Integracja interfejsu Credential Management API z witryną
Sposób korzystania z interfejsu Credential Management API w witrynie może być różny w zależności od jego architektury. Czy jest to aplikacja jednostronicowa? Czy to dziedzictwo z przejściami między stronami. Czy formularz logowania znajduje się tylko u góry? stronę? Czy przyciski logowania są wszędzie? Czy użytkownicy mogą wartościowo przeglądać nie musisz się logować? Czy federacja działa w wyskakujących okienkach? Lub tak zrobi wymagają interakcji na wielu stronach?
Uwzględnienie wszystkich tych przypadków jest praktycznie niemożliwe, ale przyjrzyjmy się typowej aplikacji na jednej stronie.
- Na górze strony znajduje się formularz rejestracyjny.
- Klikając „Zaloguj się” użytkownik otworzy formularz logowania.
- Formularze rejestracyjne i logowania zawierają typowe opcje identyfikatora i hasła. dane logowania i federację, np. korzystając z Logowania przez Google i Facebooka.
Korzystając z interfejsu Credential Management API, możesz dodać: funkcji witryny, na przykład:
- Pokazuj wybór konta podczas logowania:pokazuje natywny interfejs wyboru konta. gdy użytkownik kliknie „Zaloguj się”.
- Dane logowania do sklepu: po udanym logowaniu zaproponuj przechowywanie dane logowania do menedżera haseł przeglądarki w celu ich późniejszego użycia.
- Zezwól użytkownikowi na automatyczne logowanie się z powrotem: pozwól użytkownikowi zalogować się ponownie, jeśli .
- Zapośredniczenie automatycznego logowania się: gdy użytkownik się wyloguje, wyłącz automatyczne logowanie przy następnej wizycie użytkownika.
Te funkcje możesz zobaczyć na stronie demonstracyjnej za pomocą przykładowego kodu.
Pokazuj wybór konta podczas logowania
Między kliknięciem przycisku „Zaloguj się” i przejście do formularza logowania, Można użyć navigator.credentials.get() aby uzyskać dane logowania. Chrome wyświetli interfejs wyboru konta, użytkownik może wybrać konto.
![Pojawia się interfejs wyboru konta, na którym użytkownik może wybrać konto, na które chce się zalogować.](https://developer.chrome.com/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6.png?authuser=9&hl=pl)
Uzyskiwanie obiektu danych logowania do hasła
Aby wyświetlić dane logowania jako opcje konta, użyj adresu password: true
.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
logowanie się przy użyciu hasła i danych logowania.
Gdy użytkownik dokona wyboru konta, funkcja rozpoznawania otrzyma komunikat
dane logowania. Możesz wysłać ją na serwer przy użyciu fetch()
:
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
Logowanie się przy użyciu sfederowanych danych logowania
Aby pokazać użytkownikowi konta sfederowane, dodaj atrybut federated
, który pobiera tablicę
dostawców tożsamości na opcje get()
.
![Gdy w menedżerze haseł zapisanych jest wiele kont.](https://developer.chrome.com/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8.png?authuser=9&hl=pl)
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
Możesz sprawdzić właściwość type
obiektu danych logowania, aby sprawdzić, czy to PasswordCredential
(type == 'password'
) lub FederatedCredential
(type == 'federated'
).
Jeśli dane logowania to
FederatedCredential
,
możesz wywołać odpowiedni interfejs API, korzystając z zawartych w nim informacji.
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
![Schemat blokowy zarządzania danymi logowania.](https://developer.chrome.com/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb.png?authuser=9&hl=pl)
Zapisz dane logowania
Gdy użytkownik loguje się w Twojej witrynie za pomocą formularza, możesz używać tej opcji
navigator.credentials.store()
do przechowywania danych logowania. Użytkownik zobaczy prośbę o jej zapisanie lub nie. W zależności
jako typ danych logowania wpisz new
PasswordCredential()
lub new
FederatedCredential()
aby utworzyć obiekt danych logowania, który chcesz przechowywać.
![Chrome pyta użytkowników, czy chcą zapisać dane logowania (lub dostawcę federacji).](https://developer.chrome.com/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a.png?authuser=9&hl=pl)
Tworzenie i przechowywanie danych logowania z użyciem elementu formularza
Ten kod wykorzystuje atrybuty autocomplete
do automatycznego
mapa
elementów formularza na PasswordCredential.
parametrów obiektu.
HTML;
html
<form id="form" method="post">
<input type="text" name="id" autocomplete="username" />
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="******" />
</form>
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Tworzenie i przechowywanie sfederowanych danych logowania
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
![Schemat procesu logowania.](https://developer.chrome.com/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836.png?authuser=9&hl=pl)
Zezwalanie użytkownikowi na automatyczne logowanie się z powrotem
Gdy użytkownik opuszcza witrynę i do niej wraca później, może się zdarzyć, . nie zmuszać użytkownika do wpisywania hasła za każdym razem, wróć. Pozwól użytkownikowi automatycznie zalogować się z powrotem.
![Gdy użytkownik zostanie automatycznie zalogowany, pojawi się powiadomienie.](https://developer.chrome.com/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4.png?authuser=9&hl=pl)
Uzyskiwanie obiektu danych logowania
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
Kod powinien przypominać kod wyświetlany w sekcji „Pokaż wybór konta”
podczas logowania”. . Jedyną różnicą jest to,
unmediated: true
Spowoduje to natychmiastowe uruchomienie funkcji i uzyskanie danych logowania automatycznego logowania użytkownika. Spełnia kilka warunków:
- Użytkownik serdecznie przyjął informacje o funkcji automatycznego logowania.
- Użytkownik zalogował się wcześniej w witrynie przy użyciu interfejsu Credential Management API.
- Użytkownik ma tylko 1 zestaw danych logowania zapisany dla Twojego punktu początkowego.
- Użytkownik nie wylogował się bezpośrednio w poprzedniej sesji.
Jeśli którykolwiek z tych warunków nie będzie spełniony, funkcja zostanie odrzucona.
![Diagram przepływu obiektu danych logowania](https://developer.chrome.com/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd.png?authuser=9&hl=pl)
Zapośredniczenie automatycznego logowania
Gdy użytkownik wyloguje się z witryny, musisz upewnić się, że
użytkownik nie zostanie automatycznie zalogowany. Aby zapewnić
to interfejs Credential Management API udostępnia mechanizm o nazwie mediation.
Tryb zapośredniczenia możesz włączyć, dzwoniąc
navigator.credentials.requireUserMediation()
Dopóki stan zapośredniczenia źródła danych jest włączony przez użytkownika, za pomocą parametru
unmediated: true
z wartością navigator.credentials.get()
, ta funkcja zostanie
Ukończ za pomocą undefined
.
Zapośredniczenie automatycznego logowania
navigator.credentials.requireUserMediation();
![Schemat blokowy automatycznego logowania.](https://developer.chrome.com/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff.png?authuser=9&hl=pl)
Najczęstsze pytania
Czy JavaScript może pobrać nieprzetworzony plik
hasło?
Nie. Hasła możesz uzyskać tylko w PasswordCredential
.
nie można ujawnić
w żaden sposób.
Czy można zapisać 3 zestaw cyfr identyfikatora za pomocą danych uwierzytelniających API do zarządzania? Obecnie nie. Twoja opinia na temat specyfikacji będzie dostępna bardzo się cieszę.
Czy mogę używać interfejsu Credential Management API w elemencie iframe?
Interfejs API jest ograniczony do kontekstów najwyższego poziomu. Połączenia z numerami .get()
i .store()
w elemencie iframe zostaną natychmiast rozwiązane bez skutku.
Czy mogę zintegrować rozszerzenie do zarządzania hasłami do Chrome z danymi logowania
API do zarządzania?
Możesz zastąpić regułę navigator.credentials
i podłączyć ją do rozszerzenia do Chrome pod adresem
Dane logowania: get()
lub store()
.
Zasoby
Więcej informacji o interfejsie Credential Management API znajdziesz w przewodniku po integracji.
- Specyfikacja interfejsu API
- Dyskusje dotyczące specyfikacji i prześlij opinię
- Dokumentacja interfejsu MDN API
- Przewodnik po integracji interfejsu API do zarządzania danymi logowania
- Prezentacja
- Demonstracyjny kod źródłowy
- Ćwiczenie z programowania „Włączanie automatycznego logowania przy użyciu interfejsu Credential Management API”