Laat uw sitebezoekers niet in de steek - laat ze hun wachtwoord opnieuw instellen als ze het zijn vergeten.

Verificatiesystemen spelen een cruciale rol bij het bieden van een naadloze en veilige gebruikerservaring. Een authenticatieworkflow omvat meestal twee processen: aanmelden en inloggen.

Naarmate het aantal online services toeneemt, maken mensen accounts aan en voor elk account zijn unieke inloggegevens vereist. Dit maakt het echter gemakkelijk om inloggegevens te vergeten of te verwarren. Om dit aan te pakken, moet uw app een functie voor het opnieuw instellen van het wachtwoord implementeren waarmee een gebruiker zijn wachtwoord gemakkelijk en veilig kan resetten.

Zet het React-project op

U kunt een workflow voor het opnieuw instellen van wachtwoorden op verschillende manieren implementeren: er is geen universele standaard die elke toepassing zou moeten volgen. In plaats daarvan moet u de aanpak die u kiest afstemmen op de specifieke behoeften van uw toepassing.

De workflow waarover u hier meer te weten komt, omvat de volgende stappen:

instagram viewer

Starten, start snel een React-project op. Installeer vervolgens Axios, een JavaScript HTTP-aanvraagbibliotheek.

npm axios installeren

Hierin vindt u de code van het project GitHub-opslagplaats.

Maak een inlogcomponent

Maak in de map src een nieuw componenten/Login.js bestand en voeg de volgende code toe. Begin met het definiëren van het wachtwoordherstelproces:

importeren axioma's van"axios";
importeren Reageer, { useState } van"Reageer";
importeren { gebruikContext } van"Reageer";
importeren { HerstelContext } van"../App";
importeren"./global.component.css";
exporterenstandaardfunctieLog in() {
const { setPage, setOTP, setEmail } = useContext (RecoveryContext);
const [userEmail, setUserEmail] = useState(""); 


functiestuurOtp() {
als (gebruikerE-mail) {
 axios.get(` http://localhost: 5000/check_email? e-mail=${userEmail}`).Dan((antwoord) => {
als (antwoord.status 200) {
const OTP = Wiskunde.vloer(Wiskunde.willekeurig() * 9000 + 1000);
troosten.log (OTP);
 setOTP(OTP);
 setEmail (gebruikerEmail);
 axios.post(" http://localhost: 5000/verzend_e-mail", {
 OTP,
 ontvanger_email: gebruikerEmail,
 })
 .Dan(() => zet pagina("otp"))
 .vangst(troosten.log);
 } anders {
 alarm ("Gebruiker met dit e-mailadres bestaat niet!");
troosten.log (antwoord.data.bericht);
 }}).vangst(troosten.log);
 } anders {
 alarm ("Vul alstublieft uw e-mailadres in");
 }}

Deze code creëert een functie die een eenmalig wachtwoord (OTP) naar het e-mailadres van een gebruiker stuurt. Het verifieert eerst de gebruiker door zijn e-mail in de database te controleren voordat de OTP wordt gegenereerd en verzonden. Ten slotte werkt het de gebruikersinterface bij met de OTP-pagina.

Voltooi de login-component door code toe te voegen om het login JSX-formulierelement weer te geven:

opbrengst (


Inloggen</h2>







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


 Wachtwoord:
"wachtwoord" />

Maak een OTP-verificatiecomponent

Om de geldigheid van een door een gebruiker ingevoerde code te garanderen, moet u deze vergelijken met de code die naar hun e-mail is verzonden.

Maak een nieuwe aan componenten/OTPInput.js bestand en voeg deze code toe:

importeren Reageren, { useState, useContext, useEffect } van"Reageer";
importeren { HerstelContext } van"../App";
importeren axioma's van"axios";
importeren"./global.component.css";
exporterenstandaardfunctieOTPInput() {
const { email, otp, setPage } = useContext (RecoveryContext);
const [OTPinput, setOTPinput] = useState( "");
functieverifiërenOTP() {
als (ontleedInt(OTP-invoer) otp) {
 zet pagina("terugzetten");
 } anders {
 alarm ("De ingevoerde code is niet correct, probeer opnieuw de link opnieuw te verzenden");
 }
 }

De code creëert een React-component waar gebruikers hun OTP-code verifiëren. Het controleert of de ingevoerde code overeenkomt met de code die is opgeslagen in het contextobject. Als het geldig is, wordt de pagina voor het opnieuw instellen van het wachtwoord weergegeven. Omgekeerd toont het een waarschuwing waarin de gebruiker wordt gevraagd het opnieuw te proberen of de OTP opnieuw te verzenden.

Hierin kunt u de code controleren opslagplaats dat een functie implementeert voor het opnieuw verzenden van OTP's en een vervaltimer voor de OTP-code.

Geef ten slotte de ingevoerde JSX-elementen weer.

opbrengst (


E-mailverificatie</h3>




We hebben een verificatiecode naar uw e-mailadres gestuurd.</p>




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

Maak de component Wachtwoord opnieuw instellen

Maak een nieuwe aan componenten/Reset.js bestand en voeg deze code toe:

importeren Reageer, {useState, useContext} van"Reageer";
importeren { HerstelContext } van"../App";
importeren axioma's van"axios";
importeren"./global.component.css";
exporterenstandaardfunctieResetten() {
const [wachtwoord, setPassword] = useState("");
const { setPage, email } = useContext (RecoveryContext);


functieverander wachtwoord() {
als (wachtwoord) {
poging {
 axios.put(" http://localhost: 5000/update-wachtwoord", {
 e-mail: e-mail,
 nieuwWachtwoord: wachtwoord,
 }).Dan(() => zet pagina("Log in"));


opbrengst alarm ("Wachtwoord succesvol gewijzigd, gelieve in te loggen!");
 } vangst (fout) {troosten.log (fout);}}
opbrengst alarm ("Voer uw nieuwe wachtwoord in");
 }
opbrengst (


 Wachtwoord wijzigen </h2>






 Nieuw paswoord: 
 type="wachtwoord"
 tijdelijke aanduiding="..."
 vereist=""
 waarde={wachtwoord}
 onChange={(e) => setPassword (e.target.value)} />

Deze code geeft een formulier weer waarmee gebruikers een nieuw wachtwoord kunnen invoeren. Wanneer de gebruiker op verzenden klikt, stuurt hij een verzoek naar de server om zijn wachtwoord in de database bij te werken. Vervolgens wordt de gebruikersinterface bijgewerkt als het verzoek succesvol is.

Werk uw App.js-component bij

Breng de onderstaande wijzigingen aan in uw src/App.js-bestand:

importeren { useState, createContext } van"Reageer";
importeren Log in van"./componenten/Inloggen";
importeren OTPInput van"./componenten/OTPInput";
importeren Resetten van"./componenten/Resetten";
importeren"./App.css";
exporterenconst RecoveryContext = createContext();
exporterenstandaardfunctieapp() {
const [pagina, setPage] = useState("Log in");
const [email, setEmail] = useState("");
const [otp, setOTP] = useState("");


functieNavigeer door componenten() {
als (bladzijde "Log in") opbrengst<Log in />;
als (bladzijde "otp") opbrengst<OTPInput />;
als (bladzijde "terugzetten") opbrengst<Resetten />;
 }
opbrengst (
"App-header"> 
 waarde={{ pagina, setPage, otp, setOTP, e-mail, setEmail }}>



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

Deze code definieert een contextobject dat de status van de app beheert, waaronder de e-mail van de gebruiker, de OTP-code en de verschillende pagina's in de app. In wezen maakt het contextobject het mogelijk om de vereiste statussen tussen verschillende componenten door te geven - een alternatief voor het gebruik van rekwisieten.

Het bevat ook een functie die paginanavigatie gemakkelijk afhandelt zonder dat hele componenten opnieuw hoeven te worden weergegeven.

Stel een Express.js-server in

Configureer met de clientconfiguratie een backend-authenticatieservice om de functionaliteit voor het opnieuw instellen van het wachtwoord af te handelen.

Starten, een Express-webserver maken, en installeer deze pakketten:

npm install cors dotenv nodemailer mongoose

Volgende, maak een MongoDB-database of configureer een MongoDB-cluster in de cloud. Kopieer vervolgens de meegeleverde verbindingsreeks, maak een ENV-bestand in de hoofdmap en plak de verbindingsreeks.

Om te eindigen, moet u de databaseverbinding configureren en de gegevensmodellen voor uw gebruikersgegevens definiëren. Gebruik de code in deze repository om stel de databaseverbinding in En definieer de datamodellen.

Definieer de API-routes

Een backend-service heeft idealiter verschillende routes die de HTTP-verzoeken van klanten afhandelen. In dit geval moet u drie routes definiëren die de API-verzoeken voor het verzenden van e-mail, e-mailverificatie en update-wachtwoord van de React-client beheren.

Maak een nieuw bestand met de naam userRoutes.js in de hoofdmap en voeg de volgende code toe:

const uitdrukken = vereisen('nadrukkelijk');
const router = expres. Router();
const gebruikerControllers = vereisen('../controllers/userControllers');
router.get('/e-mail controleren', userControllers.checkEmail);
router.put('/vernieuw wachtwoord', userControllers.updatePassword);
router.post('/verzend_e-mail', userControllers.sendEmail);
moduul.export = router;

Controllers voor de API-routes

Controllers zijn verantwoordelijk voor het verwerken van HTTP-verzoeken van klanten. Zodra een client een verzoek doet aan een bepaalde API-route, wordt een controllerfunctie aangeroepen en uitgevoerd om het verzoek te verwerken en een passend antwoord terug te sturen.

Maak een nieuwe aan controllers/userControllers.js bestand en voeg onderstaande code toe.

Gebruik de code in deze repository om definieer controllers voor de e-mailverificatie en het update-wachtwoord API-routes.

Begin met het definiëren van de controller voor het verzenden van e-mail:

export.sendEmail = (req, res) => {
const transporter = nodemailer.createTransport({
 dienst: 'gmail',
 zeker: WAAR,
 authenticatie: {
 gebruiker: proces.env. MIJN E-MAIL,
 doorgeven: proces.env. APP_PASSWORD,
 },
 });
const { ontvanger_e-mail, OTP } = req.body;


const mailOpties = {
van: proces.env. MIJN E-MAIL,
 naar: ontvanger_e-mail,
 onderwerp: 'WACHTWOORD RESET',
 html: `


Wachtwoordherstel</h2>




Gebruik dit OTP om uw wachtwoord opnieuw in te stellen. OTP is geldig voor1 minuut</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (fout, info) => {
als (fout) {
troosten.log (fout);
 res.status(500).versturen({ bericht: "Er is een fout opgetreden tijdens het verzenden van de e-mail" });
 } anders {
troosten.log('Email verzonden: ' + info.antwoord);
 res.status(200).versturen({ bericht: "E-mail succesvol verzonden" });
 }
 });
};

Deze code definieert een functie die Nodemailer gebruikt om een ​​e-mail met een OTP-reset naar een opgegeven ontvanger te sturen. Het zet een transporter op met uw eigen Gmail-account en wachtwoord.

Om het wachtwoord van uw Gmail-app te krijgen, moet u dat doen genereer een app-wachtwoord in de instellingen van uw Google-account. U gebruikt dan dit wachtwoord in plaats van uw gewone Gmail-wachtwoord om de Nodemailer te authenticeren.

Configureer het serveringangspunt

Maak een server.js-bestand in de hoofdmap en voeg deze code toe:

const uitdrukken = vereisen('nadrukkelijk');
const koren = vereisen('cors');
const app = uitdrukken();
const poort = 5000;
vereisen('dotenv'.config();
const nodemailer = vereisen('nodemailer');
const connectDB = vereisen('./utils/dbconfig');
connectDB();
app.gebruik (express.json());
app.gebruik (express.urlencoded({ verlengd: WAAR }));
app.gebruik (cors());
const gebruikerRoutes = vereisen('./routes/userRoutes');
app.gebruik('/', gebruikerRoutes);
app.listen (poort, () => {
troosten.log(`Server luistert naar http://localhost:${poort}`);
});

Als zowel de client als de server zijn ingesteld, kunt u de ontwikkelingsservers gebruiken om de wachtwoordfunctionaliteit te testen.

Een aangepaste wachtwoord-resetservice bouwen

Het creëren van een systeem voor het resetten van wachtwoorden door het af te stemmen op uw toepassing en de gebruikers is de beste aanpak, ook al bestaan ​​er betaalde, kant-en-klare oplossingen. Bij het ontwerpen van deze functie moet u rekening houden met zowel de gebruikerservaring als de beveiliging, aangezien aanvallen een constante bedreiging vormen.