A Credential Management API é uma API de navegador baseada em padrões que oferece uma interface programática entre o site e o navegador, proporcionando acesso fácil entre dispositivos e removendo gargalos dos fluxos de acesso por senha.
A Credential Management API:
- Simplifique o fluxo de acesso — os usuários podem fazer novo acesso automaticamente em um site, mesmo que a sessão tenha expirado.
- Permite acesso em um toque com o seletor de contas — um seletor de contas nativos é exibido, eliminando o formulário de acesso por senha.
- Armazena credenciais — pode armazenar uma combinação de nome de usuário e senha ou até dados de conta universal.
Que ver isso funcionando? Veja a demonstração da Credential Management API e dê uma olhada no código.
Etapas para implementar o Credential Management
Embora haja diversas maneiras de integrar a Credential Management API e as especificações de uma integração dependam da estrutura e da experiência do usuário do site, os sites que usam esse fluxo têm as seguintes vantagens na experiência do usuário:
- Os usuários do serviço que têm uma única credencial salva no navegador fazem login imediatamente e são redirecionados à página de acesso efetuado assim que a autenticação acaba.
- Os usuários que têm diversas credenciais salvas ou que desativaram o login automático precisam responder a uma caixa de diálogo antes de acessarem a página de acesso efetuado do site.
- Quando os usuários fazem logout, o site garante que eles não acessem automaticamente quando retornarem.
Ponto-chave: Usar a Credential Management API exige que a página seja fornecida a partir de uma origem segura.
Recuperar credenciais do usuário e fazer login
Para fazer o usuário acessar, recupere as credenciais do gerenciador de senhas do navegador e use-as.
Por exemplo:
- Quando o usuário chegar no site e não fizer login automaticamente,
chame
navigator.credential.get() - Use as credenciais recuperadas para aplicar o login automático ao usuário.
- Atualize a IU para indicar que o usuário fez login.
Leia mais em Recuperar credenciais.
Salvar ou atualizar credenciais do usuário
Se o usuário acessar com nome de usuário e senha:
- Depois que o usuário acessar com sucesso, criar uma conta ou alterar uma
senha, crie o
PasswordCredentialcom o ID do usuário e a senha. - Salve o objeto da credencial usando
navigator.credentials.store().
Se o usuário acessou com um provedor de identidade universal, como o Google Sign-In, o Facebook, o GitHub etc.:
- Depois que o usuário acessar com sucesso, criar uma conta ou alterar uma
senha, crie o
FederatedCredentialcom o endereço de email do usuário como o ID e especifique o provedor de identidade com.provider - Salve o objeto da credencial usando
navigator.credentials.store().
Saiba mais em Armazenar credenciais.
Fazer logout
Quando o usuário faz logout, chame navigator.credentials.requireUserMediation()
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 Logout.