Asegúrate de 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 regresen.
Para almacenar las credenciales de los usuarios de los formularios, sigue estos pasos:
- Incluye
autocompleteen el formulario. - Evita que se envíe el formulario.
- Para autenticarte, envía una solicitud.
- Almacena la credencial.
- Actualiza la IU o ve a la página personalizada.
Incluye autocomplete en el formulario
Antes de seguir adelante,
Verifica si tu formulario incluye atributos autocomplete.
Esto ayuda a la API de Credential Management a encontrar id y password
del formulario y construir un objeto de credencial.
Esto también ayuda a los navegadores que no admiten la API de Credential Management para comprender su semántica. Obtén más información sobre Autocompletar 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 presiona el botón Enviar, evita que se envíe el formulario, ya que, de lo contrario, no se enviaría el formulario. generan una transición de página:
var f = document.querySelector('#signup');
f.addEventListener('submit', e => {
e.preventDefault();
Al evitar la transición de una página, puedes conservar la información de las credenciales mientras verificas su autenticidad.
Autentica mediante el envío de una solicitud
Para autenticar al usuario, entrega la información de credenciales a tu servidor usando AJAX.
Del lado del servidor, crea un extremo (o simplemente altera un extremo existente) que responda con el código HTTP 200 o 401, de modo que el navegador si la contraseña de registro, acceso o cambio es correcta 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
PasswordCredential
con el elemento del formulario como argumento
de forma síncrona o asíncrona.
Llama a navigator.credentials.store().
Si la API no está disponible,
puedes 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 del modelo 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 la solicitud se realice de forma correcta, almacena la información de la credencial. (no almacenes la información de las credenciales si falló la solicitud ya que hacerlo confunde a los usuarios recurrentes).
Cuando el navegador Chrome obtiene información de credenciales, aparece una notificación en la que se solicita 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 ir 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()