Unohtunut ja nollattu salasana -työnkulku Reactin ja Node.js: n avulla

Todennusjärjestelmillä on keskeinen rooli saumattoman ja turvallisen käyttökokemuksen tarjoamisessa. Todennustyönkulkuun kuuluu yleensä kaksi prosessia: kirjautuminen ja sisäänkirjautuminen.

Kun verkkopalveluiden määrä kasvaa, ihmiset luovat tilejä, ja jokainen tili vaatii yksilölliset kirjautumistiedot. Tämä helpottaa kuitenkin kirjautumistietojen unohtamista tai sekoittamista. Tämän ratkaisemiseksi sovelluksessasi on otettava käyttöön salasanan palautusominaisuus, jonka avulla käyttäjä voi nollata salasanansa kätevästi ja turvallisesti.

Määritä React-projekti

Voit toteuttaa salasanan nollauksen työnkulun useilla tavoilla – ei ole olemassa yleistä standardia, jota jokaisen sovelluksen tulisi noudattaa. Sen sijaan sinun tulee räätälöidä valitsemasi lähestymistapa vastaamaan sovelluksesi erityistarpeita.

Työnkulku, josta opit täältä, sisältää seuraavat vaiheet:

Aloita käynnistää React-projektin nopeasti. Seuraavaksi asenna Axios, JavaScript HTTP-pyyntökirjasto.

npm asennus axios

Löydät projektin koodin tästä GitHub-arkisto.

Luo kirjautumiskomponentti

Luo src-hakemistoon uusi komponentit/Login.js tiedosto ja lisää seuraava koodi. Aloita määrittelemällä salasanan palautusprosessi:

tuonti aksiot alkaen"aksiot";
tuonti Reagoi, { useState } alkaen"reagoi";
tuonti { useContext } alkaen"reagoi";
tuonti { RecoveryContext } alkaen"../Sovellus";
tuonti"./global.component.css";
viedäoletuksenatoimintoKirjaudu sisään() {
konst { setPage, setOTP, setEmail } = useContext (RecoveryContext);
konst [userEmail, setUserEmail] = useState(""); 
toimintosendOtp() {
jos (käyttäjän sähköposti) {
 axios.get(` http://localhost: 5000/check_email? sähköposti =${userEmail}`).sitten((vastaus) => {
jos (response.status 200) {
konst OTP = Matematiikka.lattia(Matematiikka.random() * 9000 + 1000);
konsoli.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/lähetä_sähköposti", {
 OTP,
 recipient_email: userEmail,
 })
 .sitten(() => setPage("otp"))
 .ottaa kiinni(konsoli.Hirsi);
 } muu {
 hälytys ("Käyttäjää, jolla on tämä sähköposti, ei ole olemassa!");
konsoli.log (response.data.message);
 }}).ottaa kiinni(konsoli.Hirsi);
 } muu {
 hälytys ("Ole hyvä ja syötä sähköpostiosoitteesi");
 }}

Tämä koodi luo toiminnon, joka lähettää kertakäyttöisen salasanan (OTP) käyttäjän sähköpostiosoitteeseen. Se tarkistaa ensin käyttäjän tarkistamalla hänen sähköpostinsa tietokannasta ennen OTP: n luomista ja lähettämistä. Lopuksi se päivittää käyttöliittymän OTP-sivulla.

Viimeistele kirjautumiskomponentti lisäämällä koodi kirjautumis JSX -lomakeelementin hahmontamiseksi:

palata (


Kirjaudu </h2>




 Sähköposti: 
"sähköposti" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />
 Salasana:
"Salasana" />
"Lähetä">kirjaudu sisään</button>
 </form>
"#" onClick={() => sendOtp()}>
 Unohtuiko salasana
 </a>
 </div>
 );
}

Luo OTP-vahvistuskomponentti

Varmistaaksesi käyttäjän syöttämän koodin oikeellisuuden, sinun on verrattava sitä käyttäjän sähköpostiin lähetettyyn koodiin.

Luoda uusi komponentit/OTPInput.js tiedosto ja lisää tämä koodi:

