Salvar credenciais de formulários

Meggin kearney
Meggin Kearney

Salvar credenciais de formulários de login

Os formulários de registro e login devem ser o mais simples possível.

Salve as credenciais dos formulários de login para que os usuários não precisem fazer login novamente quando retornarem.

Para armazenar credenciais de usuários de formulários:

  1. Inclua autocomplete no formulário.
  2. Impeça o envio do formulário.
  3. Envie uma solicitação para autenticar.
  4. Armazenar a credencial.
  5. Atualize a interface ou acesse a página personalizada.

Inclua autocomplete no formulário

Antes de continuar, verifique se o formulário inclui atributos autocomplete. Isso ajuda a API Credential Management a encontrar o id e o password do formulário e criar um objeto de credencial.

Isso também ajuda os navegadores que não são compatíveis com a API Credential Management a entender a semântica dela. Saiba mais sobre o preenchimento automático neste artigo de Jason Grigsby (em inglês).

<form id="signup" method="post">
  <input name="email" type="text" autocomplete="username email" />
  <input name="display-name" type="text" autocomplete="name" />
  <input name="password" type="password" autocomplete="new-password" />
  <input type="submit" value="Sign Up!" />
</form>

Impedir que o formulário seja enviado

Quando o usuário pressionar o botão "Enviar", impeça o envio do formulário, o que poderia resultar em uma transição de página:

    var f = document.querySelector('#signup');
    f.addEventListener('submit', e => {
      e.preventDefault();

Ao impedir uma transição de página, você pode reter as informações da credencial enquanto verifica a autenticidade dela.

Autenticar enviando uma solicitação

Para autenticar o usuário, envie informações de credenciais para seu servidor usando AJAX.

No lado do servidor, crie um endpoint (ou simplesmente altere um endpoint atual) que responda com o código HTTP 200 ou 401, para que fique claro para o navegador se a inscrição/login/alteração de senha foi bem-sucedida ou não.

Exemplo:

// Try sign-in with AJAX
fetch('/signin', {
  method: 'POST',
  body: new FormData(e.target),
  credentials: 'include',
});

Armazenar a credencial

Para armazenar uma credencial, primeiro verifique se a API está disponível e instancie um PasswordCredential com o elemento de formulário como um argumento de forma síncrona ou assíncrona. Chame navigator.credentials.store(). Se a API não estiver disponível, basta encaminhar as informações do perfil para a próxima etapa.

Exemplo síncrono:

if (window.PasswordCredential) {
  var c = new PasswordCredential(e.target);
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

Exemplo assíncrono:

if (window.PasswordCredential) {
  var c = await navigator.credentials.create({password: e.target});
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

Quando a solicitação for bem-sucedida, armazene as informações da credencial. Não armazene as informações das credenciais se a solicitação falhar, porque isso confunde os usuários recorrentes.

Quando o navegador Chrome recebe informações de credenciais, uma notificação aparece pedindo para armazenar uma credencial (ou um provedor de federação).

armazenar credencial
Notificação para um usuário que fez login automaticamente

Atualizar a interface

Se tudo tiver dado certo, atualize a interface com as informações do perfil ou prossiga para a página personalizada.

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

Exemplo de código completo

// Get form's DOM object
var f = document.querySelector('#signup');
f.addEventListener('submit', (e) => {
  // Stop submitting form by itself
  e.preventDefault();

  // Try sign-in with AJAX
  fetch('/signin', {
    method: 'POST',
    body: new FormData(e.target),
    credentials: 'include',
  })
    .then((res) => {
      if (res.status == 200) {
        return Promise.resolve();
      } else {
        return Promise.reject('Sign-in failed');
      }
    })
    .then((profile) => {
      // Instantiate PasswordCredential with the form
      if (window.PasswordCredential) {
        var c = new PasswordCredential(e.target);
        return navigator.credentials.store(c);
      } else {
        return Promise.resolve(profile);
      }
    })
    .then((profile) => {
      // Successful sign-in
      if (profile) {
        updateUI(profile);
      }
    })
    .catch((error) => {
      // Sign-in failed
      showError('Sign-in Failed');
    });
});

Compatibilidade com navegadores

PasswordCredential

Compatibilidade com navegadores

  • 51
  • 79
  • x
  • x

Origem

Compatibilidade com navegadores

  • 51
  • 79
  • 60
  • 13

Origem

Feedback