Se usó la API de Cloud Translation para traducir esta página.

Optimiza el flujo de acceso con la API de administración de credenciales

Eiji Kitamura

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.

Aparece una IU de selector de cuentas en una ventana emergente para que el usuario seleccione una cuenta a la que acceder. — Aparece una IU emergente para que el usuario seleccione una cuenta a la que acceder

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().

Cuando se almacenan varias cuentas en el administrador de contraseñas. — Cuando se almacenan varias cuentas en el administrador de contraseñas

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

Diagrama de flujo de la administración de credenciales.

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.

Chrome les preguntará a los usuarios si quieren almacenar la credencial (o un proveedor de federación). — Chrome les preguntará a los usuarios si quieren almacenar la credencial (o un proveedor de federación)

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.

Cuando un usuario accede automáticamente, aparecerá una notificación.

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.

Diagrama de flujo del objeto de credencial

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();

Diagrama de flujo del acceso automático.

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.