Para oferecer uma experiência do usuário sofisticada, é importante ajudar os usuários autenticar as pessoas no seu site. Usuários autenticados podem interagir usando um perfil dedicado, sincronizam dados entre dispositivos ou processam dados enquanto estiver off-line; a lista é interminável. Mas criar, lembrar e digitar as senhas costumam ser complicadas para os usuários finais, principalmente nas telas de dispositivos móveis. o que as leva a reutilizar as mesmas senhas em diferentes sites. Isso, claro, é um risco para a segurança.
A versão mais recente do Chrome (51) é compatível com a API Credential Management. É um uma proposta de controle de padrões no W3C que dá aos desenvolvedores acesso programático a gerenciador de credenciais do navegador e ajuda os usuários a fazer login com mais facilidade.
O que é a API Credential Management?
A API Credential Management permite que os desenvolvedores armazenem e recuperem senhas de usuário e credenciais federadas e tem três funções:
navigator.credentials.get()
navigator.credentials.store()
navigator.credentials.requireUserMediation()
Com essas APIs simples, os desenvolvedores podem fazer coisas poderosas como:
- Permita que os usuários façam login com apenas um toque.
- Lembre-se da conta federada que o usuário utilizou para fazer login.
- Faça o login dos usuários novamente quando uma sessão expirar.
Na implementação do Chrome, as credenciais serão armazenadas na senha do navegador de projeto. Se os usuários estiverem conectados ao Chrome, eles poderão sincronizar as senhas deles entre dispositivos. Essas senhas sincronizadas também podem ser compartilhadas com apps Android que integraram a API Smart Lock for Passwords para Android. para ter uma experiência multiplataforma integrada.
Como integrar a API Credential Management ao seu site
A maneira de usar a API Credential Management no seu site pode variar dependendo da arquitetura. É um aplicativo de página única? É um legado? com transições de páginas? O formulário de login está localizado apenas na parte superior ? Os botões de login estão em todos os lugares? Os usuários conseguem navegar de maneira site sem fazer login? A federação funciona dentro de janelas pop-up? Ou será que exigem interação entre várias páginas?
É quase impossível cobrir todos esses casos, mas vamos dar uma olhada em uma um aplicativo comum de página única.
- A página superior é um formulário de registro.
- Ao tocar em "Fazer login" botão, os usuários acessarão um formulário de login.
- Os formulários de registro e login têm as opções típicas de ID/senha. credenciais e federação, por exemplo, com o Login do Google e do Facebook.
Ao usar a API Credential Management, você poderá adicionar o seguinte: mais recursos ao site, por exemplo:
- Mostrar um seletor de conta ao fazer login: mostra uma interface nativa do seletor de conta quando um usuário toca em "Fazer login".
- Credenciais da loja:após o login bem-sucedido, ofereça o armazenamento do informações de credenciais ao gerenciador de senhas do navegador para uso posterior.
- Permitir que o usuário faça login de novo automaticamente:permita que o usuário faça login de novo se um sessão expirou.
- Mediar o login automático:quando um usuário sair, desative o login automático. na próxima visita do usuário.
Teste esses recursos implementados em um site de demonstração com um exemplo de código.
Mostrar o Seletor de conta ao fazer login
Entre o toque do usuário na opção "Fazer login" e a navegação para um formulário de login, poderá podem usar navigator.credentials.get() para receber informações de credenciais. o Chrome mostra uma interface do seletor de conta, o usuário pode escolher uma conta.
![Uma interface de usuário do seletor de conta é exibida para que o usuário selecione uma conta para fazer login.](https://developer.chrome.google.cn/static/blog/credential-management-api/image/an-account-chooser-ui-pop-a9dd3159618c6.png?authuser=4&hl=pt)
Receber um objeto de credencial de senha
Para mostrar as credenciais de senha como opções da conta, use password: true
.
navigator.credentials.get({
password: true, // `true` to obtain password credentials
}).then(function(cred) {
// continuation
...
Como usar uma credencial de senha para fazer login
Quando o usuário seleciona uma conta, a função de resolução recebe uma
senha. É possível enviá-lo ao servidor usando fetch()
:
// continued from previous example
}).then(function(cred) {
if (cred) {
if (cred.type == 'password') {
// Construct FormData object
var form = new FormData();
// Append CSRF Token
var csrf_token = document.querySelector('csrf_token').value;
form.append('csrf_token', csrf_token);
// You can append additional credential data to `.additionalData`
cred.additionalData = form;
// `POST` the credential object as `credentials`.
// id, password and the additional data will be encoded and
// sent to the url as the HTTP body.
fetch(url, { // Make sure the URL is HTTPS
method: 'POST', // Use POST
credentials: cred // Add the password credential object
}).then(function() {
// continuation
});
} else if (cred.type == 'federated') {
// continuation
Como usar uma credencial federada para fazer login
Para mostrar contas federadas a um usuário, adicione federated
, que usa uma matriz
de provedores de identidade até as opções de get()
.
![Quando várias contas são armazenadas no gerenciador de senhas.](https://developer.chrome.google.cn/static/blog/credential-management-api/image/when-multiple-accounts-ar-a47c9e7a48cd8.png?authuser=4&hl=pt)
navigator.credentials.get({
password: true, // `true` to obtain password credentials
federated: {
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
}
}).then(function(cred) {
// continuation
...
Você pode examinar a propriedade type
do objeto de credencial para ver se é PasswordCredential
.
(type == 'password'
) ou FederatedCredential
(type == 'federated'
).
Se a credencial for uma
FederatedCredential
,
você pode chamar a API apropriada usando as informações que ela contém.
});
} else if (cred.type == 'federated') {
// `provider` contains the identity provider string
switch (cred.provider) {
case 'https://accounts.google.com':
// Federated login using Google Sign-In
var auth2 = gapi.auth2.getAuthInstance();
// In Google Sign-In library, you can specify an account.
// Attempt to sign in with by using `login_hint`.
return auth2.signIn({
login_hint: cred.id || ''
}).then(function(profile) {
// continuation
});
break;
case 'https://www.facebook.com':
// Federated login using Facebook Login
// continuation
break;
default:
// show form
break;
}
}
// if the credential is `undefined`
} else {
// show form
![Fluxograma de gerenciamento de credenciais.](https://developer.chrome.google.cn/static/blog/credential-management-api/image/credentials-managemente-f-fa888851aa7eb.png?authuser=4&hl=pt)
Armazenar credenciais
Quando um usuário fizer login no seu site usando um formulário, você poderá usar
navigator.credentials.store()
para armazenar a credencial. O usuário será solicitado a armazená-lo ou não. Depende
No tipo da credencial, use new
PasswordCredential()
.
ou new
FederatedCredential()
para criar um objeto de credencial que você gostaria de armazenar.
![O Chrome pergunta aos usuários se eles querem armazenar a credencial (ou um provedor de federação).](https://developer.chrome.google.cn/static/blog/credential-management-api/image/chrome-asks-users-they-737adba9a868a.png?authuser=4&hl=pt)
Criar e armazenar uma credencial de senha de um elemento de formulário
O código a seguir usa atributos autocomplete
para automaticamente
mapa
elementos do formulário para PasswordCredential
parâmetros de objeto.
HTML
html
<form id="form" method="post">
<input type="text" name="id" autocomplete="username" />
<input type="password" name="password" autocomplete="current-password" />
<input type="hidden" name="csrf_token" value="******" />
</form>
JavaScript
var form = document.querySelector('\#form');
var cred = new PasswordCredential(form);
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
Como criar e armazenar uma credencial federada
// After a federation, create a FederatedCredential object using
// information you have obtained
var cred = new FederatedCredential({
id: id, // The id for the user
name: name, // Optional user name
provider: 'https://accounts.google.com', // A string that represents the identity provider
iconURL: iconUrl // Optional user avatar image url
});
// Store it
navigator.credentials.store(cred)
.then(function() {
// continuation
});
![Diagrama de fluxo de login.](https://developer.chrome.google.cn/static/blog/credential-management-api/image/sign-flow-diagram-71ec10662a836.png?authuser=4&hl=pt)
Permitir que o usuário faça login de novo automaticamente
Quando um usuário sai do site e volta mais tarde, é possível que o sessão expirou. Não se incomode para o usuário digitar a senha toda vez que e voltar. Permita que o usuário faça login de novo automaticamente.
![Quando um usuário é conectado automaticamente, uma notificação aparece.](https://developer.chrome.google.cn/static/blog/credential-management-api/image/when-user-is-automatical-dc29fbf63e6c4.png?authuser=4&hl=pt)
Como receber um objeto de credencial
navigator.credentials.get({
password: true, // Obtain password credentials or not
federated: { // Obtain federation credentials or not
providers: [ // Specify an array of IdP strings
'https://accounts.google.com',
'https://www.facebook.com'
]
},
unmediated: true // `unmediated: true` lets the user automatically sign in
}).then(function(cred) {
if (cred) {
// auto sign-in possible
...
} else {
// auto sign-in not possible
...
}
});
O código será semelhante ao que você viu na página "Mostrar Seletor de conta"
ao fazer login" nesta seção. A única diferença é que você definirá
unmediated: true
:
Isso resolve a função imediatamente e fornece a credencial para fazer login automaticamente. Há algumas condições:
- O usuário reconheceu o recurso de login automático em uma recepção calorosa.
- O usuário já fez login no site usando a API Credential Management.
- O usuário tem apenas uma credencial armazenada para sua origem.
- O usuário não saiu explicitamente na sessão anterior.
Se alguma dessas condições não for atendida, a função será rejeitada.
![Diagrama de fluxo do objeto de credencial](https://developer.chrome.google.cn/static/blog/credential-management-api/image/credential-object-flow-di-e5c6caa13d1cd.png?authuser=4&hl=pt)
Mediar o login automático
Quando um usuário sai do seu site, é sua responsabilidade garantir
para que o login do usuário não seja feito automaticamente. Para garantir
isso, a API Credential Management oferece um mecanismo chamado mediação.
Para ativar o modo de mediação, chame
navigator.credentials.requireUserMediation()
Contanto que o status de mediação do usuário para a origem esteja ativado, usar
unmediated: true
por navigator.credentials.get()
, essa função
resolver com undefined
.
Como mediar o login automático
navigator.credentials.requireUserMediation();
![Fluxograma de login automático.](https://developer.chrome.google.cn/static/blog/credential-management-api/image/auto-sign-flow-chart-4a8bd010949ff.png?authuser=4&hl=pt)
Perguntas frequentes
É possível que o JavaScript no site recupere um valor bruto
senha?
Não. Você só pode obter senhas como parte do PasswordCredential
e não é
e não pode ser exposto por qualquer meio.
É possível armazenar três conjuntos de dígitos para um ID usando a credencial API Management? No momento, não. Seu feedback sobre a especificação será apreciado.
Posso usar a API Credential Management em um iframe?
A API é restrita a contextos de nível superior. Ligações para .get()
ou .store()
em um iframe será resolvida imediatamente sem efeito.
Posso integrar minha extensão do Chrome de gerenciamento de senhas à credencial
API Management?
Você pode substituir navigator.credentials
e vinculá-lo à extensão do Chrome para
Credenciais get()
ou store()
.
Recursos
Para saber mais sobre a API Credential Management, consulte o Guia de integração.