ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در Reac

رمزهای عبور معمولاً برای تأیید اعتبار کاربر در بیشتر برنامه های وب استفاده می شوند. به همین دلیل لازم است که گذرواژه‌ها به روشی ایمن ذخیره شوند. در طول سالها ، از تکنیک هایی مانند هش کردن (در هم سازی) رمز عبور یک طرفه استفاده شده است تا نمایش واقعی رمزهای ذخیره شده در یک پایگاه داده را مخفی کند. اما اگرچه درهم سازی گذرواژه قدم بزرگی در جهت ایمن سازی رمز عبور است ، کاربر هنوز هم یک مشکل بزرگ برای امنیت رمز عبور دارد. کاربرانی که از کلمه رایجی به عنوان رمز عبور استفاده می کنند ، عمل hashing را بی فایده می کنند، زیرا یک حمله brute-force می تواند به سرعت چنین رمزهایی را خراب کند.
برای پرداختن به این موضوع ، بسیاری از برنامه های وب امروز اصرار دارند که کاربران از گذرواژه های قوی برخوردار باشند ، و یا با حداقل طول رمز عبور و یا ترکیبی از کاراکترها و نمادهای الفبا در رمز عبور این کار را انجام میدهند. برای اندازه‌گیری قدرت رمز عبور ، Dropbox الگوریتمی برای تخمین قدرت واقعی رمز عبور با الهام از crackerهای رمز عبور ایجاد کرده است. این الگوریتم در یک کتابخانه جاوا اسکریپت به نام zxcvbn بسته بندی شده است. علاوه بر این ، این بسته شامل فرهنگ لغت کلمات متداول انگلیسی ، نام ها و کلمات عبور است.
در این آموزش با استفاده از چارچوب جاوااسکریپت React یک فرم با فیلدهایی برای نام کامل ، ایمیل و رمز عبور ایجاد خواهیم کرد. اندکی اعتبارسنجی سبک برای فرم انجام خواهیم داد و همچنین از کتابخانه zxcvbn برای برآورد قدرت پسورد در فرم استفاده می کنیم و ضمنا بازخورد بصری را ارائه میکنیم.
این نسخه نمایشی CodeSandbox از آنچه تا پایان این آموزش ایجاد خواهیم کرد را بررسی کنید.
پیش نیازها
قبل از شروع کار ، اطمینان حاصل کنید که نسخه جدیدی از Node را روی سیستم خود نصب کرده باشید. ما از yarn برای اجرای تمام اسکریپت های NPM و نصب متعلقات برای پروژه خود استفاده خواهیم کرد ، بنابراین همچنین از نصب yarn اطمینان حاصل کنید. برای نصب yarn روی سیستم می توانید از این راهنمای نصب yarn استفاده کنید. همچنین ، برای تولید برنامه جدید React خود ، از بسته محبوب create-react-app استفاده خواهیم کرد.
اگر قبلاً آن را نصب نکرده اید ، دستور زیر را اجرا کنید تا برنامه create-react-app را در سیستم خود نصب کنید.
npm install -g create-react-app

مرحله 1 – تنظیم برنامه خود
یک برنامه جدید React را با استفاده از دستور زیر شروع کنید. می توانید برنامه را هر طور که می خواهید نامگذاری کنید.
توجه: اگر از npm نسخه 5.2 یا بالاتر استفاده می کنید ، با یک باینری npx اضافی همراه است. با استفاده از باینری npx ، دیگر نیازی نیست که برنامه create-react-app را در سطح جهانی روی سیستم خود نصب کنید. با استفاده از این دستور می توانید برنامه جدید React را شروع کنید: npx create-react-app react-password-strength

در مرحله بعد ، متعلقات مورد نیاز برنامه خود را نصب خواهیم کرد. برای نصب متعلقات لازم ، دستور زیر را اجرا کنید.
$ yarn add bootstrap zxcvbn isemail prop-types

$ yarn add -D npm-run-all node-sass-chokidar

ما node-sass-chokida را به عنوان یک وابستگی توسعه برای برنامه خود نصب کرده ایم تا ما را قادر به استفاده از SASS کند. برای اطلاعات بیشتر در مورد این ، به این راهنما مراجعه کنید.
اکنون دیرکتوری src را باز کرده و پسوند فایل همه فایل های .css را به .scss تغییر دهید. فایل های .css مورد نیاز در ادامه کار توسط node-sass-chokidar کامپایل می شوند.
فایل pack.json را ویرایش کرده و بخش scripts را تغییر دهید تا به شکل زیر باشد:
“scripts”: {
“start:js”: “react-scripts start”,
“build:js”: “react-scripts build”,
“start”: “npm-run-all -p watch:css start:js”,
“build”: “npm-run-all build:css build:js”,
“test”: “react-scripts test –env=jsdom”,
“eject”: “react-scripts eject”,
“build:css”: “node-sass-chokidar –include-path ./src –include-path ./node_modules src/ -o src/”,
“watch:css”: “npm run build:css && node-sass-chokidar –include-path ./src –include-path ./node_modules src/ -o src/ –watch –recursive”
}

