У данашњем свету, онлајн безбедност је важнија него икад. Са толико много налога на мрежи које треба пратити, неопходно је имати јаку и јединствену лозинку за сваки од њих.

Ако правите веб локацију, још је важније да осигурате да су лозинке безбедне колико могу да буду. Можете да представите контролну листу онима који користе вашу веб локацију и да се уверите да њихова лозинка испуњава ваше захтеве пре него што је прихватите.

Научите како да примените контролну листу лозинки користећи Нект.јс.

Зашто користити контролну листу лозинки?

Постоји много разлога зашто бисте можда желели да користите контролну листу лозинки.

Прво, може вам помоћи да осигурате да су лозинке ваших корисника јаке и јединствене. Ако имате контролну листу захтева, можете бити сигурни да свака лозинка испуњава одређени стандард.

Ваши корисници вам можда неће бити захвални на томе, али ћете им учинити услугу. Подстицањем јаких лозинки, смањићете вероватноћу да ће хакер добити приступ неком од налога корисника.

Друго, контролна листа лозинки може помоћи да се пренесе осећај сигурности. Објављивањем захтева, својим корисницима говорите да озбиљно схватате безбедност лозинке.

instagram viewer

Међутим, треба да будете свесни да листа за проверу лозинки није чудесно решење за проблеме са лозинкама. У ствари, ако своје лозинке учините превише рестриктивним, можете олакшати хакерима да сузе своје опције и грубо форсирају лозинку. На крају крајева, сигурне и јединствене лозинке које корисници чувати у менаџеру лозинки су најбољи.

Како да направите контролну листу лозинки

Постоје два начина да направите контролну листу лозинки у Нект.јс. Можете користити или уграђене функције или можете користити екстерни модул.

Шта ће вам требати

Да бисте креирали контролну листу лозинки у Нект.јс, требаће вам следеће:

  • Ноде.јс је инсталиран
  • Уређивач текста
  • Пројекат Нект.јс

Метод 1: Коришћење уграђених функција

Нект.јс долази са уграђеним функцијама као што су куке и контекст. Постоје различите врсте удица коју можете користити за креирање контролне листе лозинки.

Прво направите нову датотеку у апликацији Нект.јс и дајте јој назив пассвордЦхецклист.јс. У овој датотеци можете да уносите лозинку од корисника и можете да проверите да ли лозинка испуњава услове.

увоз Реагујте, { усеСтате } из 'реаговати'
функцијаПассвордЦхецклист() {
 цонст [пассворд, сетПассворд] = усеСтате('')
конст [еррор, сетЕррор] = усеСтате(лажно)


функцијахандлеЦханге(е) {
постави лозинку(е.таргет.вредност)
 }


функцијахандлеСубмит(е) {
е.превентДефаулт()


// Захтеви за лозинку
конст захтеви = [
// Мора да има најмање 8 знакова
 лозинка.дужина >= 8,
// Мора да садржи најмање 1 велико слово
 /[A-Z]/.тест(Лозинка),
// Мора да садржи најмање 1 мало слово
 /[a-z]/.тест(Лозинка),
// Мора да садржи најмање 1 број
 /\d/.тест(Лозинка)
 ]


// Ако су сви услови испуњени, лозинка је важећа
конст исВалид = рекуирементс.евери(Боолеан)
 иф (исВалид) {
 упозорење ('Лозинка је важећа!')
 } друго {
 сетЕррор(истина)
 }
 }


повратак (
<форм онСубмит={хандлеСубмит}>
<етикета>
 Лозинка:
<улазни
 типе="Лозинка"
 вредност={лозинка}
 онЦханге={хандлеЦханге}
 />
</label>
<тип уноса="прихвати" валуе="прихвати" />
 {грешка &&<стр>Лозинка није важећа!</п>}
</form>
 )
}
извозУобичајено ПассвордЦхецклист

У горњем коду, прво морате да преузмете лозинку од корисника. То можете учинити помоћу усеСтате кука. Ова кука вам омогућава да креирате променљиву стања и функцију за ажурирање те променљиве. У овом случају, променљива стања је Лозинка а функција за његово ажурирање је постави лозинку.

Затим морате да креирате функцију за руковање слањем обрасца. Ова функција ће спречити подразумевану радњу обрасца (а то је слање обрасца) и провериће да ли лозинка испуњава услове.

