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
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:
- Cuando un usuario llega a tu sitio y no accede a tu cuenta, llama a
navigator.credentials.get()
. - Usa las credenciales recuperadas para que el usuario acceda.
- 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:
- 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 conFederatedCredentials.provider
. - 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:
- Una vez que el usuario acceda o cree una cuenta correctamente, crea el
PasswordCredential
con el ID de usuario y la contraseña. - 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.