Fazer login de usuários

Eiji Kitamura

Meggin Kearney

Para que os usuários façam login, recupere as credenciais da senha do navegador e as use para fazer login dos usuários automaticamente. Para usuários com várias contas, deixe-os selecionar a conta com apenas um toque usando o seletor de conta.

Login automático

O login automático pode acontecer em qualquer lugar do site. não apenas na página superior, mas também em outras páginas de detalhes. Isso é útil quando os usuários acessam várias páginas no site, por meio de um mecanismo de pesquisa.

Para ativar o login automático:

1. Receber informações de credenciais.
2. Autentique o usuário.
3. Atualize a interface ou prossiga para a página personalizada.

Receber informações de credenciais

Compatibilidade com navegadores

• 51
• 18
• 60,00
• 13

Origem

Para receber informações de credenciais, invoque navigator.credentials.get() Especifique o tipo de credenciais a serem solicitadas concedendo a ele um password ou federated.

Sempre usar mediation: 'silent' para logins automáticos, para que você possa dispensar o processo facilmente se o usuário:

• Não tem credenciais armazenadas.
• Tem várias credenciais armazenadas.
• não fez login;

Antes de receber uma credencial, não se esqueça de verificar se o usuário já fez login:

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

A promessa retornada por navigator.credentials.get() resolve com um objeto de credencial ou null. Para determinar se é um PasswordCredential ou um FederatedCredential, basta observar a propriedade .type do objeto, que será password ou federated.

Se o .type for federated: a propriedade .provider é uma string que representa o provedor de identidade.

Autenticar usuário

Quando tiver a credencial, executar um fluxo de autenticação dependendo do tipo de credencial, password ou federated:

    }).then(c => {
     if (c) {
       switch (c.type) {
         case 'password':
           return sendRequest(c);
           break;
         case 'federated':
           return gSignIn(c);
           break;
       }
     } else {
       return Promise.resolve();
     }

Quando a promessa for resolvida, verifique se você recebeu um objeto de credencial. Se não, isso significa que o login automático não pode acontecer. Dispensar silenciosamente o processo de login automático.

Atualizar interface

Se a autenticação for bem-sucedida, atualizar a interface ou encaminhar o usuário para a página personalizada:

    }).then(profile => {
     if (profile) {
       updateUI(profile);
     }

Não se esqueça de mostrar a mensagem de erro de autenticação

Para evitar confusão do usuário, os usuários verão um aviso azul dizendo "Fazendo login" no momento de receber o objeto da credencial:

Uma dica importante: se você conseguir obter um objeto de credencial mas não conseguir autenticar o usuário, vai aparecer uma mensagem de erro:

        }).catch(error => {
          showError('Sign-in Failed');
        });
      }
    }

Exemplo de código completo

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'silent',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        }
      })
      .catch((error) => {
        showError('Sign-in Failed');
      });
  }
}

Fazer login pelo seletor de conta

Se um usuário precisar de mediação ou tiver várias contas, use o seletor de conta para permitir que o usuário faça login ignorando o formulário de login comum, por exemplo:

As etapas para fazer login pelo seletor de conta são as mesmas login automático, com uma chamada adicional para mostrar o seletor de conta como parte do recebimento de informações de credenciais:

1. Acesse as informações da credencial e mostre o seletor de conta.
2. Autentique o usuário.
3. Atualizar a interface ou acessar uma página personalizada.

Receber informações de credenciais e mostrar seletor de conta

Mostrar um seletor de conta em resposta a uma ação definida do usuário por exemplo, quando o usuário toca no botão "Fazer login" . Ligação navigator.credentials.get(), e adicione mediation: 'optional' ou mediation: 'required' para mostrar o seletor de conta.

Quando mediation for required, o usuário sempre verá um seletor de conta para fazer login. Essa opção permite que usuários com várias contas alternem facilmente entre elas. Quando mediation for optional, o usuário vê explicitamente um seletor de conta para fazer login após um navigator.credentials.preventSilentAccess() a chamada. Normalmente, isso serve para garantir que o login automático não aconteça. após o usuário optar por sair ou cancelar a inscrição.

Exemplo mostrando mediation: 'optional':

    var signin = document.querySelector('#signin');
    signin.addEventListener('click', e => {
     if (window.PasswordCredential || window.FederatedCredential) {
       navigator.credentials.get({
         password: true,
         federated: {
           providers: [
             'https://accounts.google.com'
           ]
         },
         mediation: 'optional'
       }).then(c => {

Depois que o usuário seleciona uma conta, a promessa é resolvida com a credencial. Se os usuários cancelarem o seletor de conta, ou não há credenciais armazenadas, a promessa é resolvida com null. Nesse caso, volte para a experiência do formulário de login.

Não se esqueça de usar o formulário de login

Use um formulário de login por qualquer um destes motivos:

• Nenhuma credencial foi armazenada.
• O usuário dispensou o seletor de conta sem selecionar uma conta.
• A API não está disponível.

    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

Exemplo de código completo

var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
  if (window.PasswordCredential || window.FederatedCredential) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'optional',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
      })
      .catch((error) => {
        location.href = '/signin';
      });
  }
});

Login federado

O login federado permite que os usuários façam login com um toque e sem precisar lembrar detalhes de login adicionais do seu site.

Para implementar o login federado:

1. Autentique o usuário com uma identidade de terceiros.
2. Armazene as informações de identidade.
3. Atualizar a interface ou acessar uma página personalizada (como no login automático).

Autenticar usuário com identidade de terceiros

Quando um usuário toca em um botão de login federado, executar o fluxo de autenticação do provedor de identidade com a FederatedCredential

Compatibilidade com navegadores

• 51
• 79,00
• x
• x

Origem

Por exemplo, se o provedor for o Google, use o Biblioteca JavaScript do Login do Google:

navigator.credentials
  .get({
    password: true,
    mediation: 'optional',
    federated: {
      providers: ['https://account.google.com'],
    },
  })
  .then(function (cred) {
    if (cred) {
      // Instantiate an auth object
      var auth2 = gapi.auth2.getAuthInstance();

      // Is this user already signed in?
      if (auth2.isSignedIn.get()) {
        var googleUser = auth2.currentUser.get();

        // Same user as in the credential object?
        if (googleUser.getBasicProfile().getEmail() === cred.id) {
          // Continue with the signed-in user.
          return Promise.resolve(googleUser);
        }
      }

      // Otherwise, run a new authentication flow.
      return auth2.signIn({
        login_hint: id || '',
      });
    }
  });

O Login do Google gera um token de ID como prova de autenticação.

Em geral, logins federados são criados com base em protocolos padrão, como OpenID Connect ou OAuth. Para aprender a se autenticar com contas federadas, consulte os respectivos provedores de identidade federados documentos. Exemplos populares incluem:

• Login do Google
• Login do Facebook
• Login do Twitter
• OAuth do GitHub

Armazenar informações de identidade

Quando a autenticação for concluída, será possível armazenar as informações de identidade. As informações que você vai armazenar aqui são o id do provedor de identidade e uma string de provedor que representa o provedor de identidade name e iconURL são opcionais. Saiba mais sobre essas informações na Especificação do gerenciamento de credenciais.

Para armazenar detalhes de contas federadas, instancie um novo FederatedCredential com o identificador do usuário e do provedor. Em seguida, invoque navigator.credentials.store() para armazenar as informações de identidade.

Após a federação, instanciar um FederatedCredential de forma síncrona ou assíncrona:

Exemplo de abordagem síncrona:

// Create credential object synchronously.
var cred = new FederatedCredential({
  id: id, // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name: name, // name in IdP
  iconURL: iconUrl, // Profile image url
});

Exemplo de abordagem assíncrona:

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

Em seguida, armazene o objeto da credencial:

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

Sair

Desconecte seus usuários quando o usuário tocar no botão "Sair". Primeiro encerre a sessão, e desativar o login automático para visitas futuras. (Você decide como encerrar as sessões.)

Desativar o login automático para visitas futuras

Ligação navigator.credentials.preventSilentAccess():

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

Isso garante que o login automático só acontecerá na próxima vez que o usuário ativar o login automático. Para retomar o login automático, um usuário pode optar por fazer login intencionalmente escolha a conta com a qual deseja fazer login no seletor de conta. Assim, o usuário sempre será conectado novamente até sair explicitamente.

Feedback