Credential Management API

La Credential Management API es una API para navegadores basada en estándares que ofrece una interfaz programática entre el sitio y el navegador para un acceso fluido, en diferentes dispositivos, y elimina las trabas en tus flujos de acceso.

Flujo de acceso del usuario

La Credential Management API:

  • Simplifica el flujo de acceso. Los usuarios pueden volver a acceder automáticamente en un sitio, incluso si su sesión caducó.
  • Permite el acceso en un toque con selector de cuentas. Se muestra un selector de cuentas nativo que elimina al formulario de acceso.
  • Almacena credenciales. Puede almacenar una combinación de nombre de usuario y contraseña o incluso detalles de cuentas federadas.

¿Quieres verlo en acción? Prueba la demostración de la Credential Management API y observa el código.

Pasos para la implementación de Credential Management

Mientras que existen muchas formas de integrar la Credential Management API con éxito, y las características específicas de una integración dependen de la estructura y la experiencia de usuario del sitio, los sitios que usan este flujo tienen las siguientes ventajas para la experiencia de usuario:

  • Los usuarios existentes de tu servicio que tienen una sola credencial guardada en el navegador acceden de inmediato, y se los redirecciona a la página de sesión iniciada apenas termina la autenticación.
  • Los usuarios que tienen varias credenciales guardadas en el navegador o que han inhabilitado el acceso automático necesitan responder a un diálogo antes de acceder a la página de sesión iniciada del sitio.
  • Cuando los usuarios cierran sesión, el sitio web se asegura de que no vuelvan a acceder automáticamente.

Recupera las credenciales del usuario y haz que el usuario acceda

Para hacer que el usuario acceda, recupera las credenciales del gestor de contraseñas del navegador y úsalas para iniciar su sesión.

Por ejemplo:

  1. Cuando un usuario llega a tu sitio y no accede, llama a navigator.credential.get()
  2. Usa las credenciales recuperadas para hacer que el usuario acceda.
  3. Actualiza la IU para indicar que el usuario accedió.

Obtén más información en Recuperar credenciales.

Guarda o actualiza las credenciales de usuario

Si el usuario accedió con un nombre de usuario y contraseña:

  1. Luego de que el usuario acceda correctamente, cree una cuenta o cambie una contraseña, crea PasswordCredential con el ID de usuario y la contraseña.
  2. Guarda el objeto de las credenciales usando navigator.credentials.store().

Si el usuario accedió con un proveedor de identidad federada, como Google Sign-In, Facebook, GitHub, etc.:

  1. Luego de que el usuario acceda correctamente, cree una cuenta o cambie una contraseña, crea FederatedCredential con la dirección de correo electrónico del usuario como la ID y especifica un proveedor de identidad con .provider
  2. Guarda el objeto de las credenciales usando navigator.credentials.store().

Obtén más información en Almacenar credenciales.

Cierra sesión

Cuando el usuario cierre sesión, llama a navigator.credentials.requireUserMediation() para evitar que el usuario vuelva a acceder automáticamente.

Inhabilitar el acceso automático también permite a los usuarios cambiar fácilmente entre cuentas; por ejemplo, entre cuentas de trabajo y personales, o entre distintas cuentas en dispositivos compartidos, sin la necesidad de ingresar nuevamente su información de acceso.

Obtén más información en Cerrar sesión.

Referencias adicionales

Credential Management API en MDN