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:
- Inclua
autocomplete
no formulário. - Impeça o envio do formulário.
- Envie uma solicitação para autenticar.
- Armazenar a credencial.
- 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).
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
navigator.credentials.store()