Usuarios que acceden

Eiji Kitamura

Meggin Kearney

Para que los usuarios accedan, recupera las credenciales de la contraseña del navegador de Google Cloud y utilizarlas para que los usuarios accedan automáticamente. En el caso de los usuarios con varias cuentas, y permite que seleccione la cuenta presionando una sola vez mediante el Selector de cuentas.

Acceso automático

El acceso automático puede realizarse en cualquier parte del sitio web. no solo en la página superior, 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. Autentica 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 navigator.credentials.get() Especifica el tipo de credenciales que se solicitarán asígnale una password o federated.

Usar siempre mediation: 'silent' para los accesos automáticos para que puedas descartar fácilmente el proceso si el usuario:

• No tiene credenciales almacenadas.
• Tiene varias credenciales almacenadas.
• Saliste de tu 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 devuelve navigator.credentials.get() resuelve con un objeto de credencial o null. Para determinar si es un PasswordCredential o un FederatedCredential, haz lo siguiente: solo mira la propiedad .type del objeto que será password o federated.

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

Autenticar usuario

Una vez que tengas la credencial, ejecutar 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 resuelve la promesa, verifica si recibiste un objeto de credencial. De lo contrario, no se pudo acceder automáticamente. Descarta sin aviso el proceso de acceso automático.

Actualiza la IU

Si la autenticación es exitosa, actualizar la IU o redireccionar 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 el usuario se confunda, los usuarios deberían ver un aviso azul que dice “Acceder” en el momento de obtener el objeto de credencial:

Sugerencia importante: si logras obtener un objeto de credencial pero no se puede autenticar al usuario, deberías mostrar un 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 con el selector de cuentas

Si un usuario necesita mediación o tiene varias cuentas, usar el selector de cuentas para permitir que el usuario acceda omitir el formulario de acceso normal, por ejemplo:

Los pasos para acceder con el selector de cuentas son los mismos que se indican en 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 las credenciales y muestra el selector de cuentas.
2. Autentica el usuario.
3. Actualiza la IU o accede a una página personalizada.

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

Mostrar un selector de cuentas en respuesta a una acción del usuario definida por ejemplo, cuando el usuario presiona el botón "Acceder" . Llamada 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 que acceda. Esta opción permite que los usuarios con varias cuentas cambien fácilmente entre ellas. Cuando mediation sea optional, el usuario ve explícitamente un selector de cuentas para que acceda después de un navigator.credentials.preventSilentAccess() llamada. Normalmente, esto es para garantizar que el acceso automático no ocurra después de que el usuario elige salir o cancelar el registro.

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

Deberías recurrir a un formulario de acceso por cualquiera de los siguientes motivos:

• No se almacenan credenciales.
• El usuario descartó el selector de cuentas sin seleccionar una cuenta.
• 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 solo toque y sin tener que recordar detalles de acceso adicionales para tu sitio web.

Para implementar el acceso federado, haz lo siguiente:

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

Autentica usuarios con una identidad de terceros

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

Navegadores compatibles

• (51)
• (79)
• ×
• ×

Origen

Por ejemplo, si el proveedor es Google, usa el 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 inicios de sesión federados se basan en protocolos estándar, como OpenID Connect o OAuth. Para aprender a autenticar con cuentas federadas, consultar los respectivos proveedores de documentos. Estos son algunos ejemplos populares:

• Acceso con Google
• Acceso con Facebook
• Acceso con Twitter
• OAuth de GitHub

Almacenar información de identidad

Una vez completada 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 de proveedor que representa el 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 nueva instancia. FederatedCredential objeto con el identificador del usuario y el identificador del proveedor. Luego, invoca navigator.credentials.store() para almacenar la información de identidad.

Después de una 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 los usuarios cuando se presione el botón Salir. Primero finaliza la sesión y, luego, desactiva el acceso automático para visitas futuras. Tú decides cómo finalizar las sesiones.

Desactiva el acceso automático para visitas futuras

Llamada navigator.credentials.preventSilentAccess():

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

De esta manera, garantizarás que el acceso automático no se produzca hasta la próxima vez que el usuario lo habilite. Para reanudar el acceso automático, un usuario puede optar por acceder intencionalmente eligiendo en el selector de cuentas la cuenta a la que se quiere acceder. De este modo, el usuario siempre volverá a acceder a su cuenta hasta que salga de su cuenta de forma explícita.

Comentarios