Πώς να χειριστείτε τη ροή εργασίας ξεχασμένος και επαναφορά κωδικού πρόσβασης χρησιμοποιώντας το React και το Node.js

Τα συστήματα ελέγχου ταυτότητας διαδραματίζουν κρίσιμο ρόλο στην παροχή μιας απρόσκοπτης και ασφαλούς εμπειρίας χρήστη. Μια ροή εργασιών ελέγχου ταυτότητας περιλαμβάνει συνήθως δύο διαδικασίες: εγγραφή και σύνδεση.

Καθώς ο αριθμός των διαδικτυακών υπηρεσιών αυξάνεται, οι άνθρωποι δημιουργούν λογαριασμούς και κάθε λογαριασμός απαιτεί μοναδικά διαπιστευτήρια σύνδεσης. Ωστόσο, αυτό καθιστά εύκολο να ξεχάσετε ή να συγχέετε τα διαπιστευτήρια σύνδεσης. Για να αντιμετωπιστεί αυτό, η εφαρμογή σας θα πρέπει να εφαρμόσει μια λειτουργία επαναφοράς κωδικού πρόσβασης που επιτρέπει σε έναν χρήστη να επαναφέρει τον κωδικό πρόσβασής του εύκολα και με ασφάλεια.

Ρυθμίστε το έργο React

Μπορείτε να εφαρμόσετε μια ροή εργασίας επαναφοράς κωδικού πρόσβασης με διάφορους τρόπους—δεν υπάρχει ένα καθολικό πρότυπο που πρέπει να ακολουθεί κάθε εφαρμογή. Αντίθετα, θα πρέπει να προσαρμόσετε την προσέγγιση που θα επιλέξετε ώστε να ανταποκρίνεται στις συγκεκριμένες ανάγκες της αίτησής σας.

Η ροή εργασίας για την οποία θα μάθετε εδώ περιλαμβάνει τα ακόλουθα βήματα:

Για να ξεκινήσετε, εκκινήστε γρήγορα ένα έργο React. Στη συνέχεια, εγκαταστήστε Axios, μια βιβλιοθήκη αιτημάτων JavaScript HTTP.

npm εγκατάσταση axios

Μπορείτε να βρείτε τον κωδικό του έργου σε αυτό Αποθετήριο GitHub.

Δημιουργήστε ένα στοιχείο σύνδεσης

Στον κατάλογο src, δημιουργήστε ένα νέο components/Login.js αρχείο και προσθέστε τον παρακάτω κώδικα. Ξεκινήστε ορίζοντας τη διαδικασία επαναφοράς κωδικού πρόσβασης:

εισαγωγή αξιος από"αξιος";
εισαγωγή React, { useState } από"αντιδρώ";
εισαγωγή { useContext } από"αντιδρώ";
εισαγωγή { RecoveryContext } από"../Εφαρμογή";
εισαγωγή"./global.component.css";
εξαγωγήΠροκαθορισμένολειτουργίαΣύνδεση() {
συνθ { setPage, setOTP, setEmail } = useContext (RecoveryContext);
συνθ [userEmail, setUserEmail] = useState(""); 
λειτουργίαsendOtp() {
αν (Email χρήστη) {
 axios.get(` http://localhost: 5000/check_email; email=${userEmail}`).έπειτα((απάντηση) => {
αν (response.status 200) {
συνθ OTP = Μαθηματικά.πάτωμα(Μαθηματικά.random() * 9000 + 1000);
κονσόλα.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 axios.post(" http://localhost: 5000/send_email", {
 OTP,
 recipient_email: userEmail,
 })
 .έπειτα(() => setPage("otp"))
 .σύλληψη(κονσόλα.κούτσουρο);
 } αλλού {
 συναγερμός("Χρήστης με αυτό το email δεν υπάρχει!");
κονσόλα.log (response.data.message);
 }}).σύλληψη(κονσόλα.κούτσουρο);
 } αλλού {
 συναγερμός("Παρακαλώ εισάγετε το email σας");
 }}

Αυτός ο κωδικός δημιουργεί μια λειτουργία που στέλνει έναν κωδικό πρόσβασης μίας χρήσης (OTP) στη διεύθυνση email ενός χρήστη. Αρχικά επαληθεύει τον χρήστη ελέγχοντας το email του στη βάση δεδομένων πριν δημιουργήσει και στείλει το OTP. Τέλος, ενημερώνει το UI με τη σελίδα OTP.

Ολοκληρώστε το στοιχείο σύνδεσης προσθέτοντας κώδικα για την απόδοση του στοιχείου φόρμας σύνδεσης JSX:

ΕΠΙΣΤΡΟΦΗ (


Είσοδος</h2>




 ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ: 
"ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ" value={userEmail} onChange={(e) => { setUserEmail (e.target.value) }} />
 Κωδικός πρόσβασης:
"Κωδικός πρόσβασης" />
"υποβάλλουν">σύνδεση</button>
 </form>
"#" onClick={() => sendOtp()}>
 Ξεχάσατε τον κωδικό
 </a>
 </div>
 );
}

