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:
- Remove o atrito dos fluxos de login: os usuários podem ser conectados de novo automaticamente a um site, mesmo que a sessão tenha expirado ou que tenham salvo credenciais 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.
- Armazenar credenciais: seu aplicativo pode armazenar uma combinação de nome de usuário e senha ou até mesmo detalhes de contas federadas. Essas credenciais podem ser sincronizadas entre dispositivos pelo navegador.
Quer conferir o recurso em ação? 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.
}
Usuário que fez login
Para fazer o login do usuário, recupere as credenciais do gerenciador de senhas do navegador e use-as para fazer o login do usuário.
Exemplo:
- Quando um usuário acessar seu site e não tiver feito 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.