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 fazer login de novo automaticamente em um site, mesmo que a sessão tenha expirado ou que tenham salvo as credenciais em outro dispositivo.
- Permite fazer login com um toque com o Seletor de conta: os usuários podem escolher uma conta em um seletor 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 os 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 a navegadores da API Credential Management
Antes de usar a API Credential Management, verifique se PasswordCredential
ou FederatedCredential
é compatível.
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
Usuário de login
Para fazer o login do usuário, recupere as credenciais do gerenciador de senhas do navegador e use-as para fazer o login.
Exemplo:
- Quando um usuário acessar seu site sem fazer login, chame
navigator.credentials.get()
. - Use as credenciais recuperadas para fazer o login do usuário.
- Atualizar 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 Login do Google, Facebook ou GitHub:
- Depois que o usuário fizer login ou criar uma conta, crie a
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 da credencial usando
navigator.credentials.store()
.
Saiba mais em Fazer login de usuários.
Se o usuário fez 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 da credencial usando
navigator.credentials.store()
.
Saiba mais em Salvar credenciais de formulários.
Sair
Quando o usuário sair, chame navigator.credentials.preventSilentAccess()
para evitar que ele seja conectado automaticamente de novo.
A desativação do login automático também permite que os usuários alternem facilmente entre contas, por exemplo, entre contas de trabalho e pessoais, ou entre contas em dispositivos compartilhados, sem precisar digitar novamente as informações de login.
Saiba mais em Sair.