Не оставяйте посетителите на вашия сайт да висят – оставете ги да нулират паролата си, ако са я забравили.

Системите за удостоверяване играят решаваща роля в осигуряването на безпроблемно и сигурно потребителско изживяване. Работният процес за удостоверяване обикновено включва два процеса: регистрация и влизане.

Тъй като броят на онлайн услугите се увеличава, хората създават акаунти и всеки акаунт изисква уникални идентификационни данни за вход. Това обаче улеснява забравянето или объркването на идентификационните данни за вход. За да се справи с това, вашето приложение трябва да внедри функция за нулиране на парола, която позволява на потребителя да нулира паролата си удобно и сигурно.

Настройте проекта React

Можете да приложите работен процес за нулиране на парола по различни начини – няма универсален стандарт, който всяко приложение трябва да следва. Вместо това трябва да приспособите подхода, който изберете, за да отговаря на специфичните нужди на вашето приложение.

Работният процес, за който ще научите тук, включва следните стъпки:

instagram viewer

За да започнете, бързо стартиране на React проект. След това инсталирайте Axios, JavaScript библиотека за HTTP заявки.

npm инсталирайте axios

Можете да намерите кода на проекта тук GitHub хранилище.

Създайте компонент за влизане

В директорията src създайте нова компоненти/Login.js файл и добавете следния код. Започнете с дефиниране на процеса за нулиране на паролата:

импортиране аксиос от"аксиос";
импортиране Реагирайте, {useState} от"реагира";
импортиране { useContext } от"реагира";
импортиране {RecoveryContext} от„../Приложение“;
импортиране"./global.component.css";
износпо подразбиранефункцияВлизам() {
конст { setPage, setOTP, setEmail } = useContext (RecoveryContext);
конст [userEmail, setUserEmail] = useState(""); 


функцияsendOtp() {
ако (потребителски имейл) {
 axios.get(` http://localhost: 5000/check_email? имейл=${userEmail}`).тогава((отговор) => {
ако (отговор.състояние 200) {
конст OTP = математика.floor(математика.random() * 9000 + 1000);
конзола.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/изпрати имейл", {
 OTP,
 имейл_получател: потребителски имейл,
 })
 .тогава(() => setPage("otp"))
 .catch(конзола.log);
 } друго {
 тревога(„Потребител с този имейл не съществува!“);
конзола.log (response.data.message);
 }}).catch(конзола.log);
 } друго {
 тревога(„Моля, въведете вашия имейл“);
 }}

Този код създава функция, която изпраща еднократна парола (OTP) до имейл адреса на потребителя. Първо проверява потребителя, като проверява неговия имейл в базата данни, преди да генерира и изпрати OTP. Накрая актуализира потребителския интерфейс с OTP страницата.

Завършете компонента за влизане, като добавите код за изобразяване на елемента на JSX формуляр за влизане:

