A API Credential Management é uma API de navegador baseada em padrões que oferece uma interface programática entre o site e o navegador para facilitar o login em vários dispositivos.
A API Credential Management:
- Remover a fricção dos fluxos de login: os usuários podem fazer login automaticamente em um site, mesmo que a sessão tenha expirado ou que as credenciais tenham sido salvas em outro dispositivo.
- Permite acesso em um toque com o seletor de contas: os usuários podem escolher uma conta em um seletor de contas nativo.
- Armazena credenciais: o app pode armazenar uma combinação de nome de usuário e senha ou até detalhes de conta federada. Essas credenciais podem ser sincronizadas entre dispositivos pelo navegador.
Quer conferir como ele funciona? Teste a demonstração da API Credential Management e confira o código.
Verificar o suporte da Credential Management API para navegadores
Antes de usar a API Credential Management, verifique se PasswordCredential
ou FederatedCredential
são compatíveis.
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
Fazer login do usuário
Para fazer o usuário acessar, recupere as credenciais do gerenciador de senhas do navegador e use-as para fazer o usuário acessar.
Exemplo:
- Quando um usuário acessa seu site e não faz login,
chame
navigator.credentials.get()
. - Use as credenciais recuperadas para fazer login do usuário.
- Atualize a interface para indicar que o usuário fez login.
Saiba mais em Fazer login de usuários.
Salvar ou atualizar credenciais do usuário
Se o usuário fez login com um provedor de identidade federado, como o Google Sign-In, o Facebook ou o GitHub:
- Depois que o usuário fizer login ou criar uma conta, crie o
FederatedCredential
com o endereço de e-mail do usuário como o ID e especifique o provedor de identidade comFederatedCredentials.provider
. - Salve o objeto de credencial usando
navigator.credentials.store()
.
Saiba mais em Fazer login de usuários.
Se o usuário fizer login com um nome de usuário e uma senha:
- Depois que o usuário fizer login ou criar uma conta, crie o
PasswordCredential
com o ID do usuário e a senha. - Salve o objeto de credencial usando
navigator.credentials.store()
.
Saiba mais em Salvar credenciais de formulários.
Sair
Quando o usuário faz logout, chame navigator.credentials.preventSilentAccess()
para impedir que o usuário faça login automático quando voltar.
Desativar o login automático também permite que os usuários alternem entre contas facilmente, por exemplo, entre contas profissionais e pessoais, ou entre contas de dispositivos compartilhados, sem ter que reinserir as informações de acesso.
Saiba mais em Fazer logout.