Подход за удостоверяване на вашите потребители след период на неактивност.

Въведение…

Един от начините да подобрите сигурността на приложението си е да удостоверявате отново потребителите, когато е необходимо. В това ръководство ще внедрим функция за повторно удостоверяване на приложение от предния край, използвайки 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 имота;

  1. onIdle: функция, която се извиква, когато нашият потребител е неактивен след известно време.
  2. изчакване: период (в милисекунди) на неактивност, след който нашият потребител се обявява за неактивен (извиква се onIdle). Направихме време за изчакване 15 секунди за това ръководство, но в реално приложение времето за изчакване може да бъде 15–30 минути

useIdleTimerприема други свойства като onActive, crossTab, startManually и др., но за целта и простотата на това ръководство ще се спрем само на 2 свойства.

И накрая, в нашия index.js файл създаваме модал, който става видим, когато потребителят е бил неактивен и потребителят въвежда своята парола, за да се удостовери повторно. Ако затворят модала или презаредят страницата се извиква функцията logout.

Преминахме през лесен начин за внедряване на повторно удостоверяване във вашите уеб приложения. Трябва да разгледате документацията за реагиране на празен ход за повече информация и случаи на употреба.

Приятно кодиране!