Para proporcionar una experiencia del usuario sofisticada, es importante ayudar a los usuarios autenticarse en tu sitio web. Los usuarios autenticados pueden interactuar con entre sí con un perfil dedicado, sincronizar datos entre dispositivos o procesar datos en línea; y la lista es interminable. Pero crear, recordar y escribir las contraseñas suelen ser engorrosas para los usuarios finales, especialmente en las pantallas de los dispositivos móviles lo que los lleva a reutilizar las mismas contraseñas en distintos sitios. Esto, por supuesto, es un riesgo de seguridad.
La versión más reciente de Chrome (51) es compatible con la API de Credential Management. Es un propuesta estándar en el W3C que brinda a los desarrolladores acceso programático a el administrador de credenciales de un navegador y ayuda a los usuarios a acceder con más facilidad.
¿Qué es la API de Credential Management?
La API de Credential Management permite a los desarrolladores almacenar y recuperar contraseñas y credenciales federadas, y proporciona 3 funciones:
navigator.credentials.get()navigator.credentials.store()navigator.credentials.requireUserMediation()
Con el uso de estas APIs sencillas, los desarrolladores pueden realizar acciones poderosas como las siguientes:
- Permite que los usuarios accedan con solo un toque.
- Recuerda la cuenta federada con la que el usuario accedió.
- Permite que los usuarios vuelvan a acceder cuando venza una sesión.
En la implementación de Chrome, las credenciales se almacenarán en la contraseña de Chrome administrador. Si los usuarios accedieron a Chrome, pueden sincronizar sus contraseñas en todos los dispositivos. Esas contraseñas sincronizadas también se pueden compartir con apps para Android. que integraron la API de Smart Lock for Passwords para Android. para tener una experiencia multiplataforma fluida.
Integra la API de Credential Management en tu sitio
La forma en que usas la API de Credential Management con tu sitio web puede variar según su arquitectura. ¿Es una app de una sola página? ¿Es un legado arquitectura con transiciones de página? ¿El formulario de acceso se encuentra solo en la parte superior? página? ¿Hay botones para acceder en todas partes? ¿Pueden los usuarios navegar significativamente por tus sitio web sin acceder? ¿La federación funciona en ventanas emergentes? ¿O requieren interacción en varias páginas?
Es casi imposible abarcar todos estos casos, pero echemos un vistazo a aplicación típica de una sola página.
- La página superior es un formulario de registro.
- Presionando "Acceder" , los usuarios navegarán a un formulario de acceso.
- Tanto los formularios de registro como de acceso tienen las opciones típicas de id/contraseña. credenciales y federación, p.ej., con el Acceso con Google y el Acceso con Facebook.
Cuando uses la API de Credential Management, podrás agregar lo siguiente funciones del sitio, por ejemplo:
- Mostrar un selector de cuentas al acceder: Muestra una IU nativa del selector de cuentas. cuando un usuario presione "Acceder".
- Almacenar credenciales: Después de acceder correctamente, ofrece almacenar el información de credenciales al administrador de contraseñas del navegador para su uso posterior.
- Permitir que el usuario vuelva a acceder automáticamente: Permite que el usuario vuelva a acceder si un la sesión venció.
- Mediar el acceso automático: Una vez que un usuario sale de su cuenta, inhabilita el acceso automático para la próxima visita del usuario.
Puedes experimentar estas funciones implementadas en un sitio de demostración con su código de muestra.
Mostrar el Selector de cuentas al acceder
Entre el toque de un usuario y la opción "Acceder" y la navegación a un formulario de acceso, puede usar navigator.credentials.get() para obtener información de credenciales. Chrome mostrará la IU del selector de cuentas el usuario puede elegir una cuenta.
Obtén un objeto de credencial de contraseña
Para mostrar las credenciales de contraseña como opciones de la cuenta, usa password: true.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
Uso de una credencial de contraseña para acceder
Una vez que el usuario seleccione una cuenta, la función de resolución recibirá una
la credencial de la contraseña. Puedes enviarlo al servidor con fetch():
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
Usa una credencial federada para acceder
Para mostrar cuentas federadas a un usuario, agrega federated, que toma un array.
de proveedores de identidad hasta las opciones de get().
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
Puedes examinar la propiedad type del objeto de credencial para ver si es PasswordCredential.
(type == 'password') o FederatedCredential (type == 'federated').
Si la credencial es una
FederatedCredential,
puedes llamar a la API correspondiente
con la información que contiene.
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
Almacenar credenciales
Cuando un usuario accede a tu sitio web mediante un formulario, puedes usar
navigator.credentials.store()
para almacenarla. Se le solicitará al usuario que lo almacene o no. Según
en el tipo de credencial, usa new
PasswordCredential()
o new
FederatedCredential()
para crear un objeto de credencial que quieras almacenar.
Crea y almacena una credencial de contraseña desde un elemento de formulario
En el siguiente código, se usan atributos autocomplete para
mapa
los elementos del formulario como PasswordCredential
los parámetros del objeto.
HTML
html
<form id="form" method="post">
<input type="text" name="id" autocomplete="username" />
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="******" />
</form>
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Crea y almacena una credencial federada
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Permite que el usuario vuelva a acceder automáticamente
Cuando un usuario abandona tu sitio web y regresa más tarde, es posible que el la sesión venció. No molestes al usuario a escribir su contraseña cada vez que regresa. Permite que el usuario vuelva a acceder automáticamente.
Obtén un objeto de credencial
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
El código debería ser similar al que viste en la sección "Mostrar el selector de cuentas"
al acceder" sección. La única diferencia es que establecerás
unmediated: true
Esto resuelve la función de inmediato y te da la credencial para hacer que el usuario acceda automáticamente. Existen algunas condiciones:
- El usuario aceptó la función de acceso automático con una cálida bienvenida.
- El usuario ya accedió al sitio web con la API de Credential Management.
- El usuario solo tiene una credencial almacenada para tu origen.
- El usuario no salió de la cuenta explícitamente en la sesión anterior.
Si no se cumple alguna de estas condiciones, se rechazará la función.
Mediar el acceso automático
Cuando un usuario sale de su cuenta en su sitio web, es su responsabilidad garantizar
que el usuario no vuelva a acceder automáticamente. Para garantizar
para esto, la API de Credential Management proporciona un mecanismo llamado mediación.
Para habilitar el modo de mediación, llama a
navigator.credentials.requireUserMediation()
Siempre que el estado de mediación del usuario para el origen esté activado, con
unmediated: true por navigator.credentials.get(), esa función
resolver con undefined.
Mediación del acceso automático
navigator.credentials.requireUserMediation();
Preguntas frecuentes
¿Es posible que JavaScript en el sitio web recupere un archivo sin procesar
contraseña?
No. Solo puedes obtener contraseñas como parte de PasswordCredential.
exponiendo por cualquier medio.
¿Es posible almacenar 3 conjuntos de dígitos para un ID con el de Google Cloud Management? En este momento, no. Tus comentarios sobre la especificación serán muy valorado.
¿Puedo usar la API de Credential Management dentro de un iframe?
La API está restringida a contextos de nivel superior. Llamadas a .get() o .store()
en un iframe se resolverán de inmediato sin efecto.
¿Puedo integrar mi extensión de Chrome para la administración de contraseñas con la credencial
de Google Cloud Management?
Puedes anular navigator.credentials y conectarlo a tu extensión de Chrome para
Credenciales de get() o store().
Recursos
Para obtener más información sobre la API de Credential Management, consulta la Guía de integración.