Não deixe os visitantes do seu site na mão — deixe-os redefinir a senha caso a tenham esquecido.

Os sistemas de autenticação desempenham um papel crucial no fornecimento de uma experiência de usuário perfeita e segura. Um fluxo de trabalho de autenticação geralmente envolve dois processos: inscrição e login.

À medida que o número de serviços online aumenta, as pessoas criam contas e cada conta exige credenciais de login exclusivas. No entanto, isso torna mais fácil esquecer ou confundir as credenciais de login. Para resolver isso, seu aplicativo deve implementar um recurso de redefinição de senha que permita ao usuário redefinir sua senha de maneira conveniente e segura.

Configurar o projeto React

Você pode implementar um fluxo de trabalho de redefinição de senha de várias maneiras — não há um padrão universal que todos os aplicativos devam seguir. Em vez disso, você deve adaptar a abordagem escolhida para atender às necessidades específicas de seu aplicativo.

O fluxo de trabalho sobre o qual você aprenderá aqui inclui as seguintes etapas:

instagram viewer

Para começar, inicialize rapidamente um projeto React. Em seguida, instale Axios, uma biblioteca de solicitação HTTP JavaScript.

npm instalar axios

Você pode encontrar o código do projeto neste Repositório GitHub.

Criar um componente de login

No diretório src, crie um novo componentes/Login.js arquivo e adicione o seguinte código. Comece definindo o processo de redefinição de senha:

