Formlar'daki Kimlik Bilgilerini Kaydet

Eiji Kitamura

Meggin Kearney

Kayıt ve oturum açma formlarınızı mümkün olduğunca basit tutun.

Oturum açma formlarındaki kimlik bilgilerini kaydet Böylece, kullanıcılar geri döndüklerinde tekrar oturum açmak zorunda kalmaz.

Formlardaki kullanıcı kimlik bilgilerini depolamak için:

1. Forma autocomplete ekleyin.
2. Formun gönderilmesini engelleyin.
3. İstek göndererek kimlik doğrulaması yapın.
4. Kimlik bilgisini saklayın.
5. Kullanıcı arayüzünü güncelleyin veya kişiselleştirilmiş sayfaya geçin.

autocomplete öğelerini forma dahil et

Devam etmeden önce formunuzun autocomplete özellikleri içerip içermediğini kontrol edin. Bu sayede Credential Management API id ve password verilerini bulabilir ve bir kimlik bilgisi nesnesi oluşturur.

Bu işlem, Credential Management API'yi desteklemeyen tarayıcılara da yardımcı olur. anlamlarını anlamaktır. Otomatik doldurma hakkında daha fazla bilgiyi şuradan edinebilirsiniz: bu makaleyi, 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>

Formun gönderilmesini engelleme

Kullanıcı gönder düğmesine bastığında formun gönderilmesini engelleyin. Aksi takdirde bir sayfa geçişi olarak kabul edilir:

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

Sayfa geçişini önleyerek Böylece, bilgilerin orijinalliğini doğrularken kimlik bilgisi bilgilerini saklayabilirsiniz.

İstek göndererek kimlik doğrulaması yap

Kullanıcının kimliğini doğrulamak için AJAX kullanarak sunucunuza kimlik bilgisi gönderin.

Sunucu tarafında bir uç nokta oluşturun (veya mevcut bir uç noktayı değiştirin) HTTP kodu 200 veya 401 ile yanıt veren bir tarayıcı kullanarak başarılı olup olmadığını kontrol edin.

Örneğin:

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

Kimlik bilgisini saklama

Kimlik bilgilerini depolamak için önce API'nin kullanılabilir olup olmadığını kontrol edin. ardından bir örnek verin PasswordCredential bağımsız değişken olarak form öğesi senkronize edebilirsiniz. Telefonla arama navigator.credentials.store(). API kullanılamıyorsa profil bilgilerini bir sonraki adıma yönlendirebilirsiniz.

Eşzamanlı örnek:

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

Eşzamansız örnek:

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

İstek başarılı olduktan sonra kimlik bilgisi bilgilerini depolayın. (İstek başarısız olduysa kimlik bilgisi bilgilerini depolama geri gelen kullanıcıların kafasını karıştıracağından emin olun.)

Chrome tarayıcı kimlik bilgisi bilgilerini aldığında, kimlik bilgilerinin depolanmasını isteyen bir bildirim açılır (veya federasyon sağlayıcı)

Kullanıcı arayüzünü güncelleme

Her şey yolunda gittiyse profil bilgilerini kullanarak kullanıcı arayüzünü güncelleyin. veya kişiselleştirilmiş sayfaya geçin.

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

Tam kod örneği

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

Tarayıcı uyumluluğu

PasswordCredential

navigator.credentials.store()

Geri bildirim