Пошаговое руководство по созданию проверки паролей в React.js
Введение
Сломанная атака аутентификации — одна из самых вирусных атак уязвимостей веб-приложений. Атаки со сломанной аутентификацией могут происходить по-разному, кроме того, существуют различные факторы и лазейки в веб-приложении, которые могут сделать его уязвимым для этой атаки, и предоставление пользователям возможности использовать слабые и легко угадываемые пароли является важным фактором.
Это позволяет злоумышленникам легко получить доступ к учетным записям со слабыми учетными данными пароля, угадывая и используя метод заполнения учетных данных.
Поэтому важно установить средство проверки пароля, чтобы убедиться, что пароль, предоставленный пользователями при регистрации, достаточно надежен.
В этом руководстве мы создадим приложение React, которое использует средство проверки сложности пароля, чтобы пользователи не могли создавать учетные записи со слабыми паролями.
Мы также интегрируем в наше приложение индикатор выполнения, который будет указывать пользователю надежность пароля.
В конце этого руководства вы поймете требования для создания защищенного приложения React, которое защищает от взлома аутентификации.
Предпосылки
Чтобы следовать этому руководству, вам понадобится следующее:
- Установите на свой компьютер стабильную версию Node.js. Если на вашем компьютере нет Node.Js.
- Базовые знания React.Js, такие как создание нового проекта React, изменение проекта React и создание компонентов. По крайней мере, вы должны знать, как запустить приложение React.js и как создавать формы с помощью React.js.
Шаг 1 — Установка необходимых пакетов и зависимостей
На этом шаге вы собираетесь установить все пакеты и зависимости, необходимые для создания и оформления вашего приложения.
Вам нужно будет установить и использовать Bootstrap для стилизации индикатора выполнения пароля. Вам также необходимо установить форму реакции-хука. Этот конкретный пакет поможет реализовать правила проверки сложности пароля, которые предотвратят создание учетной записи, если пароль пользователя слабый. Затем вам также понадобится tailwindcss для стилизации приложения, а затем, наконец, вам нужно будет установить значки реакции. Пакет react-icons добавит значки в вашу форму и сделает ее более красивой и формальной.
Вы можете начать с установки значков реакции и формы реакции-хука с помощью следующей команды:
npm install react-icons react-hook-form #OR yarn add react-icons react-hook-form
Приведенная выше команда установит пакеты react-icons и react-hook-form в ваше приложение.
После завершения установки вы должны увидеть что-то вроде этого на экране терминала:
added 2 packages, and audited 1474 packages in 6s 232 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details.
Теперь вы можете установить пакет tailwindcss. Чтобы установить tailwindcss в ваше приложение react.js, вам необходимо выполнить следующие шаги:
Во-первых, вам нужно установить пакет из npm с помощью следующей команды:
npm install -D tailwindcss
Приведенная выше команда установит tailwindcss как devDependency. После завершения процесса установки вы должны увидеть что-то вроде этого на экране терминала.
up to date, audited 1474 packages in 3s 232 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details.
Теперь вы можете создать файл tailwind.config.js с помощью следующей команды:
npx tailwindcss init
Приведенная выше команда даст следующий ответ на экране терминала:
Created Tailwind CSS config file: tailwind.config.js
Он также создаст для вас файл tailwind.config.js. Если вы проверите корень вашего проекта, вы увидите файл tailwind.config.js.
Следующим шагом, который вы можете сделать, является добавление путей ко всем вашим файлам шаблонов в файл tailwind.config.js, который вы только что создали, добавив приведенный ниже код в файл tailwind.config.js:
/** tailwind.config.js*/
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Приведенный выше код настроит попутный ветер для реализации всех изменений, происходящих внутри любого файла в папке src с расширением .js, .jsx, .ts или .tsx.
Затем, наконец, вам нужно добавить директивы @tailwind в ваш файл index.css с кодами ниже:
/** index.css*/ @tailwind base; @tailwind components; @tailwind utilities;
С помощью этих шагов вы успешно установили и настроили tailwindcss для своего приложения.
Теперь вам также нужно установить и настроить Bootstrap для вашего приложения. Запустите команду ниже, чтобы установить Bootstrap:
npm install bootstrap #OR yarn add bootstrap
Приведенная выше команда установит в ваш проект самую последнюю версию Bootstrap из npm.
После успешной и полной установки вы должны получить ответ, аналогичный приведенному ниже, на экране терминала:
added 2 packages, and audited 1476 packages in 4s 234 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details.
Теперь вы можете импортировать Bootstrap в файл index.js, который является входным файлом вашего проекта.
Добавьте приведенный ниже код в файл index.js вашего проекта:
/** index.js */ import "bootstrap/dist/css/bootstrap.min.css";
Приведенный выше код импортирует пакет Bootstrap CSS в ваше приложение, и вы можете использовать Bootstrap в любом месте вашего приложения.
На этом вы выполнили шаг 1 и установили все пакеты, необходимые для этого проекта.
Чтобы убедиться, что все установлено правильно, вы можете открыть файл package.json вашего проекта. В разделе зависимостей вы увидите значки реакции, формы реакции-хука и Bootstrap:
/** package.json*/
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.43.0",
"react-icons": "^4.7.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Если вы заглянете в раздел devDependencies, вы увидите tailwindcss:
/**package.json*/
"devDependencies": {
"tailwindcss": "^3.2.4"
}
Шаг 2 — Создание формы регистрации пользователя
На этом шаге вы создадите форму регистрации, которая будет иметь два поля ввода. В первом поле будет собран пароль пользователя, а во втором поле пользователю будет предложено повторно ввести созданный им пароль, чтобы подтвердить то, что он ввел в первом поле.
Итак, создайте папку в папке “src” вашего проекта и назовите ее Components. Внутри папки Components вы создадите файл и назовете его LoginForm.js. Файл LoginForm.js будет содержать регистрационную форму.
Вы можете начать с создания компонента LoginForm внутри файла LoginForm.js с помощью кода ниже:
/**LoginForm.js */
import React from 'react'
const LoginForm = () => {
return (
<div>
</div>
)
}
export default LoginForm
Теперь вам нужно импортировать компонент LoginForm в ваш файл App.js . Используйте приведенный ниже код, чтобы импортировать и вернуть компонент LoginForm внутри файла App.js:
/**App.js*/
import LoginForm from "./Components/LoginForm";
function App() {
return (
<LoginForm/>
);
}
export default App;
Затем вы создадите форму с полем ввода для сбора паролей пользователей внутри файла LoginForm.js с кодом ниже:
/**LoginForm.js*/
......
const LoginForm = () => {
return (
<React.Fragment>
<section>
<form>
<div
className='bg-black w-auto h-96 mt-20 rounded-lg mx-5'
>
{/** Header */}
<div
className='flex items-center justify-center h-32'
>
<p
className='text-white uppercase text-4xl font-bold text-center'
>
Sign-Up To Create an Account
</p>
</div>
{/** Body */}
<div>
<div className='mx-5 '>
{/** Password creation field */}
<div className='relative'>
<input
type="password"
placeholder='enter a strong passwod...'
className='w-full rounded-lg h-10'
/>
<p className='text-white'>Error</p>
</div>
</div>
</div>
</div>
</form>
</section>
</React.Fragment>
)
}
export default LoginForm
Со строки 6 по строку 39 приведенного выше кода вы создали форму с одним полем ввода. В строке 19 вы добавили заголовок для своей формы, а затем использовали tailwindcss для его стилизации, код со строки 16 по строку 20 создаст поле ввода с заполнителем и типом пароля, а также стилизовано с использованием tailwindcss.
Затем в строке 32 вы добавили сообщение об ошибке, которое будет уведомлять пользователя, когда он предоставляет слабые учетные данные, которые противоречат вашим правилам создания пароля. На данный момент это сообщение об ошибке все еще жестко запрограммировано.
Вам нужно улучшить взаимодействие с пользователем, добавив функцию, которая будет либо показывать пользователям их пароль при вводе, либо скрывать их, в зависимости от их выбора.
Для этого вам нужно импортировать две иконки из пакета react-icons, который вы установили ранее.
Первый значок появится, если пользователь хочет скрыть свой пароль, а второй значок появится, если он хочет показать свой пароль. Итак, импортируйте эти значки из значков реакции, добавив приведенный ниже код внутри компонента LoginForm:
/**LoginForm.js*/
import {AiFillEyeInvisible, AiFillEye} from 'react-icons/ai'
const LoginForm = () => {
return (
<React.Fragment>
.......
{/** Password view or hide */}
<div className='text-2xl absolute top-2 right-5'>
<AiFillEyeInvisible/>
<AiFillEye/>
</div>
........
</form>
</React.Fragment>
)
}
export default LoginForm
С помощью приведенного выше кода вы импортировали значки AiFillEyeInvisible и AiFillEye из react-icons/ai в строку 3. Затем вы добавили значки в поле формы с кодом из строки 11 в строку 14.
Следующая функция, которую вам нужно добавить в поле формы, — сделать пароль видимым или скрытым, для этого вам нужно создать state с useState, а затем использовать это state, чтобы создать условие для отображения или скрытия пароля.
Добавьте следующий код в компонент LoginForm, чтобы добавить эту функцию в поле ввода:
/**LoginForm.js*/
import React, {useState} from 'react'
import {AiFillEyeInvisible, AiFillEye} from 'react-icons/ai'
const LoginForm = () => {
{/** Show or hide Password state */}
const [showPassword, setShowPassword] = useState(false)
{/** Show Password onClick events */}
const handleShowPassword = () => {
setShowPassword(!showPassword)
}
.......
<div className='relative'>
<input
type={(showPassword === false)? 'password' : 'text'}
placeholder='enter a strong password...'
className='w-full rounded-lg h-10'
/>
<p className='text-white'>Error</p>
{/** Password view or hide */}
<div className='text-2xl absolute top-2 right-5'>
{
(showPassword == false)?
<AiFillEyeInvisible onClick={handleShowPassword}/>:
<AiFillEye onClick={handleShowPassword}/>
}
</div>
</div>
..........
)
}
export default LoginForm
В приведенном выше коде вы импортировали хук useState из ‘react’, а затем использовали его для создания состояния showPassword с начальным значением false в строке 8, а также создали функцию setShowPassword, которая сбросит значение состояния showPassword.
Затем от строки 10 до строки 12 вы создали функцию handleShowPassword, которая установит состояние showPassword в предыдущее значение. То есть, если состояние было установлено на true до того, как эта функция установит его на false, а если оно было false, то оно установит его на true.
Теперь в строке 16 вы использовали значение состояния showPassword для установки типа поля ввода. Итак, если значение состояния showPassword равно false, то тип поля ввода будет "password", что означает, что пользователи не будут видеть, что они печатают, но если значение равно true, то тип ввода будет text.
Наконец, от строки 23 до строки 27 вы использовали оператор ternary для отображения значка AiFillEyeInvisible или AiFillEye в зависимости от значения состояния showPassword.
Если состояние showPassword равно “true” , ваш код будет отображать значок AiFillEye, а если состояние false, то ваш код будет отображать значок AiFillEyeInvisible. Чтобы переключить значение состояния showPassword, вы передали функцию “handleShowPassword” событию onClick в значках AiFillEye и AiFillEyeInvisible .
Чтобы завершить этот раздел, давайте создадим еще одно поле ввода. Это поле ввода будет использоваться для подтверждения пароля. Добавьте приведенный ниже код к компоненту LoginForm в файле LoginForm.js :
/**LoginForm.js*/
........
{/** Password view or hide */}
<div className='text-2xl absolute top-2 right-5'>
{
(showPassword == false)?
<AiFillEyeInvisible onClick={handleShowPassword}/>:
<AiFillEye onClick={handleShowPassword}/>
}
</div>
</div>
{/** Confirm Password creation field */}
<div className='relative'>
<input
type='password'
placeholder='confirm your password'
className='w-full rounded-lg h-10'
/>
<p className='text-white'>Error</p>
</div>
{/** Submit Button */}
<div className='flex items-center justify-center'>
<input
type="submit"
value="submit"
className='h-10 w-2/5 text-white rounded-lg font-bold bg-red-900'
/>
</div>
...........
С помощью приведенного выше кода вы создали поле для подтверждения пароля. Это тот же код, что и поле для сбора паролей, просто в этом случае вы жестко кодируете тип ввода как password.
Затем со строки 23 по строку 29 вы создали кнопку отправки. Сохраните файл LoginForm.js и запустите приложение с помощью:
npm start
Откройте свое приложение в любом браузере по вашему выбору, вы должны увидеть форму входа. На этом мы закончили создание формы регистрации. Теперь мы можем перейти к шагу 3 — созданию индикатора выполнения.
Шаг 3. Установите индикатор сложности пароля
В этом разделе вы создадите индикатор выполнения под полем password, который будет указывать на силу password пользователя.
Индикатор выполнения должен иметь возможность менять цвет и длину, когда пароль становится более сложным.
Например, если пользователь вводит только числа, индикатор выполнения должен иметь определенный цвет и длину, если они усложняют его, добавляя строчные буквы, тогда длина индикатора выполнения должна увеличиваться, а цвет также должен изменяться.
Чтобы добавить индикатор выполнения в свой проект, создайте файл в папке Components и назовите его ProgressBar.js. Внутри файла ProgressBar.js создайте индикатор выполнения с кодом ниже:
/**./Components/ProgressBar.js*/
import React from 'react'
const ProgressBar = () => {
return (
<>
<div className='progress'>
<div className='progress-bar'
style={{
width:"70%",
background:'red'
}}></div>
</div>
</>
)
}
export default ProgressBar
С помощью приведенного выше кода вы создали компонент ProgressBar и внутри этого компонента и создали индикатор выполнения с помощью Bootstrap. Затем вы придали ему встроенный стиль и жестко запрограммировали ширину индикатора выполнения, а также установили красный цвет фона.
Импортируйте компонент ProgressBar внутрь файла LoginForm.js, а затем визуализируйте его в компоненте LoginForm с помощью приведенного ниже кода:
/**Components/LoginForm.js*/
.......
import ProgressBar from './ProgressBar'
const LoginForm = () => {
.......
<div className='relative'>
<input
type={(showPassword === false)? 'password' : 'text'}
placeholder='enter a strong password...'
className='w-full rounded-lg h-10'
/>
<ProgressBar />
<p className='text-white'>Error</p>
...........
Сохраните файлы LoginForm.js и ProgressBar.js, откройте браузер, вы должны увидеть индикатор выполнения под полем пароля.
Теперь вы можете сделать ширину и цвет прогресса динамическими, чтобы они менялись в зависимости от сложности пароля пользователя. Поэтому измените свой ProgressBarcomponent, чтобы иметь код ниже
/**ProgressBar.js*/
import React from 'react'
const ProgressBar = () => {
const setProgressBar = () =>({
width: '75%',
background: 'red',
height:'7px'
})
return (
<>
<div className='progress' style={{height: '7px'}}>
<div className='progress-bar'
style={setProgressBar()}></div>
</div>
</>
)
}
export default ProgressBar
С помощью приведенного выше кода вы создали функцию с именем setProgressBar и передали ей свойства width, height и background. Теперь функция при вызове будет давать индикатору выполнения все эти свойства. В строке 15 вы вызвали эту функцию и использовали ее для применения стилей к индикатору выполнения.
Чтобы сделать ширину и цвет индикатора выполнения динамическими, чтобы они менялись в зависимости от сложности пароля пользователя, вам нужно определить несколько регулярных выражений, а затем использовать эти регулярные выражения для создания функции, которая будет изменять ход выполнения. цвет бара.
Но перед этим вам также нужно создать состояние пароля в компоненте LoginForm и передать его в качестве реквизита компоненту ProgressBar, так как поле ввода пароля находится в компоненте LoginForm. Добавьте приведенный ниже код в the LoginForm.js file:
/**Components/LoginForm.js*/
..........
const LoginForm = () => {
/** Show or hide Password state */
const [showPassword, setShowPassword] = useState(false)
/** Password state */
const [password, setPassword ]= useState('')
..............
<div className='mx-5 '>
{/** Password creation field */}
<div className='relative'>
<input
type={(showPassword === false)? 'password': 'text'}
placeholder='enter a strong password...'
className='w-full rounded-lg h-10'
onChange={e => setPassword(e.target.value)}
/>
<ProgressBar password={password}/>
<p className='text-white'>Error</p>
...............
С помощью приведенного выше кода вы создали состояние password и функцию setPassword с хуком useState, затем в строке 18 вы использовали событие onChange, чтобы установить значение состояния password для пользовательского ввода. Затем вы, наконец, передали состояние пароля в качестве реквизита компоненту ProgressBar.
При этом вы можете деструктурировать свойства password в компоненте ProgressBar и использовать его для своего шаблона регулярного выражения. Поэтому измените файл ProgressBar.js, чтобы он содержал следующий код:
/**Components/ProgressBar.js*/
import React from 'react'
const ProgressBar = ({password}) => {
const pattern1 =/(?=.*[a-z])/
const pattern2 = /(?=.*[a-z])(?=.*[A-Z])/
const pattern3 = /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/
const pattern4 = /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[@!_%&*])/
const result1 = pattern1.test(password)
const result2 = pattern2.test(password)
const result3 = pattern3.test(password)
const result4 = pattern4.test(password)
let num;
if(result1 === true){
num = 25
}if(result2 === true){
num = 50
}if(result3 === true){
num = 75
}if(result4 === true){
num = 100
}
const ProgressBarColor = ()=>{
switch(num){
case 0:
return "#FFFFFF"
case 25:
return "#FF0000"
case 50:
return '#ffa500'
case 75:
return '#90EE90'
case 100:
return "#00FF00"
default:
return 'none'
}
}
const setProgressBar = () =>({
width: `${num}%`,
background: ProgressBarColor(),
height:'7px'
})
...............
По сути, вы деструктурировали реквизит password, а затем создали 4 шаблона регулярных выражений.
Первый шаблон проверяет, есть ли в password строчная буква, второй шаблон проверяет, есть ли в password прописная и строчная буквы вместе, третий шаблон проверяет, есть ли в password строчная буква, прописная буква и цифра, затем, наконец, четвертый шаблон проверит, содержит ли password строчную букву, прописную букву, цифру и какой-либо специальный символ.
Затем вы использовали метод test( ) для проверки свойства password с этими шаблонами. Таким образом, в строке 12 вы проверяли password на наличие строчной буквы, в строке 13 вы проверяли password на наличие строчной и прописной букв, в строке 14 вы проверяли, имеет ли password строчную и прописную буквы. и число, то в строке 15 вы проверили password , если оно содержит строчную букву, прописную букву, цифру и специальный символ.
Теперь в строке 16 вы объявили переменную с именем num. Значение переменной num будет определяться способностью password передавать каждый test. От строки 18 до строки 26 вы использовали if условный оператор, чтобы узнать, соответствует ли password test, а затем присвоить значение переменной num.
Таким образом, if блок из строк 18-20 присвоит значение 25 переменной num, если password имеет строчную букву, а if блок из строки 20-22 присвоит значение 50 переменной num, если password имеет строчную букву. буква и заглавная буква, if блок от строки 22 до строки 24 присвоит переменной num значение 75, если password содержит строчную букву, прописную букву и цифру, то if блок от строки 24 до строки 26 присвоит переменной num значение 100, если password содержит строчную букву, прописную букву, цифру и специальный символ.
Теперь со значением этой переменной num вы создали функцию, которая изменит цвет индикатора выполнения.
Внутри этой функции вы используете оператор условия switch, чтобы установить цвет индикатора выполнения на основе значения num. Таким образом, если переменная num равна 25, индикатор выполнения должен иметь красный цвет, если он равен 50, индикатор выполнения должен иметь оранжевый цвет, если он равен 75, индикатор выполнения должен иметь светло-зеленый цвет, а если он равен 100, индикатор выполнения должен быть должен иметь зеленый цвет.
Наконец, в строке 45 вы использовали значение num для установки width индикатора выполнения, а в строке 46 вы передали функцию ProgressBarColor в качестве значения для background color. Это придаст индикатору выполнения цвет, основанный на switch statement из функции.
Сохраните файлы LoginForm.js и ProgressBar.js и откройте браузер. Вы по-прежнему должны видеть свою регистрационную форму, но на этот раз цвет индикатора выполнения будет белым. Попробуйте ввести любое значение в поле пароля, вы заметите, что индикатор выполнения увеличивается в размере, а цвет меняется в зависимости от того, насколько сложны символы вашего пароля. Ваш индикатор выполнения работает нормально.
Еще одна вещь, которую вам нужно добавить, это метка для прогресса. Метка сообщит пользователю, является ли пароль слабым, очень слабым, хорошим или сложным. Поэтому добавьте приведенный ниже код в файл ProgressBar.js:
/**Components/ProgressBar.js*/
.......
const passwordStrengthLabel = () =>{
switch(num){
case 0:
return "Very weak"
case 25:
return "weak"
case 50:
return 'Good'
case 75:
return 'Complex'
case 100:
return "Very complex"
}
}
return (
<>
<div className='progress' style={{height: '7px'}}>
<div className='progress-bar'
style={setProgressBar()}></div>
</div>
<p
style={{color: ProgressBarColor() }}>
{passwordStrengthLabel()}
</p>
</>
)
}
.........
От строки 4 до строки 17 вы создали функцию passwordStrengthLabel, а затем передали ее в тег a <p> tag.
Проверьте свою форму еще раз, вы заметите, что по мере того, как пароль становится более сложным, метка меняется вместе с шириной и цветом индикатора выполнения. С этим у вас есть индикатор выполнения. Однако вы заметите, что пользователи по-прежнему могут отправлять форму, даже если они предоставляют слабый пароль, что ж, мы исправим это на следующем шаге.
Шаг 4. Установите требования к паролю для создания учетной записи.
В этом разделе вы будете использовать react-hook-form, чтобы определить, что составляет комбинацию надежных или сложных паролей. Здесь вы создадите функцию, которая будет отклонять любой пароль, не содержащий букв, цифр или специальных символов.
Итак, в файле LoginForm.js добавьте приведенный ниже код, чтобы сделать поле ввода пароля обязательным:
/**Components/LoginForm.js*/
........
import { useForm } from "react-hook-form";
const LoginForm = () => {
/** Form Submit events */
const { register, handleSubmit, watch, formState: { errors } } = useForm();
/** onSubmit events */
const onSubmit = data => alert("Welcome");
........
return (
<React.Fragment>
<section>
<form onSubmit={handleSubmit(onSubmit)}>
<div
className='bg-black w-auto h-96 mt-20 rounded-lg mx-5'
>
{/** Header */}
<div
className='flex items-center justify-center h-32'
>
<p
className='text-white uppercase text-4xl font-bold text-center'>
Sign-Up To Create an Account
</p>
</div>
{/** Body */}
<div>
<div className='mx-5 '>
{/** Password creation field */}
<div className='relative'>
<input
type={(showPassword === false)?
'password': 'text'}
placeholder='enter a strong password...'
className='w-full rounded-lg h-10'
{...register("password", { required: 'You need a strong password' })}
onChange={e => setPassword(e.target.value)}
/>
<ProgressBar password={password}/>
<p
className='text-red-600'
>
{errors.password &&
<span>{errors.password.message}</span>}
</p>
..........
Ваша форма теперь распознает поле ввода как обязательное поле, поэтому, если вы попытаетесь отправить форму, не вводя никакого значения в поле ввода, вы получите сообщение об ошибке, в котором говорится: «Вам нужен надежный пароль».
Следующим шагом является добавление правил создания пароля. Обратите внимание, что поле пароля принимает все учетные данные, но с помощью react-hook-form вы можете установить некоторые правила, которые будут определять, какой пароль пользователя должен быть до того, как он будет принят. Поэтому добавьте код ниже в поле ввода пароля:
/**LoginForm.js*/
.........
<div>
<div className='mx-5 '>
{/** Password creation field */}
<div className='relative'>
<input
type={(showPassword === false)? 'password': 'text'}
placeholder='enter a strong passwod...'
className='w-full rounded-lg h-10'
{...register("password", { required: 'You need a strong password',
pattern:{
value: /^(\S)(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[@#$%^&*()--+={}])/,
message: 'A strong password should contain at least one lowercase letter, one uppercase letter one number and a special'
},
minLength:{
value: 8,
message: 'You need to have a password with at least 8 characters'
},
})}
onChange={e => setPassword(e.target.value)}
/>
<ProgressBar password={password}/>
<p
className='text-red-500'>
{errors.password &&
<span>{errors.password.message}
</span>
}
</p>
{/** Password view or hide */}
<div className='text-2xl absolute top-2 right-5'>
{
(showPassword === false)?
<AiFillEyeInvisible onClick={handleShowPassword}/>:
<AiFillEye onClick={handleShowPassword}/>
}
</div>
</div>
........
Код со строки 13 по строку 20 устанавливает образец того, что должен содержать сложный пароль, с помощью регулярного выражения. Затем вы устанавливаете сообщение об ошибке, которое будет уведомлять пользователя, если он предоставит слабый пароль, не соответствующий шаблону.
Код со строки 17 по строку 20 устанавливает минимальную длину, необходимую для сложного пароля. Это поможет пользователям сделать свой пароль более сложным, добавив в него больше символов.
Сохраните файл и откройте браузер. Когда вы пытаетесь отправить форму без ввода какого-либо значения, вы должны получить сообщение об ошибке «Вам нужен надежный пароль», затем, если вы введете пароль, длина которого не превышает 8 символов, вы должны получить «Вам нужен пароль с не менее 8 символов».
Если вы продолжите и предоставите 8-значный пароль, а ваш пароль содержит только строчные буквы или не соответствует одному из требований. Затем вы должны получить сообщение об ошибке «Надежный пароль должен содержать хотя бы одну строчную букву, одну прописную букву, цифру и любой специальный символ».
Однако, если вы предоставите пароль, который соответствует всем этим критериям, ваш индикатор выполнения укажет это, и ваша форма будет отправлена. Вы должны увидеть предупреждение с надписью «Добро пожаловать». Теперь у вас есть поле ввода, которое проверяет сложность пароля и предоставляет доступ только к сложным паролям.
Еще одна функция, которую можно добавить в форму, — это поле «Подтвердить пароль». Прямо сейчас поле подтверждения пароля не проверяет ввод пользователя, если он совпадает с полем пароля. Добавьте следующий код в поле подтвержденного пароля внутри компонента LoginForm:
/**Components/LoginForm.js*/
return (
..............
{/** Confirm Password creation field */}
<div className='relative'>
<input
type='password'
placeholder='confirm your password'
className='w-full rounded-lg h-10'
{...register("ConfirmPassword", { required: 'Your input does not match,
validate: (value) =>
value === password || "Your inputs do not match",
})}
/>
<p className='text-red-500'>
{
errors.ConfirmPassword &&
<span>
{errors.ConfirmPassword.message}
</span>
}
</p>
</div>
Код со строки 12 по строку 16 проверяет, имеет ли поле подтвержденного пароля то же значение, что и состояние пароля. Если он не имеет того же значения, что и состояние пароля, будет выдано сообщение об ошибке «Ваши входные данные не совпадают». Затем код со строки 18 по строку 24 покажет пользователям сообщение об ошибке, если их входные данные не совпадают.
Теперь, в качестве последнего штриха, вы должны сделать невозможным копирование и вставку в поле подтверждения пароля. Добавьте приведенный ниже код в тег ввода в поле «Подтвердить пароль»:
/**LoginForm.js*/
.........
<div className='relative'>
<input
type='password'
placeholder='confirm your password'
onPaste={(e)=>{
e.preventDefault()
return false
}}
className='w-full rounded-lg h-10'
{...register("ConfirmPassword", { required: 'Your input does not match,
validate: (value) =>
value === Checkpassword || "Your inputs do not match",
})}
/>
......
Сохраните файл LoginForm.js и откройте браузер, вы должны заметить, что копирование и вставка в этом поле не работают. Вам нужно заполнить пароль самостоятельно. Причина этого заключается в том, чтобы убедиться, что пользователи уверены в пароле, который они выбирают.
Заключение
Атака Broken Authentication — это пандемия, когда речь идет об уязвимостях веб-приложений.
Некоторые из причин этой атаки можно проследить до некоторых неправильных действий пользователей, когда дело доходит до создания пароля. Некоторые пользователи используют слабые учетные данные для создания паролей для себя. Таким образом, один из способов предотвратить эту атаку — ограничить использование слабых паролей.
В этом руководстве вы просто создаете форму, которая проверяет сложность пароля пользователя и отклоняет его, если он недостаточно сложен, вы также создаете индикатор выполнения, который меняет свою ширину, цвет и метку в зависимости от сложности пароля пользователя. становится. Затем вы создаете поле пароля подтверждения, которое подтверждает пароль пользователя перед созданием учетной записи.
Вы также узнали, как использовать регулярные выражения в React.js.