Захтеви за лозинку су да мора:

  • има најмање осам знакова
  • садржи најмање једно велико слово
  • садрже најмање једно мало слово
  • садрже најмање један број

Можете користити сваки метод за проверу да ли лозинка испуњава све захтеве. Ако јесте, лозинка је важећа. У супротном, код ће приказати поруку о грешци.

Метод 3: Коришћење модула реацт-пассворд-цхецклист Модуле

Други начин да направите контролну листу лозинки у Нект.јс је коришћење реацт-пассворд-цхецклист модул. Овај модул је једноставан за коришћење и има много функција.

Прво, инсталирајте модул помоћу следеће команде:

нпм инсталирај реаговати-Лозинка-Контролна листа --сачувати

Затим увезите модул у свој пассвордЦхецклист.јс фајл:

увоз Реагујте, {усеСтате} из "реаговати"
увоз ПассвордЦхецклист из "реаг-пассворд-цхецклист"
конст Апликација = () => {
 цонст [пассворд, сетПассворд] = усеСтате("")


повратак (
<форму>
<етикета>Лозинка:</label>
<тип уноса="Лозинка" онЦханге={е => сетПассворд (е.таргет.валуе)}/>


<ПассвордЦхецклист
 правила={["минЛенгтх","специалЦхар","број","главни град"]}
 минЛенгтх={5}
 вредност={лозинка}
 />
</form>
 )
}
извозУобичајено Апликација

Овај код прослеђује пропс минЛенгтх, специалЦхар, број и капитал у ПассвордЦхецклист саставни део. Компонента ће користити ове реквизите да провери да ли лозинка испуњава захтеве.

Такође можете додати преведене поруке компоненти тако што ћете пренети поруке проп. Ови низови замењују подразумеване грешке тако да их можете користити за друге језике или варијације.

увоз Реагујте, {усеСтате} из "реаговати"
увоз ПассвордЦхецклист из "реаг-пассворд-цхецклист"
конст Апликација = () => {
 цонст [пассворд, сетПассворд] = усеСтате("")


повратак (
<форму>
<етикета>Лозинка:</label>
<тип уноса="Лозинка" онЦханге={е => сетПассворд (е.таргет.валуе)}/>


<ПассвордЦхецклист
 правила={["минЛенгтх", "специалЦхар", "број", "главни град"]}
 минЛенгтх={5}
 вредност={лозинка}
 поруке={{
 минЛенгтх: "Ла цонтрасеñа тиене мáс де 8 карактера.",
 посебанЦхар: "Ла цонтрасеñа тиене царацтерес посебно.",
 број: "Ла цонтрасеñа тиене ун нúмеро.",
 главни град: "Ла цонтрасеñа тиене уна летра маиúсцула.",
 меч: "Лас цонтрасеñкао коинциденција.",
 }}
 />
</form>
 )
}
извозУобичајено Апликација

У горњем коду, поруке проп чува алтернативне поруке о грешци. Компонента ће приказати ове поруке када лозинка не испуњава услове.

Овај метод је практичнији јер не морате да пишете код да бисте проверили да ли лозинка испуњава услове. Постоје и многе друге предности коришћења овог модула као што су:

  • Приказ јачине лозинке: реацт-пассворд-цхецклист може приказати јачину лозинке тако да корисници могу да виде колико је јака њихова лозинка.
  • Приказује се порука о грешци: реацт-пассворд-цхецклист такође може да прикаже поруку о грешци ако лозинка није важећа.
  • Стил: Не морате да додајете додатни стил на контролну листу. Модул пружа подразумевани стил који можете да користите у својој апликацији. Ако желите да додате неки додатни стил, онда можете користити нормалан ЦСС или други оквири за стилизовање као што је таилвинд ЦСС.

Побољшајте безбедност корисника помоћу листе за проверу лозинки

Јака лозинка је кључ безбедности на мрежи. Важно је имати јаку и јединствену лозинку за сваки налог на мрежи. Коришћењем контролне листе лозинки, можете бити сигурни да свака лозинка испуњава одређени стандард.

Корисници ваше апликације ће такође ценити могућност да виде јачину лозинке. На овај начин могу бити сигурни да су њихове лозинке довољно јаке. Ово ће побољшати корисничко искуство ваше апликације и такође ће побољшати безбедност корисника ваше апликације. Слично томе, можете и да потврдите обрасце у апликацији Нект.јс.