Δημιουργήστε ένα στοιχείο επαλήθευσης OTP

Για να διασφαλίσετε την εγκυρότητα ενός κωδικού που έχει εισαχθεί από έναν χρήστη, πρέπει να τον συγκρίνετε με τον κωδικό που αποστέλλεται στο email του.

Δημιούργησε ένα νέο components/OTPInput.js αρχείο και προσθέστε αυτόν τον κωδικό:

εισαγωγή React, { useState, useContext, useEffect } από"αντιδρώ";
εισαγωγή { RecoveryContext } από"../Εφαρμογή";
εισαγωγή αξιος από"αξιος";
εισαγωγή"./global.component.css";
εξαγωγήΠροκαθορισμένολειτουργίαΕίσοδος OTP() {
συνθ { email, otp, setPage } = useContext (RecoveryContext);
συνθ [OTPinput, setOTPinput] = useState( "");
λειτουργίαverifyOTP() {
αν (parseInt(OTPinput) otp) {
 setPage("επαναφορά");
 } αλλού {
 συναγερμός("Ο κωδικός που πληκτρολογήσατε δεν είναι σωστός, προσπαθήστε ξανά να στείλετε ξανά τον σύνδεσμο");
 }
 }

Ο κώδικας δημιουργεί ένα στοιχείο React όπου οι χρήστες επαληθεύουν τον κωδικό OTP τους. Ελέγχει ότι ο εισαγόμενος κωδικός ταιριάζει με αυτόν που είναι αποθηκευμένος στο αντικείμενο περιβάλλοντος. Εάν είναι έγκυρο, εμφανίζει τη σελίδα επαναφοράς κωδικού πρόσβασης. Αντίστροφα, εμφανίζει μια ειδοποίηση που προτρέπει τον χρήστη να δοκιμάσει ξανά ή να στείλει ξανά το OTP.

Μπορείτε να ελέγξετε τον κωδικό σε αυτό αποθήκη που υλοποιεί μια λειτουργία για την εκ νέου αποστολή OTP και ένα χρονόμετρο λήξης για τον κωδικό OTP.

Τέλος, αποδώστε τα στοιχεία εισόδου JSX.

ΕΠΙΣΤΡΟΦΗ (


Επαλήθευση email</h3>


Έχουμε στείλει έναν κωδικό επαλήθευσης στο email σας.</p>



"κείμενο" value={OTPinput} onChange={(e) => { setOTPinput (e.target.value) }} /> 
 verifyOTP()}>Επαλήθευση λογαριασμού</button> 
 resendOTP()} > Didnδεν λαμβάνετε κωδικό; 
 {καθιστώ ανίκανο? `Επανάληψη αποστολής OTP σε ${timerCount}s`: "Επανάληψη αποστολής OTP"}
 </a> 
 </form>
 </div>
 );}

