Site ziyaretçilerinizi askıda bırakmayın; unuttukları takdirde şifrelerini sıfırlamalarına izin verin.

Kimlik doğrulama sistemleri, sorunsuz ve güvenli bir kullanıcı deneyimi sağlamada çok önemli bir rol oynar. Bir kimlik doğrulama iş akışı tipik olarak iki işlem içerir: kaydolma ve oturum açma.

Çevrimiçi hizmetlerin sayısı arttıkça, insanlar hesap oluşturur ve her hesap için benzersiz oturum açma kimlik bilgileri gerekir. Ancak bu, oturum açma kimlik bilgilerini unutmayı veya karıştırmayı kolaylaştırır. Bunu ele almak için uygulamanız, bir kullanıcının parolasını rahat ve güvenli bir şekilde sıfırlamasına olanak tanıyan bir parola sıfırlama özelliği uygulamalıdır.

React Projesini Kurun

Parola sıfırlama iş akışını çeşitli şekillerde uygulayabilirsiniz; her uygulamanın uyması gereken evrensel bir standart yoktur. Bunun yerine, seçtiğiniz yaklaşımı uygulamanızın özel ihtiyaçlarını karşılayacak şekilde uyarlamanız gerekir.

Burada öğreneceğiniz iş akışı aşağıdaki adımları içerir:

Başlamak, bir React projesini hızlı bir şekilde önyükleyin

instagram viewer
. Ardından, yükleyin Axios, bir JavaScript HTTP istek kitaplığı.

npm kurulum eksenleri

Projenin kodunu burada bulabilirsiniz. GitHub deposu.

Bir Oturum Açma Bileşeni Oluşturun

src dizininde yeni bir tane oluşturun. bileşenler/Login.js dosyasını açın ve aşağıdaki kodu ekleyin. Parola sıfırlama işlemini tanımlayarak başlayın:

içe aktarmak eksenler itibaren"eksen";
içe aktarmak Tepki, { useState } itibaren"tepki";
içe aktarmak { bağlamı kullan } itibaren"tepki";
içe aktarmak { RecoveryContext } itibaren"../Uygulama";
içe aktarmak"./global.component.css";
ihracatvarsayılanişlevGiriş yapmak() {
sabit { setPage, setOTP, setEmail } = useContext (RecoveryContext);
sabit [userEmail, setUserEmail] = useState(""); 


işlevgönderOtp() {
eğer (Kullanıcı e-postası) {
 eksenler.get(` http://localhost: 5000/check_email? e-posta=${userEmail}`).Daha sonra((cevap) => {
eğer (yanıt.durum 200) {
sabit OTP = Matematik.zemin(Matematik.rastgele() * 9000 + 1000);
konsol.log (OTP);
 setOTP(OTP);
 setEmail (userEmail);
 eksen.post(" http://localhost: 5000/e-posta gönder", {
 OTP,
 alıcı_e-posta: kullanıcıE-postası,
 })
 .Daha sonra(() => sayfa ayarla("otp"))
 .yakalamak(konsol.kayıt);
 } başka {
 uyarı("Bu e-postaya sahip kullanıcı mevcut değil!");
konsol.log (yanıt.veri.mesaj);
 }}).yakalamak(konsol.kayıt);
 } başka {
 uyarı("Lütfen E-postanızı girin");
 }}

Bu kod, kullanıcının e-posta adresine Tek Kullanımlık Parola (OTP) gönderen bir işlev oluşturur. OTP'yi oluşturup göndermeden önce veritabanındaki e-postalarını kontrol ederek kullanıcıyı doğrular. Son olarak, kullanıcı arayüzünü OTP sayfasıyla günceller.

Oturum açma JSX form öğesini oluşturmak için kod ekleyerek oturum açma bileşenini tamamlayın:

geri dönmek (


Giriş yap/h2>







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


 Şifre:
"şifre" />

Bir OTP Doğrulama Bileşeni Oluşturun

Bir kullanıcı tarafından girilen bir kodun geçerliliğini sağlamak için e-postalarına gönderilen kodla karşılaştırmanız gerekir.

Yeni bir tane oluştur bileşenler/OTPInput.js dosyasını açın ve şu kodu ekleyin:

içe aktarmak Tepki, { useState, useContext, useEffect } itibaren"tepki";
içe aktarmak { RecoveryContext } itibaren"../Uygulama";
içe aktarmak eksenler itibaren"eksen";
içe aktarmak"./global.component.css";
ihracatvarsayılanişlevOTP Girdisi() {
sabit { e-posta, otp, setPage } = useContext (RecoveryContext);
sabit [OTPinput, setOTPinput] = useState( "");
işlevdoğrulamaOTP() {
eğer (ayrıştırma(OT Girişi) otp) {
 sayfa ayarla("Sıfırla");
 } başka {
 uyarı("Girdiğiniz kod doğru değil, linki tekrar göndermeyi deneyiniz");
 }
 }

Kod, kullanıcıların OTP kodlarını doğruladıkları bir React bileşeni oluşturur. Girilen kodun bağlam nesnesinde saklanan kodla eşleşip eşleşmediğini kontrol eder. Geçerliyse, parola sıfırlama sayfasını görüntüler. Tersine, kullanıcıdan tekrar denemesini veya OTP'yi yeniden göndermesini isteyen bir uyarı gösterir.

Buradaki kodu kontrol edebilirsiniz havuz OTP'leri yeniden göndermek için bir işlev ve OTP kodu için bir son kullanma zamanlayıcısı uygular.

Son olarak, giriş JSX öğelerini işleyin.

geri dönmek (


E-posta Doğrulaması</h3>




E-postanıza bir doğrulama kodu gönderdik.</p>




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

Parolayı Sıfırla Bileşenini Oluşturun

Yeni bir tane oluştur bileşenler/Reset.js dosyasını açın ve şu kodu ekleyin:

içe aktarmak Tepki, {useState, useContext} itibaren"tepki";
içe aktarmak { RecoveryContext } itibaren"../Uygulama";
içe aktarmak eksenler itibaren"eksen";
içe aktarmak"./global.component.css";
ihracatvarsayılanişlevSıfırla() {
sabit [şifre, setPassword] = useState("");
sabit { setPage, email } = useContext (RecoveryContext);


işlevşifre değiştir() {
eğer (şifre) {
denemek {
 eksen.put(" http://localhost: 5000/güncelleme-şifre", {
 e-posta: e-posta,
 yeniŞifre: şifre,
 }).Daha sonra(() => sayfa ayarla("giriş yapmak"));


geri dönmek uyarı("Şifre başarıyla değiştirildi, lütfen giriş yapın!");
 } yakalamak (hata) {konsol.log (hata);}}
geri dönmek uyarı("Lütfen yeni şifrenizi giriniz");
 }
geri dönmek (


 Şifreyi Değiştir </h2>






 Yeni Şifre: 
 tür="şifre"
 yer tutucu="..."
 gerekli=""
 değer={şifre}
 onChange={(e) => setPassword (e.target.value)} />

Bu kod, kullanıcıların yeni bir parola girmesine izin veren bir form oluşturur. Kullanıcı gönder düğmesine tıkladığında, veritabanındaki parolasını güncellemesi için sunucuya bir istek gönderir. İstek başarılı olursa kullanıcı arayüzünü güncelleyecektir.

App.js Bileşeninizi Güncelleyin

src/App.js dosyanızda aşağıdaki değişiklikleri yapın:

içe aktarmak { useState, createContext } itibaren"tepki";
içe aktarmak Giriş yapmak itibaren"./bileşenler/Giriş";
içe aktarmak OTP Girdisi itibaren"./bileşenler/OTPInput";
içe aktarmak Sıfırla itibaren"./bileşenler/Sıfırla";
içe aktarmak"./Uygulama.css";
ihracatsabit RecoveryContext = createContext();
ihracatvarsayılanişlevUygulama() {
sabit [sayfa, setPage] = kullanımDevlet("giriş yapmak");
sabit [email, setEmail] = useState("");
sabit [otp, setOTP] = kullanımDevlet("");


işlevGezinme Bileşenleri() {
eğer (sayfa "giriş yapmak") geri dönmek<Giriş yapmak />;
eğer (sayfa "otp") geri dönmek<OTP Girdisi />;
eğer (sayfa "Sıfırla") geri dönmek<Sıfırla />;
 }
geri dönmek (
"Uygulama başlığı"> 
 değer={{ sayfa, setPage, otp, setOTP, e-posta, setEmail }}>



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

Bu kod, kullanıcının e-postasını, OTP kodunu ve uygulama içindeki çeşitli sayfaları içeren, uygulamanın durumunu yöneten bir bağlam nesnesini tanımlar. Temel olarak bağlam nesnesi, gerekli durumların farklı bileşenler arasında iletilmesini mümkün kılar; bu, donanım kullanımına bir alternatiftir.

Ayrıca, tüm bileşenleri yeniden oluşturmaya gerek kalmadan sayfada gezinmeyi kolaylıkla gerçekleştiren bir işlev içerir.

Bir Express.js Sunucusu Kurun

İstemci kurulumuyla, parola sıfırlama işlevini işlemek için bir arka uç kimlik doğrulama hizmeti yapılandırın.

Başlamak, bir Express web sunucusu oluşturun, ve şu paketleri kurun:

npm kurulum kors dotenv nodemailer firavun faresi

Sonraki, bir MongoDB veritabanı oluşturun veya bulutta bir MongoDB kümesi yapılandırın. Ardından sağlanan bağlantı dizesini kopyalayın, kök dizinde bir ENV dosyası oluşturun ve bağlantı dizesini yapıştırın.

Bitirmek için veritabanı bağlantısını yapılandırmanız ve kullanıcı verileriniz için veri modellerini tanımlamanız gerekir. için bu depodaki kodu kullanın. veritabanı bağlantısını kurmak Ve veri modellerini tanımlayın.

API Yollarını Tanımlayın

Bir arka uç hizmeti, ideal olarak, istemcilerin HTTP isteklerini işleyen birkaç yola sahiptir. Bu durumda, React istemcisinden e-posta gönderme, e-posta doğrulama ve güncelleme-şifre API isteklerini yönetecek üç yol tanımlamanız gerekir.

Kök dizinde userRoutes.js adlı yeni bir dosya oluşturun ve aşağıdaki kodu ekleyin:

sabit ifade = gerekmek('ifade etmek');
sabit yönlendirici = ekspres. Yönlendirici();
sabit userControllers = gerekmek('../kontrolörler/kullanıcıKontrolcüler');
yönlendirici.get('/E-Postanı kontrol et', userControllers.checkEmail);
yönlendirici.put('/Şifreyi güncelle', userControllers.updatePassword);
yönlendirici.post('/eposta gönder', userControllers.sendEmail);
modül.export = yönlendirici;

API Yolları için Denetleyiciler

Denetleyiciler, istemcilerin HTTP isteklerini işlemekten sorumludur. Bir müşteri belirli bir API yoluna istekte bulunduğunda, isteği işlemek ve uygun bir yanıt döndürmek için bir denetleyici işlevi çağrılır ve yürütülür.

Yeni bir tane oluştur controllers/userControllers.js dosyasını açın ve aşağıdaki kodu ekleyin.

için bu depodaki kodu kullanın. e-posta doğrulaması ve güncelleme şifresi için denetleyicileri tanımlayın API yolları.

E-posta gönderme denetleyicisini tanımlayarak başlayın:

export.sendEmail = (talep, res) => {
sabit taşıyıcı = nodemailer.createTransport({
 hizmet: "gmail",
 güvenli: doğru,
 yetki: {
 kullanıcı: process.env. MY_EMAIL,
 geçiş: process.env. APP_PASSWORD,
 },
 });
sabit { alıcı_e-posta, OTP } = req.body;


sabit mailOptions = {
itibaren: süreç.env. MY_EMAIL,
 alıcı_e-posta,
 ders: 'PAROLA SIFIRLAMA',
 HTML: `


Şifre Kurtarma</h2>




Kullanmak Bu Parolanızı sıfırlamak için OTP. OTP geçerli için1 dakika</p>


${OTP}</h3>
 </body>
 </html>`,
 };
 transporter.sendMail (mailOptions, (hata, bilgi) => {
eğer (hata) {
konsol.log (hata);
 res.status(500).Göndermek({ İleti: "E-postayı yollar iken bir sorun oluştu" });
 } başka {
konsol.kayıt('E-posta gönderildi: ' + bilgi.yanıt);
 res.status(200).Göndermek({ İleti: "E-posta başarıyla gönderildi" });
 }
 });
};

Bu kod, belirli bir alıcıya OTP sıfırlamalı bir e-posta göndermek için Nodemailer kullanan bir işlevi tanımlar. Kendi Gmail hesabınızı ve şifrenizi kullanarak bir taşıyıcı kurar.

Gmail uygulama şifrenizi almak için yapmanız gerekenler Google hesabı ayarlarınızda bir uygulama şifresi oluşturun. Nodemailer'ın kimliğini doğrulamak için bu şifreyi normal Gmail şifreniz yerine kullanacaksınız.

Sunucu Giriş Noktasını Yapılandırın

Kök dizinde bir server.js dosyası oluşturun ve şu kodu ekleyin:

sabit ifade = gerekmek('ifade etmek');
sabit korlar = gerekmek('kors');
sabit uygulama = ekspres();
sabit bağlantı noktası = 5000;
gerekmek('dotenv').config();
sabit nodemailer = gerekmek('nodemailer');
sabit bağlantıDB = gerekmek('./utils/dbconfig');
connectDB();
app.use (express.json());
app.use (express.urlencoded({ uzatılmış: doğru }));
app.use (kors());
sabit kullanıcıYolları = gerekmek('./routes/userRoutes');
uygulama.kullan('/', kullanıcıRoutes);
app.listen (bağlantı noktası, () => {
konsol.kayıt(`Sunucu şu saatte dinliyor: http://localhost:${bağlantı noktası}`);
});

Hem istemci hem de sunucu kurulumuyla, parola işlevselliğini test etmek için geliştirme sunucularını çalıştırabilirsiniz.

Özel Parola Sıfırlama Hizmeti Oluşturma

Ücretli, önceden oluşturulmuş çözümler mevcut olsa da, uygulamanıza ve kullanıcılarına göre uyarlayarak bir parola sıfırlama sistemi oluşturmak en iyi yaklaşımdır. Saldırılar sürekli bir tehdit olduğundan, bu özelliği tasarlarken hem kullanıcı deneyimini hem de güvenliği göz önünde bulundurmalısınız.