Ta strona została przetłumaczona przez Cloud Translation API.

Uproszczenie procesu logowania za pomocą interfejsu API do zarządzania danymi logowania

Eiji Kitamura

W trosce o wygodę użytkowników ważne jest, by ułatwić im uwierzytelnianie w Twojej witrynie. Uwierzytelnieni użytkownicy mogą komunikować się ze sobą za pomocą dedykowanego profilu, synchronizować dane między urządzeniami i przetwarzać dane w trybie offline. Lista wciąż trwa. Tworzenie, zapamiętywanie i wpisywanie haseł bywa uciążliwe dla użytkowników, zwłaszcza na ekranach urządzeń mobilnych, przez co często używają tych samych haseł na różnych stronach. Jest to oczywiście zagrożenie dla bezpieczeństwa.

Najnowsza wersja Chrome (51) obsługuje interfejs Credential Management API. Jest to oferta zgodna ze standardami W3C, która daje programistom programowy dostęp do menedżera danych logowania w przeglądarce i ułatwia użytkownikom logowanie się.

Co to jest interfejs Credential Management API?

Interfejs Credential Management API umożliwia programistom przechowywanie i pobieranie danych logowania do haseł oraz sfederowanych danych logowania. Udostępnia 3 funkcje:

navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.requireUserMediation()

Za pomocą tych prostych interfejsów API programiści mogą wykonywać wiele zaawansowanych działań, takich jak:

Pozwól użytkownikom logować się jednym kliknięciem.
Zapamiętaj konto sfederowane, którego użytkownik użył do zalogowania się.
Loguj użytkowników ponownie po wygaśnięciu sesji.

W przypadku Chrome dane logowania będą przechowywane w Menedżerze haseł Chrome. Jeśli użytkownicy są zalogowani w Chrome, mogą synchronizować swoje hasła na różnych urządzeniach. Zsynchronizowane hasła można też udostępniać aplikacjom na Androida, które mają zintegrowany interfejs Smart Lock for Passwords API na Androida, aby zapewnić bezproblemową obsługę na wielu platformach.

Integracja interfejsu Credential Management API ze swoją witryną

Sposób używania interfejsu Credential Management API w witrynie może się różnić w zależności od architektury. Czy jest to aplikacja na jednej stronie? Czy jest to starsza architektura z przejściami między stronami? Czy formularz logowania znajduje się tylko u góry strony? Czy przyciski logowania znajdują się wszędzie? Czy użytkownicy mogą przeglądać witrynę bez logowania się? Czy federacja działa w wyskakujących okienkach? Czy też wymaga interakcji na wielu stronach?

Nie da się uwzględnić wszystkich tych przypadków, przyjrzyjmy się jednak typowej aplikacji jednostronicowej.

Górna strona to formularz rejestracyjny.
Kliknięcie przycisku „Zaloguj się” powoduje przejście do formularza logowania.
Zarówno formularz rejestracji, jak i formularz logowania mają typowe opcje danych uwierzytelniających i haseł umożliwiających identyfikację i federacji, np. logowania przez Google i logowania przez Facebooka.

Za pomocą interfejsu Credential Management API możesz dodawać do witryny takie funkcje, jak:

Pokaż wybór konta podczas logowania: pokazuje natywny interfejs wyboru konta, gdy użytkownik klika „Zaloguj się”.
Zapisz dane logowania: po udanym zalogowaniu zaproponuj zapisanie danych logowania w menedżerze haseł przeglądarki do późniejszego użycia.
Pozwól użytkownikowi na automatyczne zalogowanie się z powrotem: pozwól użytkownikowi na ponowne zalogowanie się, gdy sesja wygaśnie.
Zapośredniczenie automatycznego logowania: gdy użytkownik się wyloguje, wyłącz automatyczne logowanie przy kolejnych wizytach tego użytkownika.

Opisane funkcje możesz zobaczyć w witrynie demonstracyjnej za pomocą jej przykładowego kodu.

Pokaż wybór konta podczas logowania

Między kliknięciem przycisku „Zaloguj się” przez użytkownika a przejściem do formularza logowania możesz użyć funkcji navigator.credentials.get(), aby uzyskać dane logowania. Chrome wyświetli interfejs wyboru konta, z którego użytkownik może wybrać konto.

Pojawia się interfejs wyboru konta, na którym użytkownik wybiera konto, na które chce się zalogować. — Wyświetla się interfejs wyboru konta, w którym użytkownik może wybrać konto, na które chce się zalogować

Uzyskiwanie obiektu danych logowania hasła

Aby wyświetlić dane logowania do hasła jako opcje konta, użyj password: true.