tuonti React, { useState, useContext, useEffect } alkaen"reagoi";
tuonti { RecoveryContext } alkaen"../Sovellus";
tuonti aksiot alkaen"aksiot";
tuonti"./global.component.css";
viedäoletuksenatoimintoOTPInput() {
konst { email, otp, setPage } = useContext (RecoveryContext);
konst [OTPinput, setOTPinput] = useState( "");
toimintovahvista OTP() {
jos (parseInt(OTPinput) otp) {
 setPage("nollaa");
 } muu {
 hälytys ("Antamasi koodi ei ole oikea, yritä uudelleen lähettää linkki uudelleen");
 }
 }

Koodi luo React-komponentin, jossa käyttäjät vahvistavat OTP-koodinsa. Se tarkistaa, että syötetty koodi vastaa kontekstiobjektiin tallennettua koodia. Jos se on kelvollinen, se näyttää salasanan palautussivun. Toisaalta se näyttää varoituksen, joka kehottaa käyttäjää yrittämään uudelleen tai lähettämään OTP: n uudelleen.

Voit tarkistaa koodin tästä arkisto joka toteuttaa OTP-koodien uudelleenlähetystoiminnon ja OTP-koodin vanhenemisajastimen.

Suorita lopuksi syötetyt JSX-elementit.

palata (


Sähköpostin vahvistus</h3>


Olemme lähettäneet vahvistuskoodin sähköpostiisi.</p>



"teksti" value={OTPinput} onChange={(e) => { setOTPinput (e.target.value) }} /> 
 verifyOTP()}>Vahvista tili</button> 
 resendOTP()} > Eiet saa koodia? 
 {Poista käytöstä? `Lähetä OTP uudelleen ${timerCount}s`: "Lähetä OTP uudelleen"}
 </a> 
 </form>
 </div>
 );}

Luo salasanan palautuskomponentti

Luoda uusi komponentit/Reset.js tiedosto ja lisää tämä koodi:

tuonti React, {useState, useContext} alkaen"reagoi";
tuonti { RecoveryContext } alkaen"../Sovellus";
tuonti aksiot alkaen"aksiot";
tuonti"./global.component.css";
viedäoletuksenatoimintoNollaa() {
konst [salasana, setPassword] = useState("");
konst { setPage, email } = useContext (RecoveryContext);
toimintoVaihda salasana() {
jos (Salasana) {
yrittää {
 axios.put(" http://localhost: 5000/päivityssalasana", {
 sähköposti: sähköposti,
 uusiPassword: salasana,
 }).sitten(() => setPage("Kirjaudu sisään"));
palata hälytys ("Salasana vaihdettu onnistuneesti, kirjaudu sisään!");
 } ottaa kiinni (virhe) {konsoli.log (virhe);}}
palata hälytys ("Anna uusi salasanasi");
 }
palata (


 Vaihda salasana </h2>




 Uusi salasana: 
 tyyppi="Salasana"
 paikkamerkki="..."
 pakollinen =""
 arvo={salasana}
 onChange={(e) => setPassword (e.target.value)} />
 changePassword()}>Palauta salasana </button>
 </form>
 </div>
 );
}

Tämä koodi muodostaa lomakkeen, jonka avulla käyttäjät voivat kirjoittaa uuden salasanan. Kun käyttäjä napsauttaa Lähetä, se lähettää palvelimelle pyynnön päivittää salasanansa tietokannassa. Se päivittää sitten käyttöliittymän, jos pyyntö onnistuu.

Päivitä App.js-komponenttisi

Tee alla olevat muutokset src/App.js-tiedostoosi:

tuonti { useState, createContext } alkaen"reagoi";
tuonti Kirjaudu sisään alkaen"./components/Login";
tuonti OTPInput alkaen"./components/OTPInput";
tuonti Nollaa alkaen"./components/Reset";
tuonti"./App.css";
viedäkonst RecoveryContext = createContext();
viedäoletuksenatoimintoSovellus() {
konst [sivu, setPage] = useState("Kirjaudu sisään");
konst [email, setEmail] = useState("");
konst [otp, setOTP] = useState("");
toimintoNavigateComponents() {
jos (sivu "Kirjaudu sisään") palata<Kirjaudu sisään />;
jos (sivu "otp") palata<OTPInput />;
jos (sivu "nollaa") palata<Nollaa />;
 }
palata (
"Sovelluksen otsikko"> 
 value={{ sivu, setPage, otp, setOTP, email, setEmail }}>



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

Tämä koodi määrittää kontekstiobjektin, joka hallitsee sovelluksen tilaa, joka sisältää käyttäjän sähköpostin, OTP-koodin ja sovelluksen eri sivut. Pohjimmiltaan kontekstiobjekti mahdollistaa vaadittujen tilojen välittämisen eri komponenttien välillä - vaihtoehto rekvisiittalle.

Se sisältää myös toiminnon, joka käsittelee sivulla navigoinnin helposti ilman, että kokonaisia ​​osia tarvitsee renderöidä uudelleen.

Määritä Express.js-palvelin

Määritä asiakasasetuksissa taustatodennuspalvelu käsittelemään salasanan palautustoimintoa.

Aloita luo Express-verkkopalvelinja asenna nämä paketit:

npm asenna cors dotenv nodemailer mongoose

Seuraava, luo MongoDB-tietokanta tai määritä MongoDB-klusteri pilveen. Kopioi sitten toimitettu yhteysmerkkijono, luo ENV-tiedosto juurihakemistoon ja liitä yhteysmerkkijono.

Lopuksi sinun on määritettävä tietokantayhteys ja määritettävä tietomallit käyttäjätiedoillesi. Käytä tämän arkiston koodia määritä tietokantayhteys ja määritellä tietomallit.

Määritä API-reitit

Taustapalvelussa on ihanteellisesti useita reittejä, jotka käsittelevät asiakkaiden HTTP-pyyntöjä. Tässä tapauksessa sinun on määritettävä kolme reittiä, jotka hallitsevat React-asiakassovelluksen lähetyssähköposti-, sähköpostivahvistus- ja päivityssalasanan API-pyyntöjä.

Luo uusi tiedosto nimeltä userRoutes.js juurihakemistoon ja lisää seuraava koodi:

konst express = vaatia('ilmaista');
konst reititin = express. Reititin();
konst userControllers = vaatia('../controllers/userControllers');
router.get('/Tarkista sähköposti', userControllers.checkEmail);
router.put('/päivitys-salasana', userControllers.updatePassword);
router.post('/lähettää sähköpostia', userControllers.sendEmail);
moduuli.exports = reititin;

API-reittien ohjaimet

Rekisterinpitäjät ovat vastuussa asiakkaiden HTTP-pyyntöjen käsittelystä. Kun asiakas tekee pyynnön tietylle API-reitille, ohjaintoiminto kutsutaan ja suoritetaan käsittelemään pyyntö ja palauttamaan asianmukaisen vastauksen.

Luoda uusi controllers/userControllers.js tiedosto ja lisää alla oleva koodi.

Käytä tämän arkiston koodia määrittää ohjaimet sähköpostin vahvistusta ja päivityssalasanaa varten API-reitit.

Aloita määrittämällä sähköpostin lähetysohjain:

exports.sendEmail = (req, res) => {
konst transporter = nodemailer.createTransport({
 palvelu: 'gmail',
 turvallinen: totta,
 auth: {
 käyttäjä: process.env. SÄHKÖPOSTINI,
 pass: process.env. APP_PASSWORD,
 },
 });
konst { vastaanottajan_sähköposti, OTP } = req.body;
konst mailOptions = {
alkaen: process.env. SÄHKÖPOSTINI,
 vastaanottajalle: recipient_email,
 aihe: 'SALASANAN NOLLAUS',
 html: `


Salasanan palautus</h2>


Käyttää Tämä OTP nollataksesi salasanasi. OTP on voimassa varten1 minuutti </p>

${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (error, info) => {
jos (virhe) {
konsoli.log (virhe);
 res.status(500).lähettää({ viesti: "Tapahtui virhe lähetettäessä sähköpostia" });
 } muu {
konsoli.Hirsi('Sähköposti lähetetty: ' + info.response);
 res.status(200).lähettää({ viesti: "Sähköposti lähetetty onnistuneesti" });
 }
 });
};

Tämä koodi määrittää toiminnon, joka käyttää Nodemaileria OTP-nollauksen sisältävän sähköpostin lähettämiseen määritetylle vastaanottajalle. Se määrittää kuljettajan käyttämällä omaa Gmail-tiliäsi ja salasanaasi.

Sinun on saatava Gmail-sovelluksen salasana luo sovelluksen salasana Google-tilisi asetuksissa. Käytät sitten tätä salasanaa tavallisen Gmail-salasanasi sijaan Nodemailerin todentamiseen.

Määritä palvelimen sisääntulopiste

Luo server.js-tiedosto juurihakemistoon ja lisää tämä koodi:

konst express = vaatia('ilmaista');
konst cors = vaatia("cors");
konst sovellus = express();
konst portti = 5000;
vaatia('dotenv').config();
konst nodemailer = vaatia('nodemailer');
konst connectDB = vaatia('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ laajennettu: totta }));
app.use (cors());
konst userRoutes = vaatia('./routes/userRoutes');
app.use('/', userRoutes);
app.listen (portti, () => {
konsoli.Hirsi(`Palvelin kuuntelee klo http://localhost:${port}`);
});

Kun sekä asiakas että palvelin on määritetty, voit käyttää kehityspalvelimia ja testata salasanan toimivuutta.

Mukautetun salasanan palautuspalvelun luominen

Salasanan palautusjärjestelmän luominen räätälöimällä se sovelluksellesi ja sen käyttäjille on paras tapa, vaikka maksullisia valmiita ratkaisuja onkin olemassa. Tätä ominaisuutta suunnitellessasi sinun tulee ottaa huomioon sekä käyttökokemus että turvallisuus, sillä hyökkäykset ovat jatkuva uhka.