Zapisz dane logowania z Formularzy

Eiji Kitamura

Meggin Kearney

Formularze rejestracji i logowania powinny być jak najprostsze.

Zapisywanie danych logowania z formularzy logowania dzięki czemu użytkownicy nie będą musieli logować się ponownie, gdy wrócą.

Aby zapisać dane logowania użytkownika z formularzy:

1. W formularzu umieść autocomplete.
2. Zablokuj możliwość przesłania formularza.
3. Uwierzytelnij przez wysłanie żądania.
4. Przechowuj dane logowania.
5. Zaktualizuj UI lub otwórz spersonalizowaną stronę.

Uwzględnij w formularzu: autocomplete

Zanim przejdziesz dalej, sprawdź, czy formularz zawiera atrybuty autocomplete. Dzięki temu interfejs Credential Management API znajdzie id i password z formularza i utworzyć obiekt danych logowania.

Dzięki temu również przeglądarki nieobsługujące interfejsu Credential Management API aby lepiej zrozumieć jej semantykę. Dowiedz się więcej o autouzupełnianiu tym artykule, którego autorem jest Jason Grigsby

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

Zablokowanie możliwości przesłania formularza

Gdy użytkownik naciśnie przycisk Prześlij, zablokuj możliwość przesłania formularza, bo w przeciwnym razie spowoduje przejście między stronami:

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

Dzięki zapobieganiu przejścia między stronami możesz zachować informacje o danych logowania podczas weryfikowania ich autentyczności.

Uwierzytelnianie przez wysłanie żądania

Aby uwierzytelnić użytkownika, przekaż dane logowania do swojego serwera za pomocą technologii AJAX.

Utwórz punkt końcowy po stronie serwera (lub po prostu zmień istniejący punkt końcowy) która odpowiada kodem HTTP 200 lub 401, dzięki czemu przeglądarka będzie zrozumiała informacje o tym, czy rejestracja/logowanie/zmiana hasła zakończyła się powodzeniem, czy nie.

Na przykład:

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

Przechowywanie 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ń do nas navigator.credentials.store() Jeśli interfejs API jest niedostępny, możesz po prostu przekazać te informacje do kolejnego kroku.

Przykład synchronicznego:

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

Przykład kodu asynchronicznego:

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

Jeśli żądanie zostanie zrealizowane, zapisz dane logowania. Jeśli żądanie nie zostało zrealizowane, nie zapisuj danych logowania ponieważ wprowadza to w błąd powracających użytkowników).

Gdy przeglądarka Chrome uzyska dane logowania, pojawia się powiadomienie z prośbą o zapisanie danych logowania. (lub dostawcę federacji).

Aktualizowanie interfejsu użytkownika

Jeśli wszystko poszło dobrze, zaktualizuj UI, korzystając z informacji o profilu lub przejdź do spersonalizowanej strony.

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

Przykład pełnego kodu

// 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

navigator.credentials.store()

Prześlij opinię