Δημιουργήστε το στοιχείο Επαναφορά κωδικού πρόσβασης

Δημιούργησε ένα νέο components/Reset.js αρχείο και προσθέστε αυτόν τον κωδικό:

εισαγωγή React, {useState, useContext} από"αντιδρώ";
εισαγωγή { RecoveryContext } από"../Εφαρμογή";
εισαγωγή αξιος από"αξιος";
εισαγωγή"./global.component.css";
εξαγωγήΠροκαθορισμένολειτουργίαΕπαναφορά() {
συνθ [password, setPassword] = useState("");
συνθ { setPage, email } = useContext (RecoveryContext);
λειτουργίαΆλλαξε κωδικό() {
αν (Κωδικός πρόσβασης) {
δοκιμάστε {
 axios.put(" http://localhost: 5000/ενημέρωση-κωδικός", {
 email: email,
 νέος κωδικός πρόσβασης: κωδικός πρόσβασης,
 }).έπειτα(() => setPage("Σύνδεση"));
ΕΠΙΣΤΡΟΦΗ συναγερμός("Ο κωδικός άλλαξε με επιτυχία, παρακαλώ συνδεθείτε!");
 } σύλληψη (λάθος) {κονσόλα.log (σφάλμα);}}
ΕΠΙΣΤΡΟΦΗ συναγερμός("Παρακαλώ εισάγετε τον νέο σας κωδικό πρόσβασης");
 }
ΕΠΙΣΤΡΟΦΗ (


 Αλλαγή κωδικού πρόσβασης </h2>




 Νέος Κωδικός: 
 τύπος="Κωδικός πρόσβασης"
 placeholder="..."
 απαιτείται=""
 value={password}
 onChange={(e) => setPassword (e.target.value)} />
 changePassword()}>Επαναφορά κωδικού πρόσβασης </button>
 </form>
 </div>
 );
}

Αυτός ο κωδικός αποδίδει μια φόρμα που επιτρέπει στους χρήστες να εισάγουν έναν νέο κωδικό πρόσβασης. Όταν ο χρήστης κάνει κλικ στην υποβολή, θα στείλει ένα αίτημα στον διακομιστή να ενημερώσει τον κωδικό πρόσβασής του στη βάση δεδομένων. Στη συνέχεια, θα ενημερώσει τη διεπαφή χρήστη εάν το αίτημα είναι επιτυχές.

Ενημερώστε το στοιχείο App.js σας

Κάντε τις παρακάτω αλλαγές στο αρχείο src/App.js:

εισαγωγή { useState, createContext } από"αντιδρώ";
εισαγωγή Σύνδεση από"./components/Login";
εισαγωγή Είσοδος OTP από"./components/OTPIinput";
εισαγωγή Επαναφορά από"./components/Reset";
εισαγωγή"./App.css";
εξαγωγήσυνθ RecoveryContext = createContext();
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
συνθ [σελίδα, setPage] = useState("Σύνδεση");
συνθ [email, setEmail] = useState("");
συνθ [otp, setOTP] = useState("");
λειτουργίαNavigateComponents() {
αν (σελίδα "Σύνδεση") ΕΠΙΣΤΡΟΦΗ<Σύνδεση />;
αν (σελίδα "otp") ΕΠΙΣΤΡΟΦΗ<Είσοδος OTP />;
αν (σελίδα "επαναφορά") ΕΠΙΣΤΡΟΦΗ<Επαναφορά />;
 }
