Recuperar credenciales

Para hacer que el usuario acceda, recupera las credenciales del gestor de contraseñas del navegador y úsalas para iniciar su sesión.

Para recuperar la credencial de un usuario, usa navigator.credentials.get(), que muestra una promesa que se resuelve con un objeto de la credencial como un argumento. El objeto de la credencial obtenido puede ser PasswordCredential o FederatedCredential. Si no existe información sobre la credencial, se muestra null.

navigator.credentials.get({
  password: true,
  unmediated: false,
  federated: {
    providers: [
      'https://account.google.com',
      'https://www.facebook.com'
    ]
  }
}).then(function(cred) {
  if (cred) {
    // Use provided credential to sign user in  
  }
});

Parámetros de navigator.credentials.get

Parámetros
password Boolean
Fija en true para recuperar PasswordCredentials. El valor predeterminado es false.
federated Object
El objeto que acepta provider o protocol como claves, que tiene un conjunto de parámetros. El objeto provider acepta una matriz de strings que identifica los proveedores. Actualmente, ningún navegador implementa protocol.
unmediated Boolean
Fija en true para evitar que se muestre la IU del selector de cuentas.

Obtener una credencial

Obtén una credencial automáticamente

Para iniciar sesión del usuario automáticamente, solicita un objeto de credencial con unmediated: true, tan pronto como accede a tu sitio web, por ejemplo:

navigator.credentials.get({
  password: true,
  unmediated: true, // request a credential without user mediation
  federated: {
    providers: [
      'https://account.google.com',
      'https://www.facebook.com'
    ]
  }
})
Notificación para un usuario que inicia sesión automáticamente

Esta solicitud se resuelve de inmediato con un objeto de la credencial y no mostrará un selector de cuentas. Cuando el navegador obtiene información de la credencial, aparece una notificación:

Obtén una credencial a través del selector de cuentas

IU del selector de cuentas

Si un usuario solicita mediación o tiene cuentas múltiples, usa el selector de cuentas para permitir que el usuario inicie sesión, omitiendo el formulario normal de inicio de sesión.

Generalmente, se invoca al selector de cuentas cuando el usuario presiona el botón "Sign-In". El usuario puede seleccionar una cuenta para iniciar sesión, por ejemplo:

Para habilitar el selector de cuentas, fija la propiedad unmediated en false:

navigator.credentials.get({
  password: true,
  unmediated: false, // request a credential with user mediation
  federated: {
    providers: [
      'https://account.google.com',
      'https://www.facebook.com'
    ]
  }
});

Una vez que el usuario haya seleccionado la cuenta que quiere usar, la promesa se resuelve con un PasswordCredential o un FederatedCredential según su selección. Luego, determina el tipo de credencial y autentica al usuario con la credencial proporcionada.

Si el usuario cancela el selector de cuentas o si no hay credenciales almacenadas, la promesa se resuelve con un valor undefined. En ese caso, recurre a la experiencia de formulario de acceso.

Determinar el tipo de credencial

Cuando se resuelve el navigator.credentials.get(), se mostrará undefined o un objeto Credential. Para determinar si es un PasswordCredential o un FederatedCredential, simplemente mira a la propiedad del objeto .type, que será password o federated.

Si el .type es federated, la propiedad .provider es una string que representa al proveedor de identidad.

Por ejemplo:

if (cred) {
  switch (cred.type) {
    case 'password':
      // authenticate with a server
      break;
    case 'federated':
      switch (cred.provider) {
        case 'https://accounts.google.com':
          // run google identity authentication flow
          break;
        case 'https://www.facebook.com':
          // run facebook identity authentication flow
          break;
      }
      break;
  }
} else {
  // auto sign-in not possible
}

En el caso de un valor undefined, continua con el usuario en el estado de cierre de sesión.

Se pasa un valor undefined cuando:

  • El usuario no ha aceptado la función de inicio de sesión automática (una vez por instancia de navegador).
  • El usuario no tiene credenciales o tiene más de dos objetos de la credencial almacenados en el origen.
  • El usuario ha solicitado pedir una mediación del usuario con el origen.

