Не оставляйте посетителей вашего сайта без работы — позвольте им сбросить свой пароль, если они его забыли.

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

По мере увеличения количества онлайн-сервисов люди создают учетные записи, и для каждой учетной записи требуются уникальные учетные данные для входа. Однако это позволяет легко забыть или перепутать учетные данные для входа. Чтобы решить эту проблему, ваше приложение должно реализовать функцию сброса пароля, которая позволяет пользователю сбрасывать свой пароль удобно и безопасно.

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

Рабочий процесс сброса пароля можно реализовать различными способами — универсального стандарта, которому должно следовать каждое приложение, не существует. Вместо этого вы должны адаптировать подход, который вы выбираете, для удовлетворения конкретных потребностей вашего приложения.

instagram viewer

Рабочий процесс, о котором вы узнаете здесь, включает следующие шаги:

Для начала, быстро загрузить проект React. Далее установите Axios, библиотека HTTP-запросов JavaScript.

npm установить аксиомы

Вы можете найти код проекта в этом Репозиторий GitHub.

Создайте компонент входа

В каталоге src создайте новый компоненты/Login.js файл и добавьте следующий код. Начните с определения процесса сброса пароля:

Импортировать аксиомы от"аксиос";
Импортировать Реагировать, {useState} от"реагировать";
Импортировать {использоватьконтекст} от"реагировать";
Импортировать {Контекст восстановления} от"../Приложение";
Импортировать"./global.component.css";
экспортпо умолчаниюфункцияАвторизоваться() {
константа {setPage, setOTP, setEmail} = useContext (RecoveryContext);
константа [userEmail, setUserEmail] = useState(""); 


функцияотправитьотп() {
если (электронная почта пользователя) {
 аксиос.получить(` http://localhost: 5000/check_email? электронная почта =${пользовательская электронная почта}`).затем((ответ) => {
если (ответ.статус 200) {
константа ОТП = Математика.пол(Математика.случайный() * 9000 + 1000);
консоль.log (OTP);
 установитьOTP(OTP);
 setEmail (пользовательская электронная почта);
 аксиос.пост(" http://localhost: 5000/отправить_почту", {
 ОТП,
 получатель_электронная почта: электронная почта пользователя,
 })
 .затем(() => установить страницу ("отп"))
 .ловить(консоль.бревно);
 } еще {
 тревога("Пользователь с таким email не существует!");
консоль.log(ответ.данные.сообщение);
 }}).ловить(консоль.бревно);
 } еще {
 тревога("Пожалуйста, введите свой адрес электронной почты");
 }}

Этот код создает функцию, которая отправляет одноразовый пароль (OTP) на адрес электронной почты пользователя. Сначала он проверяет пользователя, проверяя его электронную почту в базе данных, прежде чем генерировать и отправлять OTP. Наконец, он обновляет пользовательский интерфейс со страницей OTP.

Завершите компонент входа в систему, добавив код для отображения элемента формы входа JSX:

возвращаться (


Войти</h2>







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


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

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

Чтобы убедиться в действительности кода, введенного пользователем, вам необходимо сравнить его с кодом, отправленным на его электронную почту.

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

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

Код создает компонент React, в котором пользователи проверяют свой OTP-код. Он проверяет соответствие введенного кода коду, хранящемуся в объекте контекста. Если он действителен, он отображает страницу сброса пароля. И наоборот, он показывает предупреждение, предлагающее пользователю повторить попытку или повторно отправить одноразовый пароль.

Вы можете проверить код в этом хранилище который реализует функцию повторной отправки OTP и таймер истечения срока действия кода OTP.

Наконец, визуализируйте входные элементы JSX.

возвращаться (


Подтверждение электронной почты</h3>




Мы отправили код подтверждения на вашу электронную почту.</p>




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

Создайте компонент сброса пароля

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

Импортировать Реагировать, {useState, useContext} от"реагировать";
Импортировать {Контекст восстановления} от"../Приложение";
Импортировать аксиомы от"аксиос";
Импортировать"./global.component.css";
экспортпо умолчаниюфункцияПерезагрузить() {
константа [пароль, setPassword] = useState("");
константа { setPage, электронная почта } = useContext (RecoveryContext);


функцияизменить пароль() {
если (пароль) {
пытаться {
 аксиос.пут(" http://localhost: 5000/обновить-пароль", {
 электронная почта: электронная почта,
 новый пароль: пароль,
 }).затем(() => установить страницу ("авторизоваться"));


возвращаться тревога("Пароль успешно изменен, пожалуйста, авторизуйтесь!");
 } ловить (ошибка) {консоль.log (ошибка);}}
возвращаться тревога("Пожалуйста, введите новый пароль");
 }
возвращаться (


 Изменить пароль </h2>






 Новый пароль: 
 тип="пароль"
 заполнитель ="..."
 требуется =""
 значение = {пароль}
 onChange={(e) => setPassword (e.target.value)} />

Этот код отображает форму, которая позволяет пользователям вводить новый пароль. Когда пользователь нажимает кнопку «Отправить», он отправляет запрос на сервер для обновления своего пароля в базе данных. Затем он обновит пользовательский интерфейс, если запрос будет успешным.

Обновите свой компонент App.js

Внесите следующие изменения в файл src/App.js:

Импортировать { useState, createContext } от"реагировать";
Импортировать Авторизоваться от"./компоненты/Вход";
Импортировать OTPInput от"./компоненты/OTPInput";
Импортировать Перезагрузить от"./компоненты/Сброс";
Импортировать"./Приложение.css";
экспортконстанта RecoveryContext = createContext();
экспортпо умолчаниюфункцияПриложение() {
константа [страница, setPage] = useState("авторизоваться");
константа [электронная почта, setEmail] = useState("");
константа [otp, setOTP] = useState("");


функцияНавигацияКомпоненты() {
если (страница "авторизоваться") возвращаться<Авторизоваться />;
если (страница "отп") возвращаться<OTPInput />;
если (страница "перезагрузить") возвращаться<Перезагрузить />;
 }
возвращаться (
"Заголовок приложения"> 
 value={{ страница, setPage, otp, setOTP, электронная почта, setEmail }}>



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

Этот код определяет объект контекста, который управляет состоянием приложения, в том числе электронной почтой пользователя, кодом одноразового пароля и различными страницами в приложении. По сути, объект контекста позволяет передавать требуемые состояния между различными компонентами — альтернатива использованию свойств.

Он также включает функцию, которая легко обрабатывает навигацию по страницам без необходимости повторного рендеринга целых компонентов.

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

При настройке клиента настройте серверную службу проверки подлинности для обработки функции сброса пароля.

Для начала, создать веб-сервер Expressи установите эти пакеты:

npm установить cors dotenv nodemailer mongoose

Следующий, создать базу данных MongoDB или настроить кластер MongoDB в облаке. Затем скопируйте предоставленную строку подключения, создайте файл ENV в корневом каталоге и вставьте строку подключения.

Чтобы закончить, вам нужно настроить подключение к базе данных и определить модели данных для ваших пользовательских данных. Используйте код в этом репозитории, чтобы настроить соединение с базой данных и определить модели данных.

Определите маршруты API

В идеале серверная служба имеет несколько маршрутов, обрабатывающих HTTP-запросы клиентов. В этом случае вам нужно будет определить три маршрута, которые будут управлять запросами API отправки электронной почты, проверки электронной почты и обновления пароля от клиента React.

Создайте новый файл с именем userRoutes.js в корневом каталоге и добавьте следующий код:

константа экспресс = требовать('выражать');
константа роутер = экспресс. Маршрутизатор();
константа пользовательские контроллеры = требовать('../контроллеры/пользовательконтроллеры');
роутер.получить('/Проверь электронную почту', userControllers.checkEmail);
роутер.пут('/обновить-пароль', userControllers.updatePassword);
роутер.пост('/send_email', userControllers.sendEmail);
модуль.экспорт = маршрутизатор;

Контроллеры для маршрутов API

Контроллеры отвечают за обработку HTTP-запросов клиентов. Как только клиент делает запрос к определенному маршруту API, вызывается и выполняется функция контроллера для обработки запроса и возврата соответствующего ответа.

Создать новый контроллеры/userControllers.js файл и добавьте код ниже.

Используйте код в этом репозитории, чтобы определить контроллеры для проверки электронной почты и обновления пароля Маршруты API.

Начните с определения контроллера отправки электронной почты:

exports.sendEmail = (запрос, разрешение) => {
константа транспортер = nodemailer.createTransport({
 услуга: 'gmail',
 безопасный: истинный,
 авторизация: {
 пользователь: process.env. МОЯ ЭЛЕКТРОННАЯ ПОЧТА,
 пройти: процесс.env. ПРИЛОЖЕНИЕ_ПАРОЛЬ,
 },
 });
константа {receiver_email, OTP} = req.body;


константа mailOptions = {
от: процесс.env. МОЯ ЭЛЕКТРОННАЯ ПОЧТА,
 кому: получатель_email,
 предмет: 'ВОССТАНОВЛЕНИЕ ПАРОЛЯ',
 HTML: `


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




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


${OTP}</h3>
 </body>
 </html>`,
 };
 транспортер.sendMail (mailOptions, (ошибка, информация) => {
если (ошибка) {
консоль.лог (ошибка);
 рез.статус(500).отправлять({ сообщение: "Произошла ошибка при отправке письма" });
 } еще {
консоль.бревно('Письмо отправлено: ' + инф.ответ);
 рез.статус(200).отправлять({ сообщение: "Письмо успешно отправлено" });
 }
 });
};

Этот код определяет функцию, которая использует Nodemailer для отправки электронного письма со сбросом OTP указанному получателю. Он устанавливает транспортер, используя вашу собственную учетную запись Gmail и пароль.

Чтобы получить пароль приложения Gmail, вам необходимо сгенерируйте пароль приложения в настройках вашего аккаунта Google. Затем вы будете использовать этот пароль вместо обычного пароля Gmail для аутентификации Nodemailer.

Настройка точки входа на сервер

Создайте файл server.js в корневом каталоге и добавьте этот код:

константа экспресс = требовать('выражать');
константа кор = требовать(корс);
константа приложение = экспресс();
константа порт = 5000;
требовать('дотенв').конфиг();
константа нодмайлер = требовать('nodemailer');
константа подключить БД = требовать('./utils/dbconfig');
подключить БД();
app.use(express.json());
app.use (express.urlencoded({ расширенный: истинный }));
app.use(cors());
константа пользовательские маршруты = требовать('./маршруты/userRoutes');
приложение.использовать('/', пользовательские маршруты);
app.listen (порт, () => {
консоль.бревно(`Сервер прослушивает http://localhost:${порт}`);
});

Настроив и клиент, и сервер, вы можете запустить серверы разработки для проверки функциональности пароля.

Создание собственной службы сброса пароля

Создание системы сброса пароля путем адаптации ее к вашему приложению и его пользователям — лучший подход, даже несмотря на то, что существуют платные готовые решения. При разработке этой функции вы должны учитывать как пользовательский опыт, так и безопасность, поскольку атаки представляют собой постоянную угрозу.