Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

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