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:
- Sertakan
autocomplete
dalam formulir. - Cegah pengiriman formulir.
- Lakukan autentikasi dengan mengirim permintaan.
- Simpan kredensial.
- 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).
![kredensial penyimpanan](https://web.dev/static/articles/security-credential-management-save-forms/image/store-credential-f27fdeafeab5c.png?authuser=6&hl=id)
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()