Zapisuj dane logowania z formularzy

Eiji Kitamura

Meggin Kearney

Zapisuj dane logowania z formularzy logowania

Formularze rejestracji i logowania powinny być jak najprostsze.

Zapisuj dane logowania z formularzy logowania, aby użytkownicy nie musieli ponownie się logować, gdy wrócą.

Aby zapisać dane logowania użytkownika z formularzy:

1. W formularzu podaj autocomplete.
2. Zablokuj przesyłanie formularza.
3. Uwierzytelnij, wysyłając żądanie.
4. Zapisz dane logowania.
5. Zaktualizuj interfejs lub przejdź na stronę spersonalizowaną.

Uwzględnij w formularzu autocomplete

Zanim przejdziesz dalej, sprawdź, czy formularz zawiera atrybuty autocomplete. Dzięki temu interfejs Credential Management API może znaleźć id i password w formularzu i utworzyć obiekt danych logowania.

Pomaga to też przeglądarkom, które nie obsługują interfejsu Credential Management API, zrozumieć jego semantykę. Więcej informacji o autouzupełnianiu znajdziesz w tym artykule Jasona Grigsby’ego.

<form id="signup" method="post">
  <input name="email" type="text" autocomplete="username email" />
  <input name="display-name" type="text" autocomplete="name" />
  <input name="password" type="password" autocomplete="new-password" />
  <input type="submit" value="Sign Up!" />
</form>

zapobiegać przesyłaniu formularza,

Gdy użytkownik naciśnie przycisk przesyłania, zapobiegnij przesłaniu formularza, co w przeciwnym razie spowodowałoby przejście na inną stronę:

    var f = document.querySelector('#signup');
    f.addEventListener('submit', e => {
      e.preventDefault();

Zapobiegając przejściu na inną stronę, możesz zachować informacje o danych logowania podczas weryfikowania ich autentyczności.

Uwierzytelnianie przez wysłanie żądania

Aby uwierzytelnić użytkownika, prześlij dane logowania na serwer za pomocą AJAX.

Po stronie serwera utwórz punkt końcowy (lub po prostu zmień istniejący punkt końcowy), który odpowiada kodem HTTP 200 lub 401, aby przeglądarka wiedziała, czy rejestracja, logowanie lub zmiana hasła zakończyły się powodzeniem.

Na przykład:

// Try sign-in with AJAX
fetch('/signin', {
  method: 'POST',
  body: new FormData(e.target),
  credentials: 'include',
});

Zapisywanie danych logowania

Aby zapisać dane logowania, najpierw sprawdź, czy interfejs API jest dostępny, a następnie utwórz instancję PasswordCredential z elementem formularza jako argumentem, synchronicznie lub asynchronicznie. Zadzwoń pod numer navigator.credentials.store(). Jeśli interfejs API jest niedostępny, możesz po prostu przekazać informacje o profilu do następnego kroku.

Przykład synchroniczny:

if (window.PasswordCredential) {
  var c = new PasswordCredential(e.target);
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

Przykład asynchroniczny:

if (window.PasswordCredential) {
  var c = await navigator.credentials.create({password: e.target});
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

Po pomyślnym przesłaniu żądania zapisz informacje o danych logowania. (Nie przechowuj danych logowania, jeśli żądanie się nie powiodło, ponieważ może to wprowadzić w błąd powracających użytkowników).

Gdy przeglądarka Chrome uzyska dane logowania, pojawi się powiadomienie z prośbą o zapisanie danych logowania (lub dostawcy federacyjnego).

Powiadomienie dla użytkownika zalogowanego automatycznie

Aktualizowanie interfejsu

Jeśli wszystko poszło dobrze, zaktualizuj interfejs, używając informacji z profilu, lub przejdź do spersonalizowanej strony.

     }).then(profile => {
       if (profile) {
         updateUI(profile);
       }
     }).catch(error => {
       showError('Sign-in Failed');
     });
    });

Pełny przykładowy kod

// Get form's DOM object
var f = document.querySelector('#signup');
f.addEventListener('submit', (e) => {
  // Stop submitting form by itself
  e.preventDefault();

  // Try sign-in with AJAX
  fetch('/signin', {
    method: 'POST',
    body: new FormData(e.target),
    credentials: 'include',
  })
    .then((res) => {
      if (res.status == 200) {
        return Promise.resolve();
      } else {
        return Promise.reject('Sign-in failed');
      }
    })
    .then((profile) => {
      // Instantiate PasswordCredential with the form
      if (window.PasswordCredential) {
        var c = new PasswordCredential(e.target);
        return navigator.credentials.store(c);
      } else {
        return Promise.resolve(profile);
      }
    })
    .then((profile) => {
      // Successful sign-in
      if (profile) {
        updateUI(profile);
      }
    })
    .catch((error) => {
      // Sign-in failed
      showError('Sign-in Failed');
    });
});

Zgodność z przeglądarką

PasswordCredential

Browser Support

• 51
• 79
• x
• x

Source

navigator.credentials.store()

Browser Support

• 51
• 79
• 60
• 13

Source

Prześlij opinię