همانطور که ممکن است متوجه شده باشید ، ما بسته bootstrap را به عنوان یک وابستگی برای برنامه خود نصب کرده ایم تا یک ظاهر طراحی پیش فرض را بدست آوریم. برای وارد کردن Bootstrap در برنامه ، فایل src / index.js را ویرایش کنید و قبل از هر عبارت import دیگر خط زیر را اضافه کنید.
import “bootstrap/dist/css/bootstrap.min.css”;

در آخر ، درخواست خود را شروع کنید:
$ yarn start

برنامه اکنون شروع شده است و توسعه می تواند آغاز شود. توجه کنید که یک سربرگ مرورگر با عملکرد لود مجدد زنده برای شما باز شده است تا همزمان با ایجاد برنامه ، با تغییرات در برنامه همگام شوید.
در این مرحله ، نمای برنامه شما مانند تصویر زیر خواهد بود:

مرحله 2 – ساختن مولفه ها
به یاد داشته باشید که قصد داریم یک فرم با فیلدهای مربوط به نام کامل ، ایمیل و رمز عبور ایجاد کنیم و همچنین برخی از اعتبار سنجی های سبک را در این فیلدها انجام دهیم. مولفه های React زیر را ایجاد می کنیم:
FormField – یک فیلد ورودی فرم را با ویژگی های آن پوشش میدهد و کنترل کننده رویداد را تغییر میدهد.
EmailField – ایمیل FormField را دربرگرفته و منطق اعتبار سنجی ایمیل را به آن اضافه می کند.
PasswordField – رمز عبور FormField را محصور کرده و منطق اعتبار رمز عبور را به آن اضافه می کند. همچنین مقیاس قدرت رمز عبور و برخی از نشانه های بصری دیگر را به فیلد وصل می کند.
JoinForm – تیم حمایت عضویت که فیلدهای فرم را در خود جای میدهد.
پیش بروید و یک دیرکتوری components در داخل فهرست src برنامه ایجاد کنید تا تمام اجزای ما در آن قرار بگیرند.
مؤلفه FormField
یک فایل جدید FormField.js را در دیرکتوری src / parts ایجاد کنید و قطعه کد زیر را به آن اضافه کنید:
import React, { Component, Fragment } from ‘react’;
import PropTypes from ‘prop-types’;

class FormField extends Component {

// initialize state
state = { value: ”, dirty: false, errors: [] }

hasChanged = e => {
e.preventDefault();

// destructure props – assign default dummy functions to validator and onStateChanged props
const { label, required = false, validator = f => f, onStateChanged = f => f } = this.props;

const value = e.target.value;
const isEmpty = value.length === 0;
const requiredMissing = this.state.dirty && required && isEmpty;

ما موفق شده ایم که سبک های مورد نیاز برنامه خود را اضافه کنیم. به استفاده از محتوای CSS تولید شده در شبه عناصر .strength-meter:before و .strength-meter:after توجه کنید تا گپ هایی به مقیاس قدرت پسورد اضافه کنیم.
همچنین از دستورالعمل @for در Sass استفاده کردیم تا به صورت پویا رنگها را برای اندازه گیری سطوح مختلف قدرت رمز عبور ایجاد کنیم.
صفحه برنامه نهایی مانند این است:

با خطاهای اعتبار سنجی ، صفحه به این شکل ظاهر می شود:

بدون هیچ گونه خطایی ، هنگامی که همه فیلدها معتبر هستند ، صفحه مانند این ظاهر می شود:

نتیجه
در این آموزش ، یک قدرت سنج رمز عبور را بر اساس کتابخانه zxcvbn جاوااسکریپت در برنامه React ایجاد کردیم. برای مطالعه یک راهنمای استفاده دقیق و مستندات کتابخانه zxcvbn ، به منبع zxcvbn در Github مراجعه کنید. برای دریافت نمونه کامل کد این آموزش ، منبع password-strength-react-demo در Github را بررسی کنید. همچنین می توانید یک نسخه آزمایشی زنده از این آموزش در مورد کد Sandbox دریافت کنید.
اگر به نسخه AngularJS این مقاله علاقه مند هستید ، می توانید به این مقاله نگاهی بیندازید: Password Strength Meter in AngularJS.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade