Nie pozostawiaj odwiedzających witryny w zawieszeniu — pozwól im zresetować hasło, jeśli je zapomnieli.

Systemy uwierzytelniania odgrywają kluczową rolę w zapewnianiu płynnej i bezpiecznej obsługi użytkownika. Przepływ pracy uwierzytelniania zwykle obejmuje dwa procesy: rejestrację i logowanie.

Wraz ze wzrostem liczby usług online ludzie tworzą konta, a każde konto wymaga unikalnych danych logowania. Ułatwia to jednak zapomnienie lub pomylenie danych logowania. Aby temu zaradzić, Twoja aplikacja powinna zaimplementować funkcję resetowania hasła, która umożliwia użytkownikowi wygodne i bezpieczne resetowanie hasła.

Skonfiguruj projekt React

Przepływ pracy resetowania hasła można zaimplementować na różne sposoby — nie ma uniwersalnego standardu, którego powinna przestrzegać każda aplikacja. Zamiast tego należy dostosować wybrane podejście do konkretnych potrzeb aplikacji.

Przepływ pracy, o którym dowiesz się tutaj, obejmuje następujące kroki:

Rozpocząć, szybko załadować projekt React. Następnie zainstaluj Axios, biblioteka żądań HTTP JavaScript.

instagram viewer 
npm zainstaluj osie

Możesz znaleźć kod projektu w this Repozytorium GitHub.

Utwórz komponent logowania

W katalogu src utwórz nowy komponenty/Logowanie.js plik i dodaj następujący kod. Zacznij od zdefiniowania procesu resetowania hasła:

import osie z„osi”;
import Reaguj, { stan użycia } z"reagować";
import { useContext } z"reagować";
import { Kontekst odzyskiwania } z„../Aplikacja”;
import"./global.komponent.css";
eksportdomyślnyfunkcjonowaćZaloguj sie() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState(""); 


funkcjonowaćwyślijOtp() {
Jeśli (adres e-mail użytkownika) {
 axios.get(` http://localhost: 5000/check_email? email=${userEmail}`).Następnie((odpowiedź) => {
Jeśli (stan odpowiedzi 200) {
konst hasło jednorazowe = Matematyka.podłoga(Matematyka.losowy() * 9000 + 1000);
konsola.log (OTP);
 ustawOTP(OTP);
 setEmail (E-mail użytkownika);
 axios.post(" http://localhost: 5000/wyślij_email", {
 hasło jednorazowe,
 adres e-mail_odbiorcy: adres e-mail użytkownika,
 })
 .Następnie(() => ustaw stronę("otp"))
 .złapać(konsola.dziennik);
 } w przeciwnym razie {
 alarm(„Użytkownik z tym adresem e-mail nie istnieje!”);
konsola.log (odpowiedź.dane.wiadomość);
 }}).złapać(konsola.dziennik);
 } w przeciwnym razie {
 alarm("Proszę podać swój e-mail");
 }}

Ten kod tworzy funkcję, która wysyła hasło jednorazowe (OTP) na adres e-mail użytkownika. Najpierw weryfikuje użytkownika, sprawdzając jego adres e-mail w bazie danych przed wygenerowaniem i wysłaniem hasła jednorazowego. Na koniec aktualizuje interfejs użytkownika za pomocą strony OTP.

Uzupełnij komponent logowania, dodając kod renderujący element formularza logowania JSX:

