La API de Credential Management

Meggin Kearney
Meggin Kearney

La API de Credential Management es una API de navegador basada en estándares que proporciona una interfaz programática entre el sitio y el navegador para un acceso fluido en todos los dispositivos.

La API de Credential Management:

  • Se elimina la fricción de los flujos de acceso: Los usuarios pueden volver a acceder automáticamente a un sitio, incluso si su sesión venció o si guardaron credenciales en otro dispositivo.
  • Permite el acceso con un toque con el 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. Estas credenciales se pueden sincronizar en todos los dispositivos a través del navegador.

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

Comprobar la compatibilidad con el navegador de la API de Credential Management

Navegadores compatibles

  • 51
  • 18
  • 60
  • 13

Origen

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

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

Usuario que accedió

Para que el usuario acceda, recupera las credenciales del administrador de contraseñas del navegador y úsalas para que el usuario acceda.

Por ejemplo:

  1. Cuando un usuario llega a tu sitio y no accede a tu cuenta, 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 Acceso de usuarios.

Guarda o actualiza las credenciales de usuario

Si el usuario accedió con un proveedor de identidad federada, como el Acceso con Google, Facebook o GitHub, haz lo siguiente:

  1. Después de que el usuario acceda o cree una cuenta correctamente, crea el FederatedCredential con la dirección de correo electrónico del usuario como 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 Acceso de usuarios.

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

  1. Una vez que el usuario acceda o cree una cuenta correctamente, 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 de Formularios.

Salir

Cuando el usuario salga de su cuenta, llama a navigator.credentials.preventSilentAccess() para evitar que 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 Salir.

Comentarios