Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Almacenar credenciales

Es sencillo almacenar y actualizar las credenciales del usuario con la API navigator.credentials.store().

Almacenar la credencial de un usuario

Después de que un usuario se registra, inicia sesión o cambia la contraseña con éxito, se almacena o se actualiza la credencial del usuario.

Almacenar los detalles del nombre de usuario y de la contraseña

Una vez que el usuario inicia sesión y tú verificas sus credenciales, crea un objeto nuevo PasswordCredential y pásalo a navigator.credentials.store() para guardarlo.

// After a successful sign-in, sign-up or password change,
// Instantiate a `PasswordCredential` object
var c = new PasswordCredential({
  id:       id,
  password: password,
  name:     name,
  iconrURL: iconUrl
});

// Store the credential
navigator.credentials.store(c)
.then(function() {
  // done
});
Notificación para un usuario que inicia sesión automáticamente

Cuando el navegador de Chrome obtiene información de la credencial, aparece una notificación que te pide almacenar una credencial (o proveedor de federación).

Almacenar un nombre de usuario y contraseña desde un formulario

Además de crear manualmente la PasswordCredential, puedes simplemente pasar un elemento anotado correctamente form a PasswordCredential.

Por ejemplo:

<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>

Luego crea un objeto nuevo PasswordCredential pasando una referencia al elemento del formulario:

var form = document.querySelector('#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
  // continuation
});

Se agregará automáticamente cualquier campo del formulario adicional PasswordCredential como parte del parámetro .additionalData.

Almacenar una credencial para una cuenta federada

Para almacenar detalles de la cuenta federada, crea una instancia de un objeto nuevo FederatedCredential, con el identificador del usuario y el del proveedor. Luego llama a navigator.credentials.store() para almacenar la credencial.

Por ejemplo:

// After a successful federation, instantiate a FederatedCredential
var cred = new FederatedCredential({
  id:       id,                           // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name:     name,                         // name in IdP
  iconURL:  iconUrl                       // Profile image url
});

// Store it
navigator.credentials.store(cred)
.then(function() {
  // continuation
});
Parámetros
id string
Identificador de usuario cuando se invoca el flujo de autenticación específico del proveedor de identidad, generalmente como un valor para el login_hint en OAuth.
provider string
La serialización ASCII del origen que usa el proveedor para acceder. Por ejemplo, Facebook estará representado por https://www.facebook.com y Google por https://accounts.google.com.
name string (opcional)
Obtenida del proveedor de identidad.
iconURL string (opcional)
Obtenida del proveedor de identidad.