връщане (


Вход</h2>







 Електронна поща: 
"електронна поща" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />


 Парола:
"парола" />

Създайте компонент за проверка на OTP

За да се уверите в валидността на код, въведен от потребител, трябва да го сравните с кода, изпратен на неговия имейл.

Създайте нов компоненти/OTPInput.js файл и добавете този код:

импортиране Реагирайте, { useState, useContext, useEffect } от"реагира";
импортиране {RecoveryContext} от„../Приложение“;
импортиране аксиос от"аксиос";
импортиране"./global.component.css";
износпо подразбиранефункцияOTPInput() {
конст { email, otp, setPage } = useContext (RecoveryContext);
конст [OTPinput, setOTPinput] = useState( "");
функцияпотвърдете OTP() {
ако (parseInt(OTPinput) otp) {
 setPage("нулиране");
 } друго {
 тревога(„Кодът, който сте въвели, не е правилен, опитайте отново, изпратете отново връзката“);
 }
 }

Кодът създава React компонент, където потребителите проверяват своя OTP код. Той проверява дали въведеният код съвпада с този, съхранен в контекстния обект. Ако е валиден, той показва страницата за повторно задаване на парола. Обратно, той показва предупреждение, подканващо потребителя да опита отново или да изпрати повторно OTP.

Можете да проверите кода в това хранилище който изпълнява функция за повторно изпращане на OTP и таймер за изтичане на OTP кода.

Накрая изобразете входните JSX елементи.

връщане (


Проверка на имейл</h3>




Изпратихме код за потвърждение на вашия имейл.</p>




"текст" стойност={OTPinput} onChange={(e) => { setOTPinput (e.target.value) }} />

Създайте компонента за нулиране на парола

Създайте нов компоненти/Reset.js файл и добавете този код:

импортиране Реагирайте, {useState, useContext} от"реагира";
импортиране {RecoveryContext} от„../Приложение“;
импортиране аксиос от"аксиос";
импортиране"./global.component.css";
износпо подразбиранефункцияНулиране() {
конст [парола, setPassword] = useState("");
конст {setPage, имейл} = useContext (RecoveryContext);


функцияпромяна на паролата() {
ако (парола) {
опитвам {
 axios.put(" http://localhost: 5000/актуализация-парола", {
 имейл: имейл,
 нова парола: парола,
 }).тогава(() => setPage("Влизам"));


връщане тревога(„Паролата е променена успешно, моля влезте!“);
 } улов (грешка) {конзола.log (грешка);}}
връщане тревога(„Моля, въведете новата си парола“);
 }
връщане (


 Промяна на паролата </h2>






 Нова парола: 
 тип="парола"
 заместител ="..."
 задължително=""
 стойност={парола}
 onChange={(e) => setPassword (e.target.value)} />

Този код изобразява формуляр, който позволява на потребителите да въвеждат нова парола. Когато потребителят щракне върху изпращане, той ще изпрати заявка до сървъра за актуализиране на паролата му в базата данни. След това ще актуализира потребителския интерфейс, ако заявката е успешна.

Актуализирайте вашия App.js компонент

Направете промените по-долу във вашия файл src/App.js:

импортиране {useState, createContext} от"реагира";
импортиране Влизам от"./components/Login";
импортиране OTPInput от"./components/OTPInput";
импортиране Нулиране от"./components/Reset";
импортиране"./App.css";
износконст RecoveryContext = createContext();
износпо подразбиранефункцияПриложение() {
конст [страница, setPage] = useState("Влизам");
конст [имейл, setEmail] = useState("");
конст [otp, setOTP] = useState("");


функцияNavigateComponents() {
ако (страница "Влизам") връщане<Влизам />;
ако (страница "otp") връщане<OTPInput />;
ако (страница "нулиране") връщане<Нулиране />;
 }
връщане (
„Заглавка на приложението“> 
 стойност={{ страница, setPage, otp, setOTP, имейл, setEmail }}>



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

Този код дефинира контекстен обект, който управлява състоянието на приложението, което включва имейла на потребителя, OTP кода и различните страници в приложението. По същество контекстният обект прави възможно предаването на необходимите състояния между различни компоненти - алтернатива на използването на реквизити.

Той също така включва функция, която се справя с навигацията по страницата с лекота, без да е необходимо повторно изобразяване на цели компоненти.

Настройте Express.js сървър

С настройката на клиента конфигурирайте услуга за удостоверяване на бекенда, за да управлява функцията за нулиране на парола.

За да започнете, създайте експресен уеб сървъри инсталирайте тези пакети:

npm инсталирайте cors dotenv nodemailer mongoose

Следващия, създайте база данни MongoDB или конфигурирайте MongoDB клъстер в облака. След това копирайте предоставения низ за връзка, създайте ENV файл в главната директория и поставете низа за връзка.

За да завършите, трябва да конфигурирате връзката с базата данни и да дефинирате моделите на данни за вашите потребителски данни. Използвайте кода в това хранилище, за да настройте връзката с базата данни и дефинирайте моделите на данни.

Дефинирайте API маршрутите

Бекенд услугата в идеалния случай има няколко маршрута, които обработват HTTP заявките на клиентите. В този случай ще трябва да дефинирате три маршрута, които ще управляват заявките за API за изпращане на имейл, потвърждение на имейл и актуализиране на парола от React клиента.

Създайте нов файл, наречен userRoutes.js в основната директория и добавете следния код:

конст експрес = изискват("експресен");
конст рутер = експрес. Рутер();
конст потребителски контролери = изискват('../controllers/userControllers');
router.get('/check_email', userControllers.checkEmail);
router.put('/актуализация-парола', userControllers.updatePassword);
router.post('/Изпратете имейл', userControllers.sendEmail);
модул.exports = рутер;

Контролери за API маршрутите

Контролерите са отговорни за обработката на HTTP заявките на клиентите. След като клиент направи заявка към конкретен API маршрут, се извиква и изпълнява функция на контролер, за да обработи заявката и да върне подходящ отговор.

Създайте нов контролери/userControllers.js файл и добавете кода по-долу.

Използвайте кода в това хранилище, за да дефинирайте контролери за потвърждение на имейл и парола за актуализиране API маршрути.

Започнете с дефиниране на контролера за изпращане на имейл:

exports.sendEmail = (req, res) => {
конст транспортер = nodemailer.createTransport({
 обслужване: "gmail",
 сигурно: вярно,
 удостоверяване: {
 потребител: process.env. MY_EMAIL,
 пропуск: process.env. APP_PASSWORD,
 },
 });
конст { имейл_получател, OTP } = req.body;


конст mailOptions = {
от: process.env. MY_EMAIL,
 до: имейл_получател,
 предмет: „НУЛИРАНЕ НА ПАРОЛА“,
 html: `


Възстановяване на парола</h2>




Използвайте това OTP, за да нулирате паролата си. OTP е валиден за1 минута</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (грешка, информация) => {
ако (грешка) {
конзола.log (грешка);
 res.status(500).изпрати({ съобщение: „Възникна грешка при изпращане на имейла“ });
 } друго {
конзола.log('Имейлът е изпратен: ' + информация.отговор);
 res.status(200).изпрати({ съобщение: „Имейлът е изпратен успешно“ });
 }
 });
};

Този код дефинира функция, която използва Nodemailer за изпращане на имейл с нулиране на OTP до определен получател. Той настройва транспортер, използвайки вашия собствен Gmail акаунт и парола.

За да получите паролата си за приложението Gmail, трябва генерирайте парола за приложение в настройките на вашия акаунт в Google. След това ще използвате тази парола вместо обичайната си парола за Gmail за удостоверяване на Nodemailer.

Конфигурирайте входната точка на сървъра

Създайте файл server.js в основната директория и добавете този код:

конст експрес = изискват("експресен");
конст корс = изискват("корс");
конст приложение = експрес();
конст порт = 5000;
изискват('dotenv').config();
конст nodemailer = изискват("nodemailer");
конст connectDB = изискват('./utils/dbconfig');
свържетеDB();
app.use (express.json());
app.use (express.urlencoded({ удължен: вярно }));
app.use (cors());
конст userRoutes = изискват('./routes/userRoutes');
app.use('/', userRoutes);
app.listen (порт, () => {
конзола.log(`Сървърът слуша http://localhost:${порт}`);
});

С настройка на клиента и сървъра можете да стартирате сървърите за разработка, за да тествате функционалността на паролата.

Изграждане на персонализирана услуга за повторно задаване на парола

Създаването на система за повторно задаване на парола чрез адаптирането й към вашето приложение и неговите потребители е най-добрият подход, въпреки че съществуват платени, предварително изградени решения. Докато проектирате тази функция, трябва да вземете предвид както потребителското изживяване, така и сигурността, тъй като атаките са постоянна заплаха.