ΕΠΙΣΤΡΟΦΗ (
"Επικεφαλίδα εφαρμογής"> 
 value={{ σελίδα, setPage, otp, setOTP, email, setEmail }}>



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

Αυτός ο κώδικας ορίζει ένα αντικείμενο περιβάλλοντος που διαχειρίζεται την κατάσταση της εφαρμογής, το οποίο περιλαμβάνει το email του χρήστη, τον κωδικό OTP και τις διάφορες σελίδες εντός της εφαρμογής. Ουσιαστικά, το αντικείμενο περιβάλλοντος καθιστά δυνατή τη μεταβίβαση των απαιτούμενων καταστάσεων μεταξύ διαφορετικών στοιχείων - μια εναλλακτική λύση στη χρήση των στηρίξεων.

Περιλαμβάνει επίσης μια λειτουργία που χειρίζεται την πλοήγηση στη σελίδα με ευκολία χωρίς να χρειάζεται να αναπαράγετε ολόκληρα στοιχεία.

Ρυθμίστε έναν διακομιστή Express.js

Με τη ρύθμιση του προγράμματος-πελάτη, διαμορφώστε μια υπηρεσία ελέγχου ταυτότητας backend για να χειριστεί τη λειτουργία επαναφοράς κωδικού πρόσβασης.

Για να ξεκινήσετε, δημιουργήστε έναν διακομιστή ιστού Expressκαι εγκαταστήστε αυτά τα πακέτα:

npm εγκατάσταση cors dotenv nodemailer mongoose

Επόμενο, δημιουργήστε μια βάση δεδομένων MongoDB ή διαμορφώστε ένα σύμπλεγμα MongoDB στο cloud. Στη συνέχεια, αντιγράψτε τη συμβολοσειρά σύνδεσης που παρέχεται, δημιουργήστε ένα αρχείο ENV στον ριζικό κατάλογο και επικολλήστε τη συμβολοσειρά σύνδεσης.

Για να ολοκληρώσετε, πρέπει να διαμορφώσετε τη σύνδεση της βάσης δεδομένων και να ορίσετε τα μοντέλα δεδομένων για τα δεδομένα χρήστη σας. Χρησιμοποιήστε τον κώδικα σε αυτό το αποθετήριο για να ρυθμίστε τη σύνδεση της βάσης δεδομένων και ορίστε τα μοντέλα δεδομένων.

Καθορίστε τις διαδρομές API

Μια υπηρεσία υποστήριξης έχει ιδανικά πολλές διαδρομές που χειρίζονται τα αιτήματα HTTP των πελατών. Σε αυτήν την περίπτωση, θα χρειαστεί να ορίσετε τρεις διαδρομές που θα διαχειρίζονται τα αιτήματα API αποστολής email, επαλήθευσης email και ενημέρωσης κωδικού πρόσβασης από το πρόγραμμα-πελάτη React.

Δημιουργήστε ένα νέο αρχείο που ονομάζεται userRoutes.js στον ριζικό κατάλογο και προσθέστε τον ακόλουθο κώδικα:

συνθ εκφράζω = απαιτώ('εξπρές');
συνθ δρομολογητής = εξπρές. Router();
συνθ userControllers = απαιτώ("../controllers/userControllers");
router.get('/Ελέγξτε το email', userControllers.checkEmail);
router.put('/ενημέρωση-κωδικός πρόσβασης', userControllers.updatePassword);
router.post('/να στείλετε e-mail', userControllers.sendEmail);
μονάδα μέτρησης.exports = δρομολογητής;

Ελεγκτές για τις διαδρομές API

Οι ελεγκτές είναι υπεύθυνοι για την επεξεργασία των αιτημάτων HTTP των πελατών. Μόλις, ένας πελάτης κάνει ένα αίτημα σε μια συγκεκριμένη διαδρομή API, μια συνάρτηση ελεγκτή καλείται και εκτελείται για να επεξεργαστεί το αίτημα και να επιστρέψει μια κατάλληλη απάντηση.

Δημιούργησε ένα νέο controllers/userControllers.js αρχείο και προσθέστε τον παρακάτω κώδικα.

Χρησιμοποιήστε τον κώδικα σε αυτό το αποθετήριο για να ορίστε ελεγκτές για την επαλήθευση email και τον κωδικό ενημέρωσης Διαδρομές API.

Ξεκινήστε ορίζοντας τον ελεγκτή αποστολής email:

exports.sendEmail = (απαίτηση, ανάλογ) => {
συνθ transporter = nodemailer.createTransport({
 υπηρεσία: 'gmail',
 ασφαλής: αληθής,
 auth: {
 χρήστης: process.env. MY_EMAIL,
 pass: διεργασία.env. APP_PASSWORD,
 },
 });
συνθ { recipient_email, OTP } = req.body;
συνθ mailOptions = {
από: διεργασία.env. MY_EMAIL,
 προς: recipient_email,
 θέμα: 'ΕΠΑΝΑΦΟΡΑ ΚΩΔΙΚΟΥ',
 html: `


Ανάκτηση κωδικού πρόσβασης</h2>


Χρήση Αυτό OTP για επαναφορά του κωδικού πρόσβασής σας. Το OTP είναι έγκυρο Για1 λεπτό</p>

${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (σφάλμα, πληροφορίες) => {
αν (λάθος) {
κονσόλα.log (σφάλμα);
 res.status(500).στείλετε({ μήνυμα: "Παρουσιάστηκε σφάλμα κατά την αποστολή του email" });
 } αλλού {
κονσόλα.κούτσουρο('Το μήνυμα ηλεκτρονικού ταχυδρομείου εστάλη: ' + info.response);
 res.status(200).στείλετε({ μήνυμα: "Το email εστάλη με επιτυχία" });
 }
 });
};

Αυτός ο κωδικός ορίζει μια συνάρτηση που χρησιμοποιεί το Nodemailer για να στείλει ένα email με επαναφορά OTP σε έναν καθορισμένο παραλήπτη. Ρυθμίζει έναν μεταφορέα χρησιμοποιώντας τον δικό σας λογαριασμό Gmail και κωδικό πρόσβασης.

Για να λάβετε τον κωδικό πρόσβασης της εφαρμογής Gmail, πρέπει δημιουργήστε έναν κωδικό πρόσβασης εφαρμογής στις ρυθμίσεις του λογαριασμού σας Google. Στη συνέχεια, θα χρησιμοποιήσετε αυτόν τον κωδικό πρόσβασης στη θέση του κανονικού σας κωδικού πρόσβασης στο Gmail για τον έλεγχο ταυτότητας του Nodemailer.

Διαμορφώστε το σημείο εισόδου διακομιστή

Δημιουργήστε ένα αρχείο server.js στον ριζικό κατάλογο και προσθέστε αυτόν τον κώδικα:

συνθ εκφράζω = απαιτώ('εξπρές');
συνθ κορς = απαιτώ('κορς');
συνθ app = express();
συνθ λιμάνι = 5000;
απαιτώ('dotenv').config();
συνθ nodemailer = απαιτώ('nodemailer');
συνθ connectDB = απαιτώ('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ επεκτάθηκε: αληθής }));
app.use (cors());
συνθ userRoutes = απαιτώ("./routes/userRoutes");
app.use('/', userRoutes);
app.listen (port, () => {
κονσόλα.κούτσουρο(`Ο διακομιστής ακούει στο http://localhost:${port}`);
});

Με τη ρύθμιση τόσο του προγράμματος-πελάτη όσο και του διακομιστή, μπορείτε να εκτελέσετε τους διακομιστές ανάπτυξης για να δοκιμάσετε τη λειτουργικότητα του κωδικού πρόσβασης.

Δημιουργία μιας προσαρμοσμένης υπηρεσίας επαναφοράς κωδικού πρόσβασης

Η δημιουργία ενός συστήματος επαναφοράς κωδικού πρόσβασης προσαρμόζοντάς το στην εφαρμογή σας και στους χρήστες του είναι η καλύτερη προσέγγιση, παρόλο που υπάρχουν επί πληρωμή, προκατασκευασμένες λύσεις. Κατά το σχεδιασμό αυτής της δυνατότητας, θα πρέπει να λάβετε υπόψη τόσο την εμπειρία του χρήστη όσο και την ασφάλεια, καθώς οι επιθέσεις αποτελούν συνεχή απειλή.