Nodejs는 사진 확인 코드를 구현합니다.
인터넷 기술의 발달로 그래픽 인증 코드(CAPTCHA)는 웹 사이트 로그인, 등록, 비밀번호 검색 및 기타 사용자 신원 확인이 필요한 장소에서 널리 사용됩니다. 사용자가 판단할 수 있도록 몇 가지 질문과 답변, 숫자, 문자 등을 그래픽으로 표시함으로써 로봇이 비밀번호를 등록하고 폭력적으로 비밀번호를 해독하는 것을 방지합니다. 이번 글에서는 Node.js를 이용해 이미지 인증코드를 구현하는 방법을 소개하겠습니다.
- 설치 종속성
Node.js에는 그래픽 확인 코드를 생성하는 데 사용할 수 있는 많은 타사 모듈이 있습니다. 이 문서에서는 확인을 생성할 수 있는 svg-captcha
모듈을 사용합니다. SVG 형식의 코드 이미지. 설치하려면 터미널에서 다음 명령을 실행하세요. svg-captcha
模块,它可以生成 SVG 格式的验证码图片。在终端中执行以下命令安装它:
npm install svg-captcha
- 创建基本的项目结构
在工作目录下创建一个 app.js
文件和 public
文件夹,public
文件夹用来存放验证码图片。以下是目录结构:
- app.js - public - captcha.svg
在 app.js
文件中,引入 svg-captcha
模块并创建一个 Express 实例:
const express = require('express') const svgCaptcha = require('svg-captcha') const app = express() // 其他代码
- 创建路由
为了实现图片验证码,需要创建一个路由来生成验证码图片。在 app.js
文件中创建一个路由 /captcha
:
app.get('/captcha', (req, res) => { const captcha = svgCaptcha.create() res.type('svg') res.status(200) res.send(captcha.data) })
在这个路由中,调用 svgCaptcha.create()
函数可以生成一个随机的验证码字符串和对应的 SVG 图片,然后将其发送给客户端。
- 添加逻辑
为了使生成的验证码与客户端返回的验证码相匹配,需要将生成的验证码字符串保存在会话中,并在客户端提交表单时进行验证。在路由中添加以下逻辑:
app.get('/captcha', (req, res) => { const captcha = svgCaptcha.create() req.session.captcha = captcha.text res.type('svg') res.status(200) res.send(captcha.data) }) app.post('/login', (req, res) => { const { username, password, captcha } = req.body const expectedCaptcha = req.session.captcha if (expectedCaptcha === captcha) { // 验证码正确,进行登录操作 } else { // 验证码错误,返回错误提示 } })
在 /captcha
路由中将生成的验证码字符串保存在会话中,然后在用户提交表单时将该验证码字符串与用户输入的验证码进行比对,如果相同则判断验证成功,进行后续操作。
- 启动服务器
完成以上步骤后,执行以下命令来启动服务器:
node app.js
然后在浏览器中访问 http://localhost:3000/captcha
rrreee
- 기본 프로젝트 구조 만들기
- rrreee
- 이미지 인증코드를 구현하기 위해서는 인증코드 이미지를 생성하는 경로를 생성해야 합니다.
app.js
파일에 경로/captcha
를 만듭니다. rrreee - 이 경로에서
svgCaptcha.create()
함수를 호출하면 생성할 수 있습니다. 그런 다음 무작위 확인 코드 문자열과 해당 SVG 이미지가 클라이언트로 전송됩니다.
app.js
파일을 만들고 public을 작업 디렉터리
폴더, public
폴더는 인증 코드 이미지를 저장하는 데 사용됩니다. 다음은 디렉토리 구조입니다.
app.js
파일에서 svg-captcha
모듈을 도입하고 Express 인스턴스를 생성합니다: /captcha
경로의 세션에 저장한 다음, 사용자가 제출할 때 사용자가 입력한 인증 코드 문자열과 비교합니다. 양식에서 인증코드를 비교하여 동일할 경우 인증에 성공한 것으로 판단하여 후속 작업을 수행할 수 있습니다. 🎜- 🎜서버 시작🎜🎜🎜위 단계를 완료한 후 다음 명령을 실행하여 서버를 시작하세요. 🎜rrreee🎜그런 다음
http://localhost:3000/captcha를 방문하세요. 브라우저 코드>에서 생성된 인증코드 이미지를 볼 수 있습니다. 로그인 양식에 인증 코드를 입력하고 후속 작업을 위해 양식을 제출하세요. 🎜🎜요약🎜🎜Node.js를 사용하여 이미지 확인 코드를 구현하는 것은 어렵지 않습니다. 완료하려면 타사 모듈만 있으면 됩니다. 다만, 인증코드의 보안성을 높이기 위해서는 다음 사항에 주의할 필요가 있습니다. 🎜🎜🎜생성된 인증코드 문자열은 충분히 복잡해야 하며, 대문자와 소문자, 숫자, 특수문자를 포함해야 합니다. 🎜🎜공격자가 인증코드를 저장하고 유효기간 동안 계속 시도하는 것을 방지하기 위해 인증코드의 유효기간은 보통 5분 정도로 제한해야 합니다. 🎜🎜인증코드는 예측 및 복사 방지를 위해 무작위로 생성되어야 합니다. 🎜🎜인증 코드 문자열을 저장하려면 세션을 사용해야 하며 클라이언트 또는 서버 캐시에 직접 인증 코드를 저장하지 마세요. 🎜🎜
위 내용은 Nodejs는 사진 확인 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











이 기사에서는 Data Fetching 및 기능 구성 요소의 DOM 조작과 같은 부작용을 관리하기위한 후크 인 React의 useEffect에 대해 설명합니다. 메모리 누출과 같은 문제를 방지하기 위해 사용법, 일반적인 부작용 및 정리를 설명합니다.

게으른로드는 필요할 때까지 컨텐츠로드를 지연시켜 초기로드 시간과 서버로드를 줄임으로써 웹 성능 및 사용자 경험을 향상시킵니다.

JavaScript의 고차 기능은 추상화, 공통 패턴 및 최적화 기술을 통해 코드 간접성, 재사용 성, 모듈성 및 성능을 향상시킵니다.

이 기사는 다중 연계 기능을 단일 연계 함수 시퀀스로 변환하는 기술 인 JavaScript의 카레에 대해 논의합니다. Currying의 구현, 부분 응용 프로그램 및 실제 용도와 같은 혜택, 코드 읽기 향상을 탐색합니다.

이 기사는 가상 Dom 트리를 비교하여 DOM을 효율적으로 업데이트하는 React의 조정 알고리즘을 설명합니다. 성능 이점, 최적화 기술 및 사용자 경험에 미치는 영향에 대해 설명합니다. 문자 수 : 159

기사에서는 extentdefault () 메서드를 사용하여 이벤트 처리기의 기본 동작 방지, 향상된 사용자 경험과 같은 이점 및 접근성 문제와 같은 잠재적 문제에 대해 논의합니다.

이 기사는 REACT의 USECONTEXT를 설명하며, 이는 PROP 시추를 피함으로써 상태 관리를 단순화합니다. 중앙 집중식 상태 및 성능 개선과 같은 렌더링을 통해 성능 향상과 같은 이점에 대해 논의합니다.

이 기사는 예측 가능성, 성능 및 사용 사례와 같은 측면에 중점을 둔 React의 제어 및 통제되지 않은 구성 요소의 장단점에 대해 설명합니다. 그것은 그들 사이에서 선택할 때 고려해야 할 요소에 대해 조언합니다.
