La API de Credential Management

Meggin Kearney
Meggin Kearney

La API de Credential Management 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 todos los dispositivos.

La API de Credential Management:

  • Quita los inconvenientes de los flujos de acceso: Los usuarios pueden volver a acceder automáticamente a un sitio, incluso si su sesión caducó o si guardaron credenciales en otro dispositivo.
  • Permite el acceso en un toque con selector de cuentas: Los usuarios pueden elegir una cuenta en un selector de cuentas nativo.
  • Almacena credenciales: Tu aplicación puede almacenar una combinación de nombre de usuario y contraseña, o incluso detalles de cuentas federadas. El navegador puede sincronizar estas credenciales en todos los dispositivos.

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

Verifica la compatibilidad del navegador con la API de Credential Management

Navegadores compatibles

  • Chrome: 51.
  • Edge: 18.
  • Firefox: 60.
  • Safari: 13.

Origen

Antes de usar la API de Credential Management, primero verifica si se admite PasswordCredential o FederatedCredential.

if (window.PasswordCredential || window.FederatedCredential) {
  // Call navigator.credentials.get() to retrieve stored
  // PasswordCredentials or FederatedCredentials.
}

Cómo acceder como usuario

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.credentials.get().
  2. Usa las credenciales recuperadas para que el usuario acceda.
  3. Actualiza la IU para indicar que el usuario accedió.

Obtén más información en Cómo acceder a los usuarios.

Guarda o actualiza las credenciales del usuario

Si el usuario accedió con un proveedor de identidad federada, como Google Signe In, Facebook o GitHub:

  1. Después de que el usuario acceda correctamente o cree una cuenta, crea el FederatedCredential con la dirección de correo electrónico del usuario como el ID y especifica el proveedor de identidad con FederatedCredentials.provider.
  2. Guarda el objeto de credencial con navigator.credentials.store().

Obtén más información en Cómo acceder a los usuarios.

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

  1. Después de que el usuario acceda correctamente o cree una cuenta, crea el PasswordCredential con el ID de usuario y la contraseña.
  2. Guarda el objeto de credencial con navigator.credentials.store().

Obtén más información en Cómo guardar credenciales desde Formularios.

Salir

Cuando el usuario cierre sesión, llama a navigator.credentials.preventSilentAccess() 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 cuentas en dispositivos compartidos, sin tener que volver a ingresar su información de acceso.

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

Comentarios