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 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:
- Obtener información de credenciales
- Autentica al usuario.
- Actualiza la IU o ve a la página personalizada.
Obtén información de credenciales
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:
- Obtén la información de las credenciales y muestra el selector de cuentas.
- Autentica el usuario.
- 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:
- Autentica al usuario con una identidad de terceros.
- Almacena la información de identidad.
- 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
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 construyen sobre 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:
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 con la que desea acceder. De este modo, el usuario siempre volverá a acceder a su cuenta hasta que salga de su cuenta de forma explícita.