Formlardaki kimlik bilgilerini kaydetme

Eiji Kitamura

Meggin Kearney

Oturum açma formlarındaki kimlik bilgilerini kaydet

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

Kullanıcıların geri döndüklerinde tekrar oturum açmak zorunda kalmamaları için oturum açma formlarındaki kimlik bilgilerini kaydedin.

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

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

Forma autocomplete ekleyin

Devam etmeden önce formunuzda autocomplete özelliklerinin olup olmadığını kontrol edin. Bu, Credential Management API'nin formdan id ve password değerlerini bulmasına ve bir kimlik bilgisi nesnesi oluşturmasına yardımcı olur.

Bu, Credential Management API'yi desteklemeyen tarayıcıların da API'nin semantiğini anlamasına yardımcı olur. Otomatik doldurma hakkında daha fazla bilgi edinmek için Jason Grigsby'nin bu makalesini inceleyin.

<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 sayfa geçişi gerçekleşir:

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

Sayfa geçişini engelleyerek kimlik bilgilerini koruyabilir ve doğruluğunu kontrol edebilirsiniz.

İstek göndererek kimlik doğrulama

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

Sunucu tarafında, HTTP kodu 200 veya 401 ile yanıt veren bir uç nokta oluşturun (veya mevcut bir uç noktayı değiştirin). Böylece tarayıcı, kaydolma/oturum açma/şifre değiştirme işleminin başarılı olup olmadığını net bir şekilde anlayabilir.

Ö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 form öğesini bağımsız değişken olarak kullanarak eşzamanlı veya eşzamansız bir şekilde PasswordCredential örneği oluşturun. navigator.credentials.store() numaralı telefonu arayın. API kullanılamıyorsa profil bilgilerini bir sonraki adıma iletebilirsiniz.

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 bilgileri depolanır. (İstek başarısız olursa kimlik bilgileri depolanmaz. Aksi takdirde geri dönen kullanıcıların kafası karışabilir.)

Chrome Tarayıcı, kimlik bilgilerini aldığında kimlik bilgilerini (veya federasyon sağlayıcıyı) depolamayı isteyen bir bildirim gösterilir.

Otomatik olarak oturum açmış bir kullanıcı için bildirim

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

Browser Support

• 51
• 79
• x
• x

Source

navigator.credentials.store()

Browser Support

• 51
• 79
• 60
• 13

Source

Geri bildirim