Esta página foi traduzida pela API Cloud Translation.

Simplificar o fluxo de login com a API de gerenciamento de credenciais

Eiji Kitamura

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. — Uma interface do seletor de conta aparece para que o usuário escolha uma conta para fazer login

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. — Quando várias contas são armazenadas no gerenciador de senhas

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.

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). — O Chrome pergunta aos usuários se eles querem armazenar a credencial (ou um provedor de federação)

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
});

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.

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

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();

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.