powrót (


Zaloguj się</h2>







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


 Hasło:
"hasło" />

Utwórz komponent weryfikacji OTP

Aby upewnić się, że wprowadzony przez użytkownika kod jest ważny, należy porównać go z kodem przesłanym na jego adres e-mail.

Stwórz nowy komponenty/OTPInput.js plik i dodaj ten kod:

import Zareaguj, { useState, useContext, useEffect } z"reagować";
import { Kontekst odzyskiwania } z„../Aplikacja”;
import osie z„osi”;
import"./global.komponent.css";
eksportdomyślnyfunkcjonowaćWejście OTP() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
funkcjonowaćzweryfikujOTP() {
Jeśli (parseInt(OTPwejście) otp) {
 ustaw stronę("Resetowanie");
 } w przeciwnym razie {
 alarm("Kod, który wprowadziłeś jest nieprawidłowy, spróbuj ponownie, wyślij link ponownie");
 }
 }

Kod tworzy komponent React, w którym użytkownicy weryfikują swój kod OTP. Sprawdza, czy wprowadzony kod jest zgodny z kodem przechowywanym w obiekcie context. Jeśli jest prawidłowy, wyświetla stronę resetowania hasła. I odwrotnie, wyświetla alert z prośbą o ponowną próbę lub ponowne wysłanie hasła jednorazowego.

Możesz sprawdzić kod w tym magazyn który implementuje funkcję ponownego wysyłania OTP i licznik czasu wygaśnięcia kodu OTP.

Na koniec wyrenderuj wejściowe elementy JSX.

powrót (


Weryfikacja adresu e-mail</h3>




Wysłaliśmy kod weryfikacyjny na Twój adres e-mail.</p>




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

Utwórz komponent resetowania hasła

Stwórz nowy komponenty/Resetuj.js plik i dodaj ten kod:

import Reaguj, {useState, useContext} z"reagować";
import { Kontekst odzyskiwania } z„../Aplikacja”;
import osie z„osi”;
import"./global.komponent.css";
eksportdomyślnyfunkcjonowaćResetowanie() {
konst [hasło, ustawHasło] = useState("");
konst { setPage, email } = useContext (RecoveryContext);


funkcjonowaćZmień hasło() {
Jeśli (hasło) {
próbować {
 axios.put(" http://localhost: 5000/aktualizacja-hasło", {
 e-mail: e-mail,
 noweHasło: hasło,
 }).Następnie(() => ustaw stronę("Zaloguj sie"));


powrót alarm("Hasło zostało pomyślnie zmienione, zaloguj się!");
 } złapać (błąd) {konsola.log (błąd);}}
powrót alarm(„Proszę wprowadzić nowe hasło”);
 }
powrót (


 Zmień hasło </h2>






 Nowe hasło: 
 typ="hasło"
 symbol zastępczy="..."
 wymagane=""
 wartość={hasło}
 onChange={(e) => setPassword (e.target.value)} />

Ten kod renderuje formularz, który umożliwia użytkownikom wprowadzenie nowego hasła. Gdy użytkownik kliknie przycisk Prześlij, wyśle ​​do serwera żądanie aktualizacji hasła w bazie danych. Następnie zaktualizuje interfejs użytkownika, jeśli żądanie się powiedzie.

Zaktualizuj komponent App.js

Wprowadź poniższe zmiany w pliku src/App.js:

import { stan użycia, utwórz kontekst } z"reagować";
import Zaloguj sie z„./komponenty/Logowanie”;
import Wejście OTP z"./components/OTPInput";
import Resetowanie z„./komponenty/Resetuj”;
import"./Aplikacja.css";
eksportkonst Kontekst Odzyskiwania = Utwórz Kontekst();
eksportdomyślnyfunkcjonowaćAplikacja() {
konst [strona, setPage] = useState("Zaloguj sie");
konst [email, setEmail] = useState("");
konst [otp, setOTP] = useState("");


funkcjonowaćKomponenty nawigacji() {
Jeśli (strona "Zaloguj sie") powrót<Zaloguj sie />;
Jeśli (strona "otp") powrót<Wejście OTP />;
Jeśli (strona "Resetowanie") powrót<Resetowanie />;
 }
powrót (
„Nagłówek aplikacji”> 
 value={{ page, setPage, otp, setOTP, email, setEmail }}>



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

Ten kod definiuje obiekt kontekstu, który zarządza stanem aplikacji, który obejmuje wiadomość e-mail użytkownika, kod OTP i różne strony w aplikacji. Zasadniczo obiekt kontekstu umożliwia przekazywanie wymaganych stanów między różnymi komponentami — alternatywa dla używania rekwizytów.

Zawiera również funkcję, która z łatwością obsługuje nawigację po stronie bez konieczności ponownego renderowania całych komponentów.

Skonfiguruj serwer Express.js

Podczas konfiguracji klienta skonfiguruj usługę uwierzytelniania zaplecza do obsługi funkcji resetowania hasła.

Rozpocząć, utwórz serwer sieciowy Expressi zainstaluj te pakiety:

npm install cors dotenv nodemailer mangusta

Następny, utwórz bazę danych MongoDB Lub skonfiguruj klaster MongoDB w chmurze. Następnie skopiuj podane parametry połączenia, utwórz plik ENV w katalogu głównym i wklej parametry połączenia.

Aby zakończyć, musisz skonfigurować połączenie z bazą danych i zdefiniować modele danych dla danych użytkownika. Użyj kodu w tym repozytorium, aby skonfigurować połączenie z bazą danych I zdefiniuj modele danych.

Zdefiniuj trasy API

W idealnym przypadku usługa zaplecza ma kilka tras, które obsługują żądania HTTP klientów. W takim przypadku musisz zdefiniować trzy trasy, które będą zarządzać żądaniami API wysyłania wiadomości e-mail, weryfikacji wiadomości e-mail i aktualizowania hasła z klienta React.

Utwórz nowy plik o nazwie userRoutes.js w katalogu głównym i dodaj następujący kod:

konst ekspres = wymagać('wyrazić');
konst router = ekspres. router();
konst kontrolery użytkowników = wymagać(„../kontrolery/kontrolery użytkownika”);
router.get('/Sprawdź email', userControllers.checkEmail);
router.put('/Aktualizować hasło', userControllers.updatePassword);
router.post('/wysłać email', userControllers.sendEmail);
moduł.eksport = router;

Kontrolery dla tras API

Administratorzy są odpowiedzialni za przetwarzanie żądań HTTP klientów. Gdy klient wyśle ​​żądanie do określonej trasy API, funkcja kontrolera zostanie wywołana i wykonana w celu przetworzenia żądania i zwrócenia odpowiedniej odpowiedzi.

Stwórz nowy controllers/userControllers.js plik i dodaj poniższy kod.

Użyj kodu w tym repozytorium, aby zdefiniuj kontrolery do weryfikacji adresu e-mail i hasła aktualizacji trasy API.

Zacznij od zdefiniowania kontrolera wysyłania wiadomości e-mail:

exports.sendEmail = (żądanie, rez) => {
konst transporter = nodemailer.createTransport({
 praca: „Gmail”,
 bezpieczne: PRAWDA,
 autoryzacja: {
 użytkownik: proces.env. MÓJ E-MAIL,
 pass: proces.env. APP_HASŁO,
 },
 });
konst { e-mail_adresata, OTP } = req.body;


konst opcje poczty = {
z: proces.env. MÓJ E-MAIL,
 do: odbiorca_email,
 temat: 'RESETOWANIA HASŁA',
 html: `


Odzyskiwanie hasła</h2>




Używać Ten OTP, aby zresetować hasło. OTP jest ważny Do1 minuta</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (opcje poczty, (błąd, informacje) => {
Jeśli (błąd) {
konsola.log (błąd);
 res.status(500).wysłać({ wiadomość: "Wystąpił błąd podczas wysyłania wiadomości e-mail" });
 } w przeciwnym razie {
konsola.dziennik('E-mail wysłany: ' + informacja.odpowiedź);
 res.status(200).wysłać({ wiadomość: "E-mail wysłany pomyślnie" });
 }
 });
};

Ten kod definiuje funkcję, która używa Nodemailer do wysłania wiadomości e-mail z resetem OTP do określonego odbiorcy. Konfiguruje transporter przy użyciu własnego konta Gmail i hasła.

Aby uzyskać hasło do aplikacji Gmail, musisz to zrobić wygeneruj hasło do aplikacji w ustawieniach konta Google. Następnie użyjesz tego hasła zamiast zwykłego hasła do Gmaila do uwierzytelnienia Nodemailera.

Skonfiguruj punkt wejścia serwera

Utwórz plik server.js w katalogu głównym i dodaj ten kod:

konst ekspres = wymagać('wyrazić');
konst kors = wymagać(„kors”);
konst aplikacja = ekspres();
konst port = 5000;
wymagać('dotenv'.config();
konst nodemailer = wymagać(„Nodemailer”);
konst połączDB = wymagać(„./utils/dbconfig”);
połączDB();
app.use (express.json());
app.use (express.urlencoded({ rozszerzony: PRAWDA }));
app.use (cors());
konst trasy użytkownika = wymagać(„./trasy/trasy użytkownika”);
aplikacja.użyć('/', trasy użytkownika);
app.listen (port, () => {
konsola.dziennik(`Serwer nasłuchuje o godz http://localhost:${port}`);
});

Po skonfigurowaniu zarówno klienta, jak i serwera, można uruchomić serwery programistyczne, aby przetestować funkcjonalność hasła.

Tworzenie niestandardowej usługi resetowania hasła

Stworzenie systemu resetowania hasła poprzez dostosowanie go do Twojej aplikacji i jej użytkowników to najlepsze podejście, mimo że istnieją płatne, gotowe rozwiązania. Projektując tę ​​funkcję, należy wziąć pod uwagę zarówno wygodę użytkownika, jak i bezpieczeństwo, ponieważ ataki są ciągłym zagrożeniem.