Cara Menangani Alur Kerja Lupa dan Reset Kata Sandi Menggunakan React dan Node.js
Table of content:
Sistem autentikasi memainkan peran penting dalam memberikan pengalaman pengguna yang lancar dan aman. Alur kerja autentikasi biasanya melibatkan dua proses: pendaftaran dan masuk.
Seiring bertambahnya jumlah layanan online, orang membuat akun, dan setiap akun memerlukan kredensial masuk yang unik. Namun, ini membuatnya mudah untuk melupakan atau membingungkan kredensial login. Untuk mengatasinya, aplikasi Anda harus mengimplementasikan fitur setel ulang sandi yang memungkinkan pengguna menyetel ulang sandi dengan nyaman dan aman.
Siapkan Proyek Bereaksi
Anda dapat menerapkan alur kerja pengaturan ulang kata sandi dengan berbagai cara—tidak ada standar universal yang harus diikuti oleh setiap aplikasi. Sebaliknya, Anda harus menyesuaikan pendekatan yang Anda pilih untuk memenuhi kebutuhan spesifik aplikasi Anda.
Baca Juga:
Alur kerja yang akan Anda pelajari di sini mencakup langkah-langkah berikut:
Untuk memulai, bootstrap proyek React dengan cepat. Selanjutnya, instal Axios, pustaka permintaan HTTP JavaScript.
npm install axios Buat Komponen Login
Di direktori src, buat yang baru komponen/Login.js file dan tambahkan kode berikut. Mulailah dengan menentukan proses pengaturan ulang kata sandi:
import axios from "axios";
import React, { useState } from "react";
import { useContext } from "react";
import { RecoveryContext } from "../App";
import "./global.component.css";export default function Login() {
const { setPage, setOTP, setEmail } = useContext(RecoveryContext);
const [userEmail, setUserEmail] = useState("");
function sendOtp() {
if (userEmail) {
axios.get(`http://localhost:5000/check_email?email=${userEmail}`).then((response) => {
if (response.status === 200) {
const OTP = Math.floor(Math.random() * 9000 + 1000);
console.log(OTP);
setOTP(OTP);
setEmail(userEmail);
axios.post("http://localhost:5000/send_email", {
OTP,
recipient_email: userEmail,
})
.then(() => setPage("otp"))
.catch(console.log);
} else {
alert("User with this email does not exist!");
console.log(response.data.message);
}}).catch(console.log);
} else {
alert("Please enter your email");
}}
Kode ini membuat fungsi yang mengirimkan One-Time Password (OTP) ke alamat email pengguna. Ini pertama-tama memverifikasi pengguna dengan memeriksa email mereka di database sebelum membuat dan mengirim OTP. Terakhir, memperbarui UI dengan halaman OTP.
Lengkapi komponen login dengan menambahkan kode untuk merender elemen formulir login JSX:
return (
<div>
<h2>Login</h2> <form>
<label /> Email:
<input type="email" value={userEmail} onChange={(e) => { setUserEmail(e.target.value) }} />
<label /> Password:
<input type="password" />
<button type="submit">login</button>
</form>
<a href="#" onClick={() => sendOtp()}>
Forgot Password
</a>
</div>
);
}
Buat Komponen Verifikasi OTP
Untuk memastikan validitas kode yang dimasukkan oleh pengguna, Anda perlu membandingkannya dengan kode yang dikirimkan ke email mereka.
Buat yang baru komponen/OTPInput.js file dan tambahkan kode ini:
import React, { useState, useContext, useEffect } from "react";
import { RecoveryContext } from "../App";
import axios from "axios";
import "./global.component.css";export default function OTPInput() {
const { email, otp, setPage } = useContext(RecoveryContext);
const [OTPinput, setOTPinput] = useState( "");
function verifyOTP() {
if (parseInt(OTPinput) === otp) {
setPage("reset");
} else {
alert("The code you have entered is not correct, try again re-send the link");
}
}
Kode tersebut membuat komponen React tempat pengguna memverifikasi kode OTP mereka. Ini memeriksa apakah kode yang dimasukkan cocok dengan yang disimpan di objek konteks. Jika valid, ini akan menampilkan halaman reset kata sandi. Sebaliknya, ini menunjukkan peringatan yang meminta pengguna untuk mencoba lagi atau mengirim ulang OTP.
Anda dapat memeriksa kode di sini gudang yang mengimplementasikan fungsi untuk mengirim ulang OTP dan penghitung waktu kedaluwarsa untuk kode OTP.
Terakhir, render elemen input JSX.
return (
<div>
<h3>Email Verification</h3>
<p>We have sent a verification code to your email.</p>
<form>
<input type="text" value={OTPinput} onChange={(e) => { setOTPinput(e.target.value) }} />
<button onClick={() => verifyOTP()}>Verify Account</button>
<a onClick={() => resendOTP()} > Didn't receive code?
{disable ? `Resend OTP in ${timerCount}s` : " Resend OTP"}
</a>
</form>
</div>
);} Buat Komponen Atur Ulang Kata Sandi
Buat yang baru komponen/Reset.js file dan tambahkan kode ini:
import React, {useState, useContext} from "react";
import { RecoveryContext } from "../App";
import axios from "axios";
import "./global.component.css";export default function Reset() {
const [password, setPassword] = useState("");
const { setPage, email } = useContext(RecoveryContext);
function changePassword() {
if (password) {
try {
axios.put("http://localhost:5000/update-password", {
email:email,
newPassword: password,
}).then(() => setPage("login"));
return alert("Password changed successfully, please login!");
} catch (error) {console.log(error);}}
return alert("Please enter your new Password");
}
return (
<div>
<h2> Change Password </h2>
<form>
<label /> New Password:
<input
type="password"
placeholder="........"
required=""
value={password}
onChange={(e) => setPassword(e.target.value)} />
<button onClick={() => changePassword()}>Reset passwod </button>
</form>
</div>
);
}
Kode ini merender formulir yang memungkinkan pengguna memasukkan kata sandi baru. Ketika pengguna mengklik kirim, itu akan mengirim permintaan ke server untuk memperbarui kata sandi mereka di database. Ini kemudian akan memperbarui UI jika permintaan berhasil.
Perbarui Komponen App.js Anda
Lakukan perubahan di bawah pada file src/App.js Anda:
import { useState, createContext } from "react";
import Login from "./components/Login";
import OTPInput from "./components/OTPInput";
import Reset from "./components/Reset";
import "./App.css";
export const RecoveryContext = createContext();export default function App() {
const [page, setPage] = useState("login");
const [email, setEmail] = useState("");
const [otp, setOTP] = useState("");
function NavigateComponents() {
if (page === "login") return <Login />;
if (page === "otp") return <OTPInput />;
if (page === "reset") return <Reset />;
}
return (
<div className="App-header">
<RecoveryContext.Provider
value={{ page, setPage, otp, setOTP, email, setEmail }}>
<div>
<NavigateComponents />
</div>
</RecoveryContext.Provider>
</div>
);
}
Kode ini menentukan objek konteks yang mengelola status aplikasi, yang mencakup email pengguna, kode OTP, dan berbagai halaman di dalam aplikasi. Pada dasarnya, objek konteks memungkinkan untuk meneruskan status yang diperlukan di antara komponen yang berbeda—sebuah alternatif untuk menggunakan alat peraga.
Ini juga menyertakan fungsi yang menangani navigasi halaman dengan mudah tanpa perlu merender ulang seluruh komponen.
Menyiapkan Server Express.js
Dengan pengaturan klien, konfigurasikan layanan autentikasi backend untuk menangani fungsi pengaturan ulang kata sandi.
Untuk memulai, buat server web Express, dan instal paket berikut:
npm install cors dotenv nodemailer mongoose Selanjutnya, buat database MongoDB atau konfigurasikan cluster MongoDB di cloud. Kemudian salin string koneksi yang disediakan, buat file ENV di direktori root, dan rekatkan string koneksi.
Untuk menyelesaikannya, Anda perlu mengonfigurasi koneksi database dan menentukan model data untuk data pengguna Anda. Gunakan kode dalam repositori ini untuk mengatur koneksi database Dan menentukan model data.
Tentukan Rute API
Layanan backend idealnya memiliki beberapa rute yang menangani permintaan HTTP klien. Dalam hal ini, Anda harus menentukan tiga rute yang akan mengelola permintaan kirim-email, verifikasi email, dan update-password API dari klien React.
Buat file baru bernama userRoutes.js di direktori root dan tambahkan kode berikut:
const express = require('express');
const router = express.Router();
const userControllers = require('../controllers/userControllers');router.get('/check_email', userControllers.checkEmail);
router.put('/update-password', userControllers.updatePassword);
router.post('/send_email', userControllers.sendEmail);
module.exports = router;
Pengontrol untuk Rute API
Pengontrol bertanggung jawab untuk memproses permintaan HTTP klien. Sekali, klien membuat permintaan ke rute API tertentu, fungsi pengontrol dipanggil dan dieksekusi untuk memproses permintaan dan mengembalikan respons yang sesuai.
Buat yang baru controllers/userControllers.js file dan tambahkan kode di bawah ini.
Gunakan kode dalam repositori ini untuk tentukan pengontrol untuk verifikasi email dan perbarui kata sandi rute API.
Mulailah dengan menentukan pengontrol kirim email:
exports.sendEmail = (req, res) => {
const transporter = nodemailer.createTransport({
service: 'gmail',
secure: true,
auth: {
user: process.env.MY_EMAIL,
pass: process.env.APP_PASSWORD,
},
}); const { recipient_email, OTP } = req.body;
const mailOptions = {
from: process.env.MY_EMAIL,
to: recipient_email,
subject: 'PASSWORD RESET',
html: `<html>
<body>
<h2>Password Recovery</h2>
<p>Use this OTP to reset your password. OTP is valid for 1 minute</p>
<h3>${OTP}</h3>
</body>
</html>`,
};
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
console.log(error);
res.status(500).send({ message: "An error occurred while sending the email" });
} else {
console.log('Email sent: ' + info.response);
res.status(200).send({ message: "Email sent successfully" });
}
});
};
Kode ini mendefinisikan fungsi yang menggunakan Nodemailer untuk mengirim email dengan pengaturan ulang OTP ke penerima yang ditentukan. Ini mengatur transporter menggunakan akun dan kata sandi Gmail Anda sendiri.
Untuk mendapatkan kata sandi aplikasi Gmail, Anda harus melakukannya buat kata sandi aplikasi di pengaturan akun Google Anda. Anda kemudian akan menggunakan kata sandi ini sebagai pengganti kata sandi Gmail biasa Anda untuk mengautentikasi Nodemailer.
Konfigurasi Titik Masuk Server
Buat file server.js di direktori root dan tambahkan kode ini:
const express = require('express');
const cors = require('cors');
const app = express();
const port = 5000;
require('dotenv').config();
const nodemailer = require('nodemailer');
const connectDB = require('./utils/dbconfig');
connectDB();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());
const userRoutes = require('./routes/userRoutes');
app.use("https://www.makeuseof.com/", userRoutes);app.listen(port, () => {
console.log(`Server is listening at http://localhost:${port}`);
});
Dengan pengaturan klien dan server, Anda dapat menjalankan server pengembangan untuk menguji fungsionalitas kata sandi.
Membangun Layanan Reset Kata Sandi Kustom
Membuat sistem pengaturan ulang kata sandi dengan menyesuaikannya dengan aplikasi Anda dan penggunanya adalah pendekatan terbaik, meskipun ada solusi pra-bangun berbayar. Saat merancang fitur ini, Anda harus mempertimbangkan pengalaman pengguna dan keamanan, karena serangan merupakan ancaman yang terus-menerus.
Artikel Terkait
