Para que os usuários façam login, recupere as credenciais da senha do navegador e as use para fazer login dos usuários automaticamente. Para usuários com várias contas, deixe-os selecionar 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 página superior, mas também em outras páginas de detalhes. Isso é útil quando os usuários acessam várias páginas no site, por meio de um mecanismo de pesquisa.
Para ativar o login automático:
- Receber informações de credenciais.
- Autentique o usuário.
- Atualize a interface ou prossiga para 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
concedendo a ele um password ou federated.
Sempre usar mediation: 'silent' para logins automáticos,
para que você possa dispensar o processo facilmente se o usuário:
- Não tem credenciais armazenadas.
- Tem várias credenciais armazenadas.
- não fez login;
Antes de receber uma credencial, não se esqueça de verificar se o usuário já fez login:
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() resolve
com um objeto de credencial ou null.
Para determinar se é um PasswordCredential ou um FederatedCredential,
basta observar a propriedade .type do objeto,
que será password ou federated.
Se o .type for federated:
a propriedade .provider é uma string que representa o provedor de identidade.
Autenticar usuário
Quando tiver a credencial,
executar 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. Se não, isso significa que o login automático não pode acontecer. Dispensar silenciosamente o processo de login automático.
Atualizar interface
Se a autenticação for bem-sucedida, atualizar a interface ou encaminhar 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 do usuário, os usuários verão um aviso azul dizendo "Fazendo login" no momento de receber o objeto da credencial:
Uma dica importante: se você conseguir obter um objeto de credencial mas não conseguir autenticar o usuário, vai aparecer 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 precisar de mediação ou tiver várias contas, use o seletor de conta para permitir que o usuário faça login ignorando o formulário de login comum, por exemplo:
As etapas para fazer login pelo seletor de conta são as mesmas login automático, com uma chamada adicional para mostrar o seletor de conta como parte do recebimento de informações de credenciais:
- Acesse as informações da credencial e mostre o seletor de conta.
- Autentique o usuário.
- Atualizar a interface ou acessar uma página personalizada.
Receber informações de credenciais e mostrar seletor de conta
Mostrar um seletor de conta em resposta a uma ação definida do usuário
por exemplo, quando o usuário toca no botão "Fazer login" . Ligação
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 facilmente entre elas.
Quando mediation for optional,
o usuário vê explicitamente um seletor de conta para fazer login após um
navigator.credentials.preventSilentAccess()
a chamada.
Normalmente, isso serve para garantir que o login automático não aconteça.
após o usuário optar por 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 => {
Depois que o usuário seleciona uma conta,
a promessa é resolvida com a credencial.
Se os usuários cancelarem o seletor de conta,
ou não há credenciais armazenadas,
a promessa é resolvida com null.
Nesse caso, volte para a experiência do formulário de login.
Não se esqueça de usar o formulário de login
Use um formulário de login por qualquer um destes motivos:
- Nenhuma credencial foi 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 detalhes de login adicionais do seu site.
Para implementar o login federado:
- Autentique o usuário com uma identidade de terceiros.
- Armazene as informações de identidade.
- Atualizar a interface ou acessar uma página personalizada (como no login automático).
Autenticar usuário com identidade de terceiros
Quando um usuário toca em um botão de login federado,
executar o fluxo de autenticação do provedor de identidade com a
FederatedCredential
Por exemplo, se o provedor for o Google, use o 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 gera um token de ID como prova de autenticação.
Em geral, logins federados são criados com base em protocolos padrão, como OpenID Connect ou OAuth. Para aprender a se autenticar com contas federadas, consulte os respectivos provedores de identidade federados documentos. Exemplos populares incluem:
Armazenar informações de identidade
Quando a autenticação for concluída, será possível armazenar as informações de identidade.
As informações que você vai armazenar aqui são o id do provedor de identidade
e uma string de provedor que representa o provedor de identidade
name e iconURL são opcionais.
Saiba mais sobre essas informações na
Especificação do gerenciamento de credenciais.
Para armazenar detalhes de contas federadas, instancie um novo
FederatedCredential
com o identificador do usuário e do provedor.
Em seguida, invoque
navigator.credentials.store()
para armazenar as informações de identidade.
Após a federação,
instanciar um FederatedCredential de forma 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 "Sair". Primeiro encerre a sessão, e desativar o login automático para visitas futuras. (Você decide como encerrar as sessões.)
Desativar o login automático para visitas futuras
Ligação
navigator.credentials.preventSilentAccess():
signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
navigator.credentials.preventSilentAccess();
}
Isso garante que o login automático só acontecerá na próxima vez que o usuário ativar o login automático. Para retomar o login automático, um usuário pode optar por fazer login intencionalmente escolha a conta com a qual deseja fazer login no seletor de conta. Assim, o usuário sempre será conectado novamente até sair explicitamente.