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

Eiji Kitamura

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.

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().

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

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ć.

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

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.

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.

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

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”