API Credential Management

Eiji Kitamura

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é detalhes de conta federada. Essas credenciais podem ser sincronizadas entre dispositivos pelo navegador.

Ponto principal : o uso da API Credential Management exige que a página seja fornecida de uma origem segura.

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

• 51
• 18
• 60
• 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.
}

Aviso : a detecção de recursos ao verificar navigator.credentials pode interromper seu site em navegadores que oferecem suporte a WebAuthn(PublicKeyCredential), mas não a todos os tipos de credenciais (PasswordCredential e FederatedCredential) definidos pela API Credential Management. Saiba mais.

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 federado, 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