Haz que los formularios de registro y acceso sean lo más sencillos posible.
Guarda las credenciales de los formularios de acceso para que los usuarios no tengan que volver a acceder cuando regresan.
Para almacenar las credenciales de usuario de los formularios, sigue estos pasos:
- Incluye
autocompleteen el formulario. - Evita que se envíe el formulario.
- Envía una solicitud para autenticarte.
- Almacena la credencial.
- Actualiza la IU o ve a la página personalizada.
Incluye autocomplete en el formulario.
Antes de continuar, verifica si tu formulario incluye atributos autocomplete.
Esto ayuda a la API de Credential Management a encontrar el id y la password del formulario y construir un objeto de credencial.
Esto también ayuda a los navegadores que no son compatibles con la API de Credential Management a comprender su semántica. Obtén más información sobre el autocompletado en este artículo de 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>
Impedir que se envíe el formulario
Cuando el usuario presione el botón Enviar, evita que se envíe el formulario, ya que, de lo contrario, se generaría una transición de página:
var f = document.querySelector('#signup');
f.addEventListener('submit', e => {
e.preventDefault();
Si evitas una transición de página, puedes conservar la información de las credenciales mientras verificas su autenticidad.
Envía una solicitud para autenticarte
Para autenticar al usuario, proporciona información de credenciales a tu servidor con AJAX.
En el servidor, crea un extremo (o simplemente modifica un extremo existente) que responda con el código HTTP 200 o 401 para que el navegador tenga claro si la contraseña de registro, acceso o cambio se realizó correctamente o no.
Por ejemplo:
// Try sign-in with AJAX
fetch('/signin', {
method: 'POST',
body: new FormData(e.target),
credentials: 'include',
});
Almacena la credencial
Para almacenar una credencial, primero verifica si la API está disponible y, luego, crea una instancia de PasswordCredential con el elemento de formulario como argumento de forma síncrona o asíncrona.
Llama a navigator.credentials.store().
Si la API no está disponible, puedes simplemente reenviar la información del perfil al siguiente paso.
Ejemplo síncrono:
if (window.PasswordCredential) {
var c = new PasswordCredential(e.target);
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
Ejemplo asíncrono:
if (window.PasswordCredential) {
var c = await navigator.credentials.create({password: e.target});
return navigator.credentials.store(c);
} else {
return Promise.resolve(profile);
}
Una vez que se realice correctamente la solicitud, almacena la información de las credenciales. (no almacenes la información de credenciales si la solicitud falló, ya que confunde a los usuarios recurrentes).
Cuando el navegador Chrome obtiene información de credenciales, aparece una notificación que te pide almacenar una credencial (o proveedor de federación).
Cómo actualizar la IU
Si todo salió bien, actualiza la IU con la información del perfil o ve a la página personalizada.
}).then(profile => {
if (profile) {
updateUI(profile);
}
}).catch(error => {
showError('Sign-in Failed');
});
});
Ejemplo de código completo
// 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');
});
});
Compatibilidad del navegador
PasswordCredential
navigator.credentials.store()