Usuarios que acceden

Meggin Karney
Meggin Kearney

Para que los usuarios accedan, recupera las credenciales del administrador de contraseñas del navegador y úsalas para que los usuarios accedan automáticamente. Si tienes varias cuentas, permíteles seleccionarlas con solo presionar una vez con el selector.

Acceso automático

El acceso automático puede realizarse en cualquier parte de tu sitio web; no solo en la página principal, sino también en otras páginas secundarias. Esto es útil cuando los usuarios llegan a varias páginas de tu sitio web a través de un motor de búsqueda.

Para habilitar el acceso automático, haz lo siguiente:

  1. Obtén información de credenciales.
  2. Autenticar al usuario
  3. Actualiza la IU o ve a la página personalizada.

Obtén información de credenciales

Navegadores compatibles

  • 51
  • 18
  • 60
  • 13

Origen

Para obtener información de credenciales, invoca a navigator.credentials.get(). Para especificar el tipo de credenciales que se solicitará, asígnale un password o federated.

Siempre usa mediation: 'silent' para el acceso automático, a fin de descartar fácilmente el proceso si el usuario hace lo siguiente:

  • No tiene credenciales almacenadas.
  • Tiene varias credenciales almacenadas.
  • Saliste de la cuenta.

Antes de obtener una credencial, no olvides verificar si el usuario ya accedió:

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

La promesa que muestra navigator.credentials.get() se resuelve con un objeto de credencial o con null. Para determinar si es un PasswordCredential o un FederatedCredential, solo observa la propiedad .type del objeto, que será password o federated.

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

Autenticar usuario

Una vez que tengas la credencial, ejecuta un flujo de autenticación según el tipo de credencial, password o federated:

    }).then(c => {
     if (c) {
       switch (c.type) {
         case 'password':
           return sendRequest(c);
           break;
         case 'federated':
           return gSignIn(c);
           break;
       }
     } else {
       return Promise.resolve();
     }

Cuando se resuelva la promesa, verifica si recibiste un objeto de credencial. De lo contrario, no se pudo realizar el acceso automático. Descartar sin aviso el proceso de acceso automático

Actualiza la IU

Si la autenticación se realiza correctamente, actualiza la IU o reenvía al usuario a la página personalizada:

    }).then(profile => {
     if (profile) {
       updateUI(profile);
     }

No olvides mostrar el mensaje de error de autenticación

Para evitar que los usuarios se confundan, deben ver un aviso azul que dice "Acceder" cuando se obtiene el objeto de credencial:

Un aviso azul que indica que el usuario está accediendo.

Sugerencia importante: Si obtienes un objeto de credencial con éxito, pero no logras autenticar al usuario, debes mostrar el siguiente mensaje de error:

        }).catch(error => {
          showError('Sign-in Failed');
        });
      }
    }

Ejemplo de código completo

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'silent',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        }
      })
      .catch((error) => {
        showError('Sign-in Failed');
      });
  }
}

Cómo acceder mediante el selector de cuentas

Si un usuario requiere mediación o tiene varias cuentas, usa el selector de cuentas para permitir que acceda y omitir el formulario común de acceso, por ejemplo:

Selector de cuentas de Google que muestra varias cuentas.

Los pasos para acceder con el selector de cuentas son los mismos que para el acceso automático, con una llamada adicional para mostrar el selector de cuentas como parte de la obtención de información de credenciales:

  1. Obtén la información de la credencial y muestra el selector de cuentas.
  2. Autentica al usuario.
  3. Actualiza la IU o dirígete a una página personalizada.

Obtén información de credenciales y muestra el selector de cuentas

Muestra un selector de cuentas en respuesta a una acción del usuario definida, por ejemplo, cuando el usuario presiona el botón "Acceder". Llama a navigator.credentials.get() y agrega mediation: 'optional' o mediation: 'required' para mostrar el selector de cuentas.

Cuando mediation sea required, el usuario siempre verá un selector de cuentas para acceder. Esta opción permite que los usuarios con varias cuentas alternen fácilmente entre ellas. Cuando mediation es optional, el usuario ve explícitamente un selector de cuentas para acceder después de una llamada navigator.credentials.preventSilentAccess(). Por lo general, esto se hace para garantizar que el acceso automático no se produzca una vez que el usuario decida salir o cancelar su registro.

Ejemplo en el que se muestra mediation: 'optional':

    var signin = document.querySelector('#signin');
    signin.addEventListener('click', e => {
     if (window.PasswordCredential || window.FederatedCredential) {
       navigator.credentials.get({
         password: true,
         federated: {
           providers: [
             'https://accounts.google.com'
           ]
         },
         mediation: 'optional'
       }).then(c => {

Una vez que el usuario selecciona una cuenta, la promesa se resuelve con la credencial. Si el usuario cancela el selector de cuentas o no hay credenciales almacenadas, la promesa se resuelve con null. En ese caso, recurre a la experiencia del formulario de acceso.

No olvides recurrir al formulario de acceso

Debes recurrir al formulario de acceso por cualquiera de los siguientes motivos:

  • No se almacenan credenciales.
  • El usuario descartó el selector de cuentas sin elegir una.
  • La API no está disponible.
    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

Ejemplo de código completo

var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
  if (window.PasswordCredential || window.FederatedCredential) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'optional',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
      })
      .catch((error) => {
        location.href = '/signin';
      });
  }
});

Acceso federado

El acceso federado permite a los usuarios acceder con un toque y sin tener que recordar detalles de acceso adicionales para tu sitio web.

Para implementar el acceso federado, haz lo siguiente:

  1. Autenticar al usuario con una identidad de terceros
  2. Almacena la información de identidad.
  3. Actualiza la IU o ve a una página personalizada (al igual que en el acceso automático).

Autentica usuario con una identidad de terceros

Cuando un usuario presiona un botón de acceso federado, ejecuta el flujo de autenticación del proveedor de identidad específico con FederatedCredential.

Navegadores compatibles

  • 51
  • 79
  • x
  • x

Origen

Por ejemplo, si el proveedor es Google, usa la biblioteca JavaScript de Acceso con Google:

navigator.credentials
  .get({
    password: true,
    mediation: 'optional',
    federated: {
      providers: ['https://account.google.com'],
    },
  })
  .then(function (cred) {
    if (cred) {
      // 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() === cred.id) {
          // Continue with the signed-in user.
          return Promise.resolve(googleUser);
        }
      }

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

El Acceso con Google genera un token de ID como prueba de autenticación.

En general, los accesos federados se compilan sobre protocolos estándar como OAuth o OpenID Connect. Para obtener información sobre cómo autenticar con cuentas federadas, consulta los documentos de los proveedores de identidad federada correspondientes. Los siguientes son algunos ejemplos populares:

Almacenar información de identidad

Una vez realizada la autenticación, puedes almacenar la información de identidad. La información que almacenarás aquí es la id del proveedor de identidad y una cadena del proveedor que representa al proveedor de identidad (name y iconURL son opcionales). Obtén más información sobre esta información en la especificación de la administración de credenciales.

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

Después de la federación exitosa, crea una instancia de FederatedCredential de forma síncrona o asíncrona:

Ejemplo de enfoque síncrono:

// Create credential object synchronously.
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
});

Ejemplo de enfoque asíncrono:

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

Luego, almacena el objeto de credencial:

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

Salir

Cierra la sesión de tus usuarios cuando se presione el botón Salir. Primero, finaliza la sesión y, luego, desactiva el acceso automático para visitas futuras. (La manera de cerrar las sesiones depende totalmente de ti).

Cómo desactivar el acceso automático para visitas futuras

Llama a navigator.credentials.preventSilentAccess():

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

De esta forma, se asegurará de que el acceso automático no se lleve a cabo hasta la próxima vez que el usuario habilite el acceso automático. Para reanudar el acceso automático, un usuario puede elegir acceder de forma intencional y elegir la cuenta con la que desea hacerlo en el selector de cuentas. Luego, se vuelve a acceder al usuario hasta que sale de la cuenta de forma explícita.

Comentarios