Simpan Kredensial dari Formulir

Eiji Kitamura

Meggin Kearney

Buat formulir pendaftaran dan login Anda sesederhana mungkin.

Menyimpan kredensial dari formulir login sehingga pengguna tidak perlu masuk lagi saat mereka kembali.

Untuk menyimpan kredensial pengguna dari formulir:

1. Sertakan autocomplete dalam formulir.
2. Cegah pengiriman formulir.
3. Lakukan autentikasi dengan mengirim permintaan.
4. Simpan kredensial.
5. Update UI atau lanjutkan ke halaman yang dipersonalisasi.

Sertakan autocomplete dalam formulir

Sebelum melangkah maju, periksa apakah formulir Anda menyertakan atribut autocomplete. Hal ini membantu Credential Management API menemukan id dan password dari formulir dan membuat objek kredensial.

Hal ini juga membantu browser yang tidak mendukung Credential Management API untuk memahami semantiknya. Pelajari isi otomatis lebih lanjut di artikel ini oleh 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>

Cegah pengiriman formulir

Ketika pengguna menekan tombol kirim, cegah formulir dikirim, yang akan menyebabkan menghasilkan transisi halaman:

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

Dengan mencegah transisi halaman, Anda dapat menyimpan informasi kredensial tersebut saat memverifikasi keasliannya.

Mengautentikasi dengan mengirim permintaan

Untuk mengautentikasi pengguna, kirimkan informasi kredensial ke server Anda menggunakan AJAX.

Di sisi server, buat endpoint (atau cukup ubah endpoint yang ada) yang merespons dengan kode HTTP 200 atau 401, sehingga jelas bagi browser apakah pendaftaran/login/ubah sandi berhasil atau tidak.

Contoh:

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

Menyimpan kredensial

Untuk menyimpan kredensial, periksa terlebih dahulu apakah API tersedia, lalu buat instance PasswordCredential dengan elemen bentuk sebagai argumen baik secara sinkron maupun asinkron. Panggil navigator.credentials.store(). Jika API tidak tersedia, Anda dapat meneruskan informasi profil ke langkah berikutnya.

Contoh sinkron:

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

Contoh asinkron:

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

Setelah permintaan berhasil, simpan informasi kredensial. (Jangan simpan informasi kredensial jika permintaan gagal karena hal tersebut membingungkan pengguna yang kembali.)

Saat browser Chrome memperoleh informasi kredensial, muncul notifikasi yang meminta untuk menyimpan kredensial (atau penyedia federasi).

Mengupdate UI

Jika semuanya berjalan dengan baik, perbarui UI menggunakan informasi profil, atau melanjutkan ke halaman pribadi.

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

Contoh kode lengkap

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

Kompatibilitas browser

PasswordCredential

navigator.credentials.store()

Masukan