Не остављајте посетиоце сајта на миру – дозволите им да ресетују своју лозинку ако су је заборавили.
Системи за аутентификацију играју кључну улогу у обезбеђивању беспрекорног и безбедног корисничког искуства. Ток рада аутентификације обично укључује два процеса: пријављивање и пријављивање.
Како се број онлајн услуга повећава, људи креирају налоге, а сваки налог захтева јединствене акредитиве за пријаву. Међутим, ово олакшава заборављање или збуњивање акредитива за пријаву. Да бисте то решили, ваша апликација треба да имплементира функцију ресетовања лозинке која омогућава кориснику да ресетује своју лозинку на згодан и сигуран начин.
Поставите Реацт пројекат
Ток рада за поништавање лозинке можете имплементирати на различите начине – не постоји универзални стандард који би свака апликација требало да прати. Уместо тога, требало би да прилагодите приступ који одаберете да задовољи специфичне потребе ваше апликације.
Ток рада о којем ћете научити овде укључује следеће кораке:
Започети, брзо покрените Реацт пројекат. Следеће, инсталирајте Акиос, ЈаваСцрипт библиотека ХТТП захтева.
нпм инсталл акиосОвде можете пронаћи код пројекта ГитХуб спремиште.
Направите компоненту за пријаву
У директоријуму срц креирајте нови компоненте/Логин.јс датотеку и додајте следећи код. Почните тако што ћете дефинисати процес ресетовања лозинке:
увоз акиос из"аксиос";
увоз Реагујте, { усеСтате } из"реаговати";
увоз { усеЦонтект } из"реаговати";
увоз { РецовериЦонтект } из"../Апликација";
увоз"./глобал.цомпонент.цсс";извозУобичајенофункцијаПријавите се() {
конст { сетПаге, сетОТП, сетЕмаил } = усеЦонтект (РецовериЦонтект);
конст [усерЕмаил, сетУсерЕмаил] = усеСтате("");функцијасендОтп() {
ако (корисничкаЕмаил) {
акиос.гет(` http://localhost: 5000/цхецк_емаил? емаил=${усерЕмаил}`).онда((одговор) => {
ако (одговор.статус 200) {
конст ОТП = Матх.под(Матх.рандом() * 9000 + 1000);
конзола.лог (ОТП);
сетОТП(ОТП);
сетЕмаил (усерЕмаил);
акиос.пост(" http://localhost: 5000/сенд_емаил", {
ОТП,
реципиент_емаил: усерЕмаил,
})
.онда(() => сетПаге("отп"))
.улов(конзола.Пријава);
} друго {
упозорење („Корисник са овом е-поштом не постоји!“);
конзола.лог (респонсе.дата.мессаге);
}}).улов(конзола.Пријава);
} друго {
упозорење ("Молимо унесите своју е-пошту");
}}
Овај код креира функцију која шаље једнократну лозинку (ОТП) на адресу е-поште корисника. Прво верификује корисника тако што проверава његову е-пошту у бази података пре генерисања и слања ОТП-а. Коначно, ажурира кориснички интерфејс са ОТП страницом.
Довршите компоненту за пријаву додавањем кода за приказивање елемента ЈСКС обрасца за пријаву:
повратак (Логин</h2>
Лозинка:
"Лозинка" />
Направите компоненту за ОТП верификацију
Да бисте осигурали валидност кода који је унео корисник, потребно је да га упоредите са кодом који је послат на његову е-пошту.
Створити нова компоненте/ОТПИнпут.јс датотеку и додајте овај код:
увоз Реагујте, { усеСтате, усеЦонтект, усеЕффецт} из"реаговати";
увоз { РецовериЦонтект } из"../Апликација";
увоз акиос из"аксиос";
увоз"./глобал.цомпонент.цсс";извозУобичајенофункцијаОТПИнпут() {
конст { емаил, отп, сетПаге } = усеЦонтект (РецовериЦонтект);
конст [ОТПинпут, сетОТПинпут] = усеСтате( "");
функцијаверифиОТП() {
ако (парсеИнт(ОТПинпут) отп) {
сетПаге("ресетовати");
} друго {
упозорење („Код који сте унели није тачан, покушајте поново да пошаљите везу“);
}
}
Код креира Реацт компоненту у којој корисници верифицирају свој ОТП код. Проверава да ли се унети код поклапа са оним сачуваним у објекту контекста. Ако је исправан, приказује страницу за ресетовање лозинке. Насупрот томе, приказује упозорење које тражи од корисника да покуша поново или поново пошаље ОТП.
Можете проверити код у овоме репозиторијум која имплементира функцију за поновно слање ОТП-ова и тајмер истека за ОТП код.
На крају, рендерујте улазне ЈСКС елементе.
повратак (
Верификација е-поште</h3>
Послали смо верификациони код на вашу е-пошту.</p>
Креирајте компоненту Ресет Пассворд
Створити нова компоненте/Ресет.јс датотеку и додајте овај код:
увоз Реагујте, {усеСтате, усеЦонтект} из"реаговати";
увоз { РецовериЦонтект } из"../Апликација";
увоз акиос из"аксиос";
увоз"./глобал.цомпонент.цсс";извозУобичајенофункцијаРесетовати() {
конст [пассворд, сетПассворд] = усеСтате("");
конст { сетПаге, емаил } = усеЦонтект (РецовериЦонтект);функцијапромени лозинку() {
ако (Лозинка) {
покушати {
акиос.пут(" http://localhost: 5000/упдате-пассворд", {
емаил: емаил,
нова лозинка: лозинка,
}).онда(() => сетПаге("Пријавите се"));повратак упозорење („Лозинка је успешно промењена, пријавите се!“);
} улов (грешка) {конзола.лог (грешка);}}
повратак упозорење („Молимо унесите своју нову лозинку“);
}
повратак (Промени лозинку </h2>
Овај код приказује образац који омогућава корисницима да унесу нову лозинку. Када корисник кликне на субмит, он ће послати захтев серверу да ажурира своју лозинку у бази података. Затим ће ажурирати кориснички интерфејс ако је захтев успешан.
Ажурирајте своју Апп.јс компоненту
Унесите промене у наставку у датотеку срц/Апп.јс:
увоз { усеСтате, цреатеЦонтект } из"реаговати";
увоз Пријавите се из"./цомпонентс/Логин";
увоз ОТПИнпут из"./цомпонентс/ОТПИнпут";
увоз Ресетовати из"./цомпонентс/Ресет";
увоз"./Апп.цсс";
извозконст РецовериЦонтект = цреатеЦонтект();извозУобичајенофункцијаАпликација() {
конст [страница, сетПаге] = усеСтате("Пријавите се");
конст [емаил, сетЕмаил] = усеСтате("");
конст [отп, сетОТП] = усеСтате("");функцијаНавигатеЦомпонентс() {
ако (страна "Пријавите се") повратак<Пријавите се />;
ако (страна "отп") повратак<ОТПИнпут />;
ако (страна "ресетовати") повратак<Ресетовати />;
}
повратак („Заглавље апликације“>
валуе={{ паге, сетПаге, отп, сетОТП, емаил, сетЕмаил }}>
</div>
</RecoveryContext.Provider>
</div>
);
}
Овај код дефинише објект контекста који управља стањем апликације, што укључује е-пошту корисника, ОТП код и различите странице унутар апликације. У суштини, објекат контекста омогућава преношење захтеваних стања између различитих компоненти – алтернатива коришћењу пропс-а.
Такође укључује функцију која са лакоћом управља навигацијом по страници без потребе за поновним приказивањем целих компоненти.
Подесите Екпресс.јс сервер
Са подешавањем клијента, конфигуришите позадинску услугу аутентификације за руковање функцијом ресетовања лозинке.
Започети, креирајте експрес веб сервер, и инсталирајте ове пакете:
нпм инсталл цорс дотенв нодемаилер монгоосеСледећи, креирајте МонгоДБ базу података или конфигуришите МонгоДБ кластер у облаку. Затим копирајте пружени низ везе, креирајте ЕНВ датотеку у основном директоријуму и налепите низ везе.
Да бисте завршили, потребно је да конфигуришете везу са базом података и дефинишете моделе података за ваше корисничке податке. Користите код у овом спремишту за подесите везу са базом података и дефинишу моделе података.
Дефинишите АПИ руте
Позадински сервис идеално има неколико рута које обрађују ХТТП захтеве клијената. У овом случају, мораћете да дефинишете три руте које ће управљати захтевима АПИ за слање е-поште, верификацију е-поште и ажурирање лозинке од Реацт клијента.
Креирајте нову датотеку под називом усерРоутес.јс у основном директоријуму и додајте следећи код:
конст екпресс = захтевају('изразити');
конст рутер = експрес. Роутер();
конст усерЦонтроллерс = захтевају('../цонтроллерс/усерЦонтроллерс');роутер.гет('/провери мејл', усерЦонтроллерс.цхецкЕмаил);
роутер.пут('/упдате-пассворд', усерЦонтроллерс.упдатеПассворд);
роутер.пост('/шаљи имејл', усерЦонтроллерс.сендЕмаил);
модул.екпортс = рутер;
Контролери за АПИ руте
Контролори су одговорни за обраду ХТТП захтева клијената. Једном када клијент упути захтев одређеној АПИ рути, функција контролера се позива и извршава да обради захтев и врати одговарајући одговор.
Створити нова цонтроллерс/усерЦонтроллерс.јс датотеку и додајте код испод.
Користите код у овом спремишту за дефинише контролере за верификацију е-поште и лозинку за ажурирање АПИ руте.
Почните тако што ћете дефинисати контролер слања е-поште:
екпортс.сендЕмаил = (рек, рес) => {
конст транспортер = нодемаилер.цреатеТранспорт({
услуга: 'Гмаил',
сигуран: истина,
аутх: {
корисник: процесс.енв. МИ_ЕМАИЛ,
проћи: процес.енв. АПП_ПАССВОРД,
},
});конст { реципиент_емаил, ОТП } = рек.боди;
конст маилОптионс = {
из: процесс.енв. МИ_ЕМАИЛ,
на: реципиент_емаил,
предмет: 'РЕСЕТОВАЊЕ ЛОЗИНКЕ',
хтмл: `Опоравак лозинке</h2>
Користите ово ОТП за ресетовање лозинке. ОТП је валидан за1 минута</p>
${ОТП}</h3>
</body>
</html>`,
};
транспортер.сендМаил (маилОптионс, (грешка, инфо) => {
ако (грешка) {
конзола.лог (грешка);
рес.статус(500).сенд({ порука: „Дошло је до грешке при слању е-поште“ });
} друго {
конзола.Пријава('Емаил послат: ' + инфо.респонсе);
рес.статус(200).сенд({ порука: „Е-пошта је успешно послата“ });
}
});
};
Овај код дефинише функцију која користи Нодемаилер за слање е-поште са ОТП ресетовањем одређеном примаоцу. Поставља транспортер користећи ваш сопствени Гмаил налог и лозинку.
Да бисте добили лозинку за апликацију Гмаил, потребно је генеришете лозинку за апликацију у подешавањима Гоогле налога. Затим ћете користити ову лозинку уместо своје обичне Гмаил лозинке за аутентификацију Нодемаилер-а.
Конфигуришите улазну тачку сервера
Направите сервер.јс датотеку у основном директоријуму и додајте овај код:
конст екпресс = захтевају('изразити');
конст цорс = захтевају('цорс');
конст апп = екпресс();
конст порт = 5000;
захтевају('дотенв').цонфиг();
конст нодемаилер = захтевају('нодемаилер');
конст цоннецтДБ = захтевају('./утилс/дбцонфиг');
цоннецтДБ();
апп.усе (екпресс.јсон());
апп.усе (екпресс.урленцодед({ продужени: истина }));
апп.усе (цорс());
конст усерРоутес = захтевају('./роутес/усерРоутес');
апп.усе('/', усерРоутес);
апп.листен (порт, () => {
конзола.Пријава(`Сервер слуша http://localhost:${порт}`);
});
Када су и клијент и сервер подешени, можете покренути развојне сервере да бисте тестирали функционалност лозинке.
Изградња прилагођене услуге ресетовања лозинке
Креирање система за ресетовање лозинке тако што ћете га прилагодити вашој апликацији и њеним корисницима је најбољи приступ, иако постоје плаћена, унапред изграђена решења. Приликом дизајнирања ове функције, требало би да узмете у обзир и корисничко искуство и безбедност, пошто су напади стална претња.