Autenticar al usuario

Autenticar con un nombre de usuario y contraseña

Para autenticar al usuario con tu servidor, PUBLICA el PasswordCredential proporcionado en el servidor usando fetch().

Una vez PUBLICADO, fetch automáticamente convierte el objeto PasswordCredential en un objeto FormData codificado como multipart/form-data:

------WebKitFormBoundaryOkstjzGAv8zab97W
Content-Disposition: form-data; name="id"

chromedemojp@gmail.com
------WebKitFormBoundaryOkstjzGAv8zab97W
Content-Disposition: form-data; name="password"

testtest
------WebKitFormBoundaryOkstjzGAv8zab97W--

Parámetros de PasswordCredential

Un objeto obtenido PasswordCredential incluye los siguientes parámetros:

Parámetros
id String
String para identificar usuarios.
password String
Contraseña opaca que no puedes obtener usando JavaScript.
name String
String del nombre de usuario.
iconURL String
String de la URL de la imagen del ícono de usuario.

Cambiar parámetros

En algunos casos, tal vez sea necesario agregar datos adicionales a la PUBLICACIÓN de autenticación.

Cambia las claves de parámetros asignando una string a .idName o .passwordName.

También puedes agregar parámetros adicionales como un token de falsificación de solicitudes entre sitios (CSRF) asignando .additionalData al FormData y puedes anexarle pares clave-valor.

Una vez que obtienes el objeto de la credencial:

if (cred) {
  if (cred.type == 'password') {
    // Use `email` instead of `id` for the id
    cred.idName = 'email';

    // Append CSRF Token
    var csrf_token = document.querySelector('#csrf_token').value;
    var form = new FormData();
    form.append('csrf_token', csrf_token);

    // Append additional credential data to `.additionalData`
    cred.additionalData = form;

    // `POST` the credential object.
    // 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
    });
  }
}

Puedes hacer algo similar asignando un objeto URLSearchParams en lugar de un FormData a .additionalData. En este caso, el objeto completo de la credencial se codifica usando application/x-www-form-urlencoded.

Autenticar con un proveedor de identidad

Para autenticar al usuario con un proveedor de identidad, simplemente usa el flujo de autenticación específico con el FederatedCredential.

Por ejemplo, si el proveedor es Google, usa la biblioteca JavaScript de Google Sign-In:

// Instantiate an auth object
var auth2 = gapi.auth2.getAuthInstance();

// Is this user already signed in?
if (auth2.isSignedIn.get()) {
  var googleUser = auth2.currentUser.get();

  // Same user as in the credential object?
  if (googleUser.getBasicProfile().getEmail() === id) {
    // Continue with the signed-in user.
    return Promise.resolve(googleUser);
  }
}

// Otherwise, run a new authentication flow.
return auth2.signIn({
  login_hint: id || ''
});

Google Sign-In genera un token de ID como una prueba de autenticación que envías al servidor para crear una sesión.

Para proveedores de identidad adicionales, consulta la documentación respectiva:

Cerrar sesión

Cuando un usuario cierra sesión en tu sitio web, es tu responsabilidad asegurarte de que el usuario no inicie sesión automáticamente en su próxima visita. Para desactivar el inicio de sesión automático, llama a navigator.credentials.requireUserMediation():

// After a user signing out...
navigator.credentials.requireUserMediation();

Luego, si se llama al navigator.credentials.get() con unmediated: true, mostrará undefined y el usuario no iniciará sesión. Esto solo se recuerda para la instancia actual del navegador para este origen.

Para reanudar el inicio de sesión automático, un usuario puede elegir iniciar sesión de modo intencional, al elegir la cuenta con la que desea iniciar sesión, desde el selector de cuentas. Luego, se vuelve a iniciar la sesión del usuario, hasta que cierre sesión de modo explícito.