Para fazer login dos usuários, recupere as credenciais do gerenciador de senhas do navegador e use-as para fazer o login dos usuários automaticamente. Para usuários com várias contas, permita que selecionem a conta com apenas um toque usando o seletor de conta.
Login automático
O login automático pode acontecer em qualquer lugar do site, não apenas na parte superior, mas em outras páginas de detalhes. Isso é útil quando os usuários chegam a várias páginas do site usando um mecanismo de pesquisa.
Para ativar o login automático:
- Recebe informações de credenciais.
- Autentique o usuário.
- Atualize a interface ou acesse a página personalizada.
Receber informações de credenciais
Para receber informações de credenciais, invoque
navigator.credentials.get().
Especifique o tipo de credenciais a serem solicitadas
fornecendo um password ou federated.
Sempre use mediation: 'silent' para logins automáticos.
Assim, será possível dispensar o processo facilmente se o usuário:
- não tem credenciais armazenadas.
- Tem várias credenciais armazenadas.
- Está desconectado.
Antes de receber uma credencial, não se esqueça de verificar se o usuário já está conectado:
if (window.PasswordCredential || window.FederatedCredential) {
if (!user.isSignedIn()) {
navigator.credentials.get({
password: true,
federated: {
providers: ['https://accounts.google.com'],
},
mediation: 'silent',
});
// ...
}
}
A promessa retornada por navigator.credentials.get() é resolvida
com um objeto de credencial ou null.
Para determinar se é um PasswordCredential ou um FederatedCredential,
confira a propriedade .type do objeto,
que será password ou federated.
Se .type for federated,
a propriedade .provider será uma string que representa o provedor de identidade.
Autenticar usuário
Quando você tiver a credencial,
execute um fluxo de autenticação dependendo do tipo de credencial,
password ou federated:
}).then(c => {
if (c) {
switch (c.type) {
case 'password':
return sendRequest(c);
break;
case 'federated':
return gSignIn(c);
break;
}
} else {
return Promise.resolve();
}
Quando a promessa for resolvida, verifique se você recebeu um objeto de credencial. Caso contrário, não foi possível fazer o login automático. Dispensar silenciosamente o processo de login automático.
Atualizar interface
Se a autenticação for bem-sucedida, atualize a interface ou encaminhe o usuário para a página personalizada:
}).then(profile => {
if (profile) {
updateUI(profile);
}
Não se esqueça de mostrar a mensagem de erro de autenticação
Para evitar confusão, eles verão um aviso azul dizendo "Fazendo login" no momento de receberem o objeto da credencial:
Uma dica importante: se você conseguir um objeto de credencial, mas não autenticar o usuário, mostre uma mensagem de erro:
}).catch(error => {
showError('Sign-in Failed');
});
}
}
Exemplo 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');
});
}
}
Fazer login pelo seletor de conta
Se um usuário exigir mediação ou tiver várias contas, use o seletor de conta para permitir que ele faça login, ignorando o formulário de login comum, por exemplo:
As etapas para fazer login por meio do seletor de conta são as mesmas do login automático, com uma chamada adicional para mostrar o seletor como parte da coleta de informações de credenciais:
- Receba as informações de credenciais e mostre o seletor de conta.
- Autentique o usuário.
- Atualize a interface ou acesse uma página personalizada.
Receber informações de credenciais e mostrar o seletor de conta
Mostra um seletor de conta em resposta a uma ação do usuário definida,
por exemplo, quando o usuário toca no botão "Fazer login". Chame
navigator.credentials.get()
e adicione mediation: 'optional' ou mediation: 'required' para mostrar o seletor de conta.
Quando mediation for required, o usuário sempre verá um seletor de conta para fazer login.
Essa opção permite que usuários com várias contas alternem entre elas com facilidade.
Quando mediation for optional,
um seletor de conta será mostrado ao usuário para fazer login após uma
chamada
navigator.credentials.preventSilentAccess().
Normalmente, isso garante que o login automático não aconteça
depois que o usuário sair ou cancelar a inscrição.
Exemplo mostrando 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 => {
Quando o usuário seleciona uma conta, a promessa é resolvida com a credencial.
Se o usuário cancelar o seletor de conta ou não houver credenciais armazenadas, a promessa será resolvida com null.
Nesse caso, volte para a experiência do formulário de login.
Não se esqueça de voltar ao formulário de login
Você deve retornar a um formulário de login por qualquer um destes motivos:
- Nenhuma credencial está armazenada.
- O usuário dispensou o seletor de conta sem selecionar uma conta.
- A API não está disponível.
}).then(profile => {
if (profile) {
updateUI(profile);
} else {
location.href = '/signin';
}
}).catch(error => {
location.href = '/signin';
});
Exemplo 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';
});
}
});
Login federado
O login federado permite que os usuários façam login com um toque e sem precisar lembrar de outros detalhes de login do site.
Para implementar o login federado:
- Autentique o usuário com uma identidade de terceiros.
- Armazene as informações de identidade.
- Atualize a interface ou acesse uma página personalizada (igual ao login automático).
Autenticar o usuário com a identidade de terceiros
Quando um usuário tocar em um botão de login federado,
execute o fluxo de autenticação do provedor de identidade específico com o
FederatedCredential.
Por exemplo, se o provedor for o Google, use a biblioteca JavaScript do Login do 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 || '',
});
}
});
O Login do Google resulta em um token de ID como prova da autenticação.
Em geral, os logins federados são criados com base em protocolos padrão, como OpenID Connect ou OAuth. Para saber como autenticar com contas federadas, consulte os respectivos documentos dos provedores de identidade federados. Exemplos populares incluem:
Armazenar informações de identidade
Depois que a autenticação for concluída, será possível armazenar as informações de identidade.
As informações que você armazenará aqui são o id do provedor de identidade
e uma string do provedor que representa o provedor de identidade
(name e iconURL são opcionais).
Saiba mais sobre essas informações na
especificação do Gerenciador de credenciais.
Para armazenar detalhes da conta federada, instancie um novo objeto
FederatedCredential
com os identificadores do usuário e do provedor.
Em seguida, invoque
navigator.credentials.store()
para armazenar as informações de identidade.
Após a federação,
instancie um FederatedCredential de maneira síncrona ou assíncrona:
Exemplo de abordagem síncrona:
// 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
});
Exemplo de abordagem assíncrona:
// Create credential object asynchronously.
var cred = await navigator.credentials.create({
federated: {
id: id,
provider: 'https://accounts.google.com',
name: name,
iconURL: iconUrl,
},
});
Em seguida, armazene o objeto da credencial:
// Store it
navigator.credentials.store(cred).then(function () {
// continuation
});
Sair
Desconecte seus usuários quando o usuário tocar no botão para sair. Encerre a sessão primeiro e desative o login automático para visitas futuras. Você decide como encerrar as sessões.
Desative o login automático para visitas futuras
Chame
navigator.credentials.preventSilentAccess():
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Isso garante que o login automático só ocorrerá na próxima vez que o usuário ativar o login automático. Para retomar o login automático, o usuário pode escolher a conta com que quer fazer login no seletor de conta. Dessa forma, o usuário será sempre conectado novamente até sair explicitamente.