Подход за удостоверяване на вашите потребители след период на неактивност.
Въведение…
Един от начините да подобрите сигурността на приложението си е да удостоверявате отново потребителите, когато е необходимо. В това ръководство ще внедрим функция за повторно удостоверяване на приложение от предния край, използвайки react-idle-timer
библиотека, за да открием кога потребителят е бил неактивен след известно време. За това ръководство настройката за удостоверяване ще бъде просто localStorage
.
React-idle-timerе javascript библиотека, използвана за откриване и наблюдение на потребителската активност във вашето уеб приложение. Ще го използваме за това приложение, стартирайте yarn add react-idle-timer
, за да инсталирате във вашето хранилище.
Приложението.
Нашето приложение Nextjs ще има 2 страници, а именно login.js
и index.js
. login.js
ще съдържа изгледа и логиката за влизане, докато index.js
ще съдържа нашия екран „табло за управление“ и логиката за повторно удостоверяване.
В login.js
ще създадем прост формуляр за влизане и функция за влизане, която записва случаен токен в localStorage
и пренасочва към нашата страница index.js
.
За това ръководство само бутонът на формуляра е наистина функционален, но се уверете, че въведените от вас формуляри са функционални и във вашето приложение.
Следва нашата страница index.js
, където е внедрена функцията за повторно удостоверяване.
Импортираме useIdleTimer
кука от react-idle-timer
и я наричаме предаване в някои свойства.
const { isIdle } = useIdleTimer({ onIdle, timeout: 15000 });
Преминаваме 2 имота;
- onIdle: функция, която се извиква, когато нашият потребител е неактивен след известно време.
- изчакване: период (в милисекунди) на неактивност, след който нашият потребител се обявява за неактивен (извиква се onIdle). Направихме време за изчакване 15 секунди за това ръководство, но в реално приложение времето за изчакване може да бъде 15–30 минути
useIdleTimer
приема други свойства като onActive, crossTab, startManually и др., но за целта и простотата на това ръководство ще се спрем само на 2 свойства.
И накрая, в нашия index.js
файл създаваме модал, който става видим, когато потребителят е бил неактивен и потребителят въвежда своята парола, за да се удостовери повторно. Ако затворят модала или презаредят страницата се извиква функцията logout
.
Преминахме през лесен начин за внедряване на повторно удостоверяване във вашите уеб приложения. Трябва да разгледате документацията за реагиране на празен ход за повече информация и случаи на употреба.
Приятно кодиране!