navigator.credentials.get({
    password: true, // `true` to obtain password credentials
}).then(function(cred) {
    // continuation
    ...

Logowanie się przy użyciu danych logowania przy użyciu hasła

Gdy użytkownik dokona wyboru konta, funkcja rozstrzygająca otrzyma dane logowania. Możesz go wysłać na serwer za pomocą 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 wyświetlić użytkownikowi sfederowane konta, dodaj do opcji get() opcję federated, która pobiera szeroką gamę dostawców tożsamości.

Gdy w menedżerze haseł jest zapisanych wiele kont. — Gdy w menedżerze haseł jest zapisanych wiele kont

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 jest to PasswordCredential (type == 'password') czy 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.

Przechowuj dane logowania

Gdy użytkownik loguje się w Twojej witrynie za pomocą formularza, możesz użyć navigator.credentials.store() do przechowywania danych logowania. Użytkownik zostanie zapytany, czy chce zapisać plik. W zależności od typu danych logowania użyj new PasswordCredential() lub new FederatedCredential(), aby utworzyć obiekt danych logowania, który chcesz przechowywać.

Chrome pyta użytkowników, czy chcą przechowywać dane logowania (lub czy chcą użyć dostawcy federacji). — Chrome pyta użytkowników, czy chcą zapisać dane logowania (lub dostawcę federacji),

Tworzenie i przechowywanie danych logowania do haseł z elementu formularza

Poniższy kod wykorzystuje atrybuty autocomplete, aby automatycznie mapować elementy formularza na parametry obiektu PasswordCredential.

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
});

Pozwól użytkownikowi na automatyczne ponowne zalogowanie się

Jeśli użytkownik opuszcza witrynę i wróci do niej później, sesja może wygasnąć. Nie narażaj użytkownika na wpisywanie hasła za każdym razem, gdy wraca. Pozwól użytkownikowi na automatyczne zalogowanie się.

Gdy użytkownik zaloguje się automatycznie, pojawi się powiadomienie.

Pobieranie 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
    ...
    }
});

Powinien on wyglądać podobnie do kodu widocznego w sekcji „Pokaż opcję wyboru konta podczas logowania”. Jedyną różnicą jest to, że skonfigurujesz unmediated: true.

Funkcja zostanie natychmiast rozpoznana i otrzymasz dane logowania umożliwiające automatyczne logowanie użytkownika. Jest kilka warunków:

Użytkownik przywitał się z informacją o funkcji automatycznego logowania.
Użytkownik zalogował się wcześniej w witrynie przy użyciu interfejsu Credential Management API.
Użytkownik ma tylko 1 zapisany dane logowania w Twoim źródle.
W poprzedniej sesji użytkownik nie wylogował się bezpośrednio.

Jeśli którykolwiek z tych warunków nie zostanie spełniony, funkcja zostanie odrzucona.

Diagram przepływu obiektu danych logowania

Zapośredniczenie automatycznego logowania

Gdy użytkownik wyloguje się z Twojej witryny, musisz zadbać o to, by nie był on automatycznie zalogowany z powrotem. Aby to zapewnić, interfejs Credential Management API udostępnia mechanizm o nazwie zapośredniczenie. Aby włączyć tryb zapośredniczenia, wywołaj metodę navigator.credentials.requireUserMediation(). Jeśli stan zapośredniczenia użytkownika w przypadku źródła jest włączony, za pomocą funkcji unmediated: true w połączeniu z elementem navigator.credentials.get() funkcja ta rozwiązuje problemy z użyciem funkcji undefined.

Zapośredniczenie automatycznego logowania

navigator.credentials.requireUserMediation();

Schemat blokowy automatycznego logowania.

Najczęstsze pytania

Czy JavaScript w witrynie może pobrać nieprzetworzone hasło? Nie. Hasła można uzyskać tylko w ramach usługi PasswordCredential i nie można ich w żaden sposób ujawnić.

Czy można zapisać 3 zestaw cyfr dla identyfikatora za pomocą interfejsu Credential Management API? Obecnie nie. Twoja opinia na temat specyfikacji będzie dla nas bardzo ważna.

Czy mogę używać interfejsu Credential Management API w elemencie iframe? Interfejs API jest ograniczony do kontekstów najwyższego poziomu. Wywołania .get() lub .store() w elemencie iframe są rozpoznawane od razu bez żadnego efektu.

Czy mogę zintegrować rozszerzenie do Chrome służące do zarządzania hasłami z interfejsem Credential Management API? Możesz zastąpić adres navigator.credentials i połączyć go z rozszerzeniem do Chrome z danymi logowania get() lub store().

Zasoby

Więcej informacji o interfejsie Credential Management API znajdziesz w przewodniku po integracji.