Zapisz dane logowania z Formularzy

Meggin Kearney
Meggin Kearney

Zapisuj dane logowania z formularzy logowania

Postaraj się, aby formularze rejestracji i logowania były jak najprostsze.

Zapisz dane logowania z formularzy logowania, aby użytkownicy nie musieli logować się ponownie po powrocie.

Aby przechowywać dane logowania użytkownika z formularzy:

  1. Uwzględnij w formularzu: autocomplete.
  2. Zablokuj możliwość przesyłania formularza.
  3. Uwierzytelnij, wysyłając żądanie.
  4. Przechowuj dane logowania.
  5. Zaktualizuj interfejs lub otwórz spersonalizowaną stronę.

Podaj autocomplete w formularzu

Zanim przejdziesz dalej, sprawdź, czy formularz zawiera atrybuty autocomplete. Ułatwi to interfejsowi Credential Management API znalezienie id i password w formularzu oraz utworzenie obiektu danych logowania.

Pomoże to też przeglądarkom, które nie obsługują interfejsu Credential Management API, poznać jego semantykę. Więcej informacji o autouzupełnianiu znajdziesz w tym artykule 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>

Uniemożliwianie przesyłania formularza

Zablokuj możliwość przesyłania formularza przez użytkownika, gdy użytkownik naciśnie przycisk przesyłania, co spowodowałoby przesunięcie strony:

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

Zapobiegając przenoszeniu stron, możesz zachować informacje logowania podczas sprawdzania ich autentyczności.

Uwierzytelnij, wysyłając żądanie

Aby uwierzytelnić użytkownika, prześlij dane logowania na swój serwer za pomocą technologii 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 była jasna dla informacji o tym, czy rejestracja, logowanie się lub zmiana hasła się udała.

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ń pod numer navigator.credentials.store(). Jeśli ten interfejs API jest niedostępny, wystarczy, że przekażesz informacje z profilu do następnego 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 asynchroniczny:

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

Gdy żądanie zostanie zrealizowane, zapisz dane logowania. (Nie przechowuj danych logowania, jeśli żądanie nie zostało zrealizowane, ponieważ może to zdezorientować powracających użytkowników).

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

przechowywać dane logowania
Powiadomienie dla użytkownika zalogowanego automatycznie

Aktualizowanie interfejsu użytkownika

Jeśli wszystko poszło dobrze, zaktualizuj interfejs, korzystając z informacji z profilu, lub otwórz spersonalizowaną stronę.

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

Obsługa przeglądarek

  • 51
  • 79
  • x
  • x

Źródło

Obsługa przeglądarek

  • 51
  • 79
  • 60
  • 13

Źródło

Prześlij opinię