API Credential Management

Meggin Kearney
Meggin Kearney

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é mesmo detalhes da 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

Compatibilidade com navegadores

  • Chrome: 51.
  • Edge: 18.
  • Firefox: 60.
  • Safari: 13.

Origem

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:

  1. Quando um usuário acessa seu site e não faz login, chame navigator.credentials.get().
  2. Use as credenciais recuperadas para fazer login do usuário.
  3. 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 universal, como o Google Sign-In, o Facebook ou o GitHub:

  1. 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 com FederatedCredentials.provider.
  2. 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:

  1. Depois que o usuário fizer login ou criar uma conta, crie o PasswordCredential com o ID do usuário e a senha.
  2. 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.

Feedback