极客教程ReactJs 构建验证码生成器
验证码生成器是一种工具，它创建随机且视觉上扭曲的文本，需要用户进行输入来证明他们是人类。它通过测试人类理解能力来阻止自动化机器人访问网站或服务。我们的验证码生成器生成随机的基于文本的验证码，用户必须准确输入才能进行处理，有效确保了人与机器的交互。在本文中，我们将使用React创建一个验证码生成器。
预览图片
先决条件
- React Native简介
- React Native组件
- React Hooks
- Node.js和npm
创建React Native应用的步骤
步骤1： 使用以下命令创建一个React Native应用
npx create-expo-app CaptchaGeneratorApp
步骤2： 在创建好项目文件夹，即CaptchaGeneratorApp之后，使用以下命令进行导航：
cd CaptchaGeneratorApp
项目结构：
方法/功能
在这种方法中，
- 随机字符生成： 应用程序通过从三个字符集（大写字母、小写字母和数字）中随机选择字符来生成一个验证码文本。这确保了验证码是各种字符类型的组合，使用户更难解读。
- 随机洗牌： 生成的文本被随机洗牌，增加复杂性，防止简单的模式识别。
- 画布可视化： 验证码动态地在一个HTML画布上绘制，为用户创建了一个视觉上的挑战。
- 用户输入验证： 用户必须输入他们对验证码文本的解读，然后对比生成的验证码进行验证。
- 反馈消息： 应用程序根据用户输入的准确性提供反馈信息，如成功或错误。一个“重新加载”按钮为后续尝试生成一个新的验证码。
示例： 在这个示例中，我们将使用上述解释的方法。
//App.js
import React, { useState, useEffect, useRef } from 'react';
import './style.css';
function App() {
const [captchaText, setCaptchaText] = useState('');
const [userInput, setUserInput] = useState('');
const canvasRef = useRef(null);
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
initializeCaptcha(ctx);
}, []);
const generateRandomChar = (min, max) =>
String.fromCharCode(Math.floor
(Math.random() * (max - min + 1) + min));
const generateCaptchaText = () => {
let captcha = '';
for (let i = 0; i < 3; i++) {
captcha += generateRandomChar(65, 90);
captcha += generateRandomChar(97, 122);
captcha += generateRandomChar(48, 57);
}
return captcha.split('').sort(
() => Math.random() - 0.5).join('');
};
const drawCaptchaOnCanvas = (ctx, captcha) => {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const textColors = ['rgb(0,0,0)', 'rgb(130,130,130)'];
const letterSpace = 150 / captcha.length;
for (let i = 0; i < captcha.length; i++) {
const xInitialSpace = 25;
ctx.font = '20px Roboto Mono';
ctx.fillStyle = textColors[Math.floor(
Math.random() * 2)];
ctx.fillText(
captcha[i],
xInitialSpace + i * letterSpace,
// Randomize Y position slightly
Math.floor(Math.random() * 16 + 25),
100
);
}
};
const initializeCaptcha = (ctx) => {
setUserInput('');
const newCaptcha = generateCaptchaText();
setCaptchaText(newCaptcha);
drawCaptchaOnCanvas(ctx, newCaptcha);
};
const handleUserInputChange = (e) => {
setUserInput(e.target.value);
};
const handleCaptchaSubmit = () => {
if (userInput === captchaText) {
alert('Success');
} else {
alert('Incorrect');
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
initializeCaptcha(ctx);
}
};
return (
<div>
<h2 className="heading">
Captcha Generator Using React
</h2>
<div className="container">
<div className="wrapper">
<canvas ref={canvasRef}
width="200"
height="70">
</canvas>
<button id="reload-button" onClick={
() => initializeCaptcha(
canvasRef.current.getContext('2d'))}>
Reload
</button>
</div>
<input
type="text"
id="user-input"
placeholder="Enter the text in the image"
value={userInput}
onChange={handleUserInputChange}/>
<button id="submit-button"
onClick={handleCaptchaSubmit}>
Submit
</button>
</div>
</div>
);
}
export default App;
/*style.css*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: white;
}
.container {
width: 30rem;
background-color: #ffffff;
padding: 70px;
border-radius: 30px;
position: absolute;
transform: translate(-50%, -50%);
top: 45%;
left: 50%;
box-shadow: 0px 0px 30px 0px black;
}
.heading {
margin: 50px;
font-size: 30px;
text-align: center;
color: green;
}
.wrapper {
display: flex;
align-content: center;
justify-content: space-between;
margin: 1em 0;
}
canvas {
border: 2px solid crimson;
border-radius: 20px;
}
button#reload-button {
font-size: 26px;
width: 4.6em;
background-color: green;
cursor: pointer;
border: none;
border-radius: 0.4em;
color: #ffffff;
}
button#reload-button:hover {
background-color: rgb(46, 153, 46);
}
input[type='text'] {
font-family: 'Roboto Mono', monospace;
font-size: 1rem;
width: 100%;
padding: 16px;
border: 2px solid crimson;
border-radius: 20px;
}
button#submit-button {
width: 100%;
color: #ffffff;
font-size: 1.5em;
border: none;
margin-top: 1em;
padding: 0.8em 0;
border-radius: 0.4em;
background-color: green;
cursor: pointer;
}
button#submit-button:hover {
background-color: rgb(53, 175, 53);
}
运行步骤：
要运行React Native应用程序，请使用以下命令：
npm start
输出:
