Guardar credenciales desde Formularios

Meggin Kearney
Meggin Kearney

Guarda credenciales de los formularios de acceso

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:

  1. Incluye autocomplete en el formulario.
  2. Evita que se envíe el formulario.
  3. Envía una solicitud para autenticar.
  4. Almacena la credencial.
  5. 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 crear un objeto de credencial.

Esto también ayuda a los navegadores que no admiten 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>

Evita que se envíe el formulario

Cuando el usuario presiona el botón de envío, evita que se envíe el formulario, lo que, de otro modo, 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 retener la información de la credencial mientras verificas su autenticidad.

Envía una solicitud para autenticar

Para autenticar al usuario, envía información de credenciales a tu servidor con AJAX.

En el servidor, crea un extremo (o simplemente modifica uno existente) que responda con el código HTTP 200 o 401, de modo que el navegador tenga claro si el registro, el acceso o el cambio de contraseña se realizaron correctamente.

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 un PasswordCredential con el elemento de formulario como argumento, ya sea 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 la solicitud falló, ya que hacerlo confundirá a los usuarios recurrentes).

Cuando el navegador Chrome obtiene información de la credencial, aparece una notificación en la que se te pide almacenar una credencial (o un proveedor de federación).

credencial de la tienda
Notificación para un usuario que accedió automáticamente

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

Navegadores compatibles

  • Chrome: 51.
  • Edge: 79.
  • Firefox: No es compatible.
  • Safari: No se admite.

Origen

Navegadores compatibles

  • Chrome: 51.
  • Borde: 79.
  • Firefox: 60.
  • Safari: 13.

Origen

Comentarios