importar axios de"axios";
importar Reagir, { useState } de"reagir";
importar { useContext } de"reagir";
importar { Contexto de Recuperação } de"../Aplicativo";
importar"./global.component.css";
exportarpadrãofunçãoConecte-se() {
const { setPage, setOTP, setEmail } = useContext (RecoveryContext);
const [userEmail, setUserEmail] = useState(""); 


funçãoenviarOtp() {
se (usuarioEmail) {
 axios.get(` http://localhost: 5000/check_email? e-mail=${userEmail}`).então((resposta) => {
se (resposta.status 200) {
const OTP = Matemática.chão(Matemática.aleatório() * 9000 + 1000);
console.log (OTP);
 definirOTP(OTP);
 setEmail (usuárioEmail);
 axios.post(" http://localhost: 5000/enviar_e-mail", {
 OTP,
 destinatário_email: usuárioEmail,
 })
 .então(() => setPage("otp"))
 .pegar(console.registro);
 } outro {
 alerta("Usuário com este e-mail não existe!");
console.log (resposta.data.message);
 }}).pegar(console.registro);
 } outro {
 alerta("Por favor introduza o seu e-mail");
 }}

Esse código cria uma função que envia uma senha de uso único (OTP) para o endereço de e-mail de um usuário. Ele primeiro verifica o usuário verificando seu e-mail no banco de dados antes de gerar e enviar o OTP. Por fim, ele atualiza a interface do usuário com a página OTP.

Conclua o componente de login adicionando código para renderizar o elemento de formulário JSX de login:

retornar (


Login</h2>







 E-mail: 
"e-mail" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />


 Senha:
"senha" />

Criar um componente de verificação OTP

Para garantir a validade de um código inserido por um usuário, você precisa compará-lo com o código enviado para o e-mail dele.

Crie um novo componentes/OTPInput.js arquivo e adicione este código:

importar Reagir, { useState, useContext, useEffect } de"reagir";
importar { Contexto de Recuperação } de"../Aplicativo";
importar axios de"axios";
importar"./global.component.css";
exportarpadrãofunçãoOTPInput() {
const { email, otp, setPage } = useContext (RecoveryContext);
const [OTPinput, setOTPinput] = useState( "");
funçãoverificar OTP() {
se (parseInt(OTPinput) otp) {
 setPage("reiniciar");
 } outro {
 alerta("O código digitado não está correto, tente novamente reenviar o link");
 }
 }

O código cria um componente React onde os usuários verificam seu código OTP. Ele verifica se o código inserido corresponde ao armazenado no objeto de contexto. Se for válido, exibe a página de redefinição de senha. Por outro lado, ele mostra um alerta solicitando que o usuário tente novamente ou reenvie o OTP.

Você pode verificar o código neste repositório que implementa uma função para reenviar OTPs e um temporizador de expiração para o código OTP.

Por fim, renderize os elementos JSX de entrada.

retornar (


Verificação de e-mail</h3>




Enviamos um código de verificação para o seu e-mail.</p>




"texto" value={OTPinput} onChange={(e) => { setOTPinput (e.target.value) }} />

Crie o componente de redefinição de senha

Crie um novo componentes/Reset.js arquivo e adicione este código:

importar Reagir, {useState, useContext} de"reagir";
importar { Contexto de Recuperação } de"../Aplicativo";
importar axios de"axios";
importar"./global.component.css";
exportarpadrãofunçãoReiniciar() {
const [senha, setPassword] = useState("");
const { setPage, email } = useContext (RecoveryContext);


funçãoalterar a senha() {
se (senha) {
tentar {
 axios.put(" http://localhost: 5000/atualizar-senha", {
 e-mail: e-mail,
 newPassword: senha,
 }).então(() => setPage("Conecte-se"));


retornar alerta("Senha alterada com sucesso, faça o login!");
 } pegar (erro) {console.log (erro);}}
retornar alerta("Por favor, digite sua nova senha");
 }
retornar (


 Alterar senha </h2>






 Nova Senha: 
 tipo="senha"
 espaço reservado ="..."
 obrigatório=""
 valor={senha}
 onChange={(e) => setPassword (e.target.value)} />

Esse código renderiza um formulário que permite aos usuários inserir uma nova senha. Quando o usuário clicar em enviar, ele enviará uma solicitação ao servidor para atualizar sua senha no banco de dados. Ele atualizará a interface do usuário se a solicitação for bem-sucedida.

Atualize seu componente App.js

Faça as alterações abaixo em seu arquivo src/App.js:

importar { useState, crieContext } de"reagir";
importar Conecte-se de"./componentes/Login";
importar OTPInput de"./componentes/OTPInput";
importar Reiniciar de"./componentes/Reiniciar";
importar"./App.css";
exportarconst RecoveryContext = criarContext();
exportarpadrãofunçãoAplicativo() {
const [página, setPage] = useState("Conecte-se");
const [email, setEmail] = useState("");
const [otp, setOTP] = useState("");


funçãoNavigateComponents() {
se (página "Conecte-se") retornar<Conecte-se />;
se (página "otp") retornar<OTPInput />;
se (página "reiniciar") retornar<Reiniciar />;
 }
retornar (
"Cabeçalho do aplicativo"> 
 value={{ page, setPage, otp, setOTP, email, setEmail }}>



 </div>
 </RecoveryContext.Provider>
 </div>
 );
}

Esse código define um objeto de contexto que gerencia o estado do aplicativo, que inclui o e-mail do usuário, o código OTP e as várias páginas do aplicativo. Essencialmente, o objeto de contexto torna possível passar os estados necessários entre diferentes componentes - uma alternativa ao uso de props.

Ele também inclui uma função que lida com a navegação na página com facilidade, sem a necessidade de renderizar componentes inteiros novamente.

Configurar um servidor Express.js

Com a configuração do cliente, configure um serviço de autenticação de back-end para lidar com a funcionalidade de redefinição de senha.

Para começar, criar um servidor web Expresse instale estes pacotes:

npm install cors dotenv nodemailer mongoose

Próximo, criar um banco de dados MongoDB ou configurar um cluster MongoDB na nuvem. Em seguida, copie a string de conexão fornecida, crie um arquivo ENV no diretório raiz e cole a string de conexão.

Para finalizar, você precisa configurar a conexão com o banco de dados e definir os modelos de dados para seus dados de usuário. Use o código neste repositório para configurar a conexão com o banco de dados e definir os modelos de dados.

Definir as rotas da API

Idealmente, um serviço de back-end tem várias rotas que lidam com as solicitações HTTP dos clientes. Nesse caso, você precisará definir três rotas que gerenciarão as solicitações de API de envio de e-mail, verificação de e-mail e atualização de senha do cliente React.

Crie um novo arquivo chamado userRoutes.js no diretório raiz e adicione o seguinte código:

const expresso = exigir('expressar');
const roteador = expresso. Roteador();
const userControllers = exigir('../controllers/userControllers');
router.get('/verificar email', userControllers.checkEmail);
roteador.put('/Atualizar senha', userControllers.updatePassword);
roteador.post('/enviar email', userControllers.sendEmail);
módulo.exports = roteador;

Controladores para as rotas da API

Os controladores são responsáveis ​​por processar as solicitações HTTP dos clientes. Assim que um cliente faz uma solicitação para uma determinada rota de API, uma função do controlador é invocada e executada para processar a solicitação e retornar uma resposta apropriada.

Crie um novo controllers/userControllers.js arquivo e adicione o código abaixo.

Use o código neste repositório para definir controladores para a verificação de e-mail e atualização de senha Rotas da API.

Comece definindo o controlador de envio de e-mail:

exports.sendEmail = (req, res) => {
const transportador = nodemailer.createTransport({
 serviço: 'gmail',
 seguro: verdadeiro,
 autenticação: {
 usuário: process.env. MEU EMAIL,
 passagem: process.env. APP_SENHA,
 },
 });
const { destinatário_email, OTP } = req.body;


const mailOptions = {
de: processo.env. MEU EMAIL,
 para: destinatário_email,
 assunto: 'REDEFINIÇÃO DE SENHA',
 html: `


Recuperação de senha</h2>




Usar esse OTP para redefinir sua senha. OTP é válido para1 minuto</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (erro, info) => {
se (erro) {
console.log (erro);
 res.status(500).enviar({ mensagem: "Ocorreu um erro ao enviar o e-mail" });
 } outro {
console.registro('E-mail enviado:' + info.resposta);
 res.status(200).enviar({ mensagem: "E-mail enviado com sucesso" });
 }
 });
};

Este código define uma função que usa o Nodemailer para enviar um e-mail com um OTP redefinido para um destinatário especificado. Ele configura um transportador usando sua própria conta e senha do Gmail.

Para obter a senha do aplicativo Gmail, você precisa gere uma senha de aplicativo nas configurações da sua conta do Google. Você usará essa senha no lugar da sua senha regular do Gmail para autenticar o Nodemailer.

Configurar o ponto de entrada do servidor

Crie um arquivo server.js no diretório raiz e adicione este código:

const expresso = exigir('expressar');
const cors = exigir('cors');
const aplicativo = expresso();
const porta = 5000;
exigir('dotenv').config();
const nodemailer = exigir('nodemailer');
const conectarDB = exigir('./utils/dbconfig');
conectarDB();
app.use (express.json());
app.use (express.urlencoded({ estendido: verdadeiro }));
app.use (cors());
const userRoutes = exigir('./routes/userRoutes');
app.use('/', userRoutes);
app.listen (porta, () => {
console.registro(`Servidor está escutando em http://localhost:${porta}`);
});

Com o cliente e o servidor configurados, você pode executar os servidores de desenvolvimento para testar a funcionalidade da senha.

Construindo um serviço personalizado de redefinição de senha

Criar um sistema de redefinição de senha adaptando-o ao seu aplicativo e seus usuários é a melhor abordagem, mesmo que existam soluções pré-criadas pagas. Ao projetar esse recurso, você deve levar em consideração a experiência do usuário e a segurança, pois os ataques são uma ameaça constante.