노드를 사용하여 인증 코드를 생성하는 방법

이 글에서는 노드를 사용하여 인증 코드를 생성하는 방법을 공유합니다. 필요한 경우 이를 참조할 수 있습니다.

머리말

네트워크 보안은 항상 중요한 주제입니다. 예를 들어, 누군가 웹사이트의 이메일 등록 인터페이스를 악의적으로 요청하는 경우 서버에 확인 코드를 추가하여 웹사이트의 보안을 강화하는 것을 고려할 수 있습니다. 이 기사에서는 노드를 사용하여 인증 코드를 구현하는 방법에 대해 설명합니다.

프런트 엔드 부분

프런트 엔드 디스플레이는 다음과 같습니다:

사용자가 이미지를 클릭하면 브라우저가 동일한 이미지를 캐시하므로 새 이미지를 새로 고쳐야 합니다. 캐시 상황은 여기에서 처리되어야 합니다. 여기서는 새로 고침 목적을 달성하기 위해 이미지 주소에 현재 타임스탬프를 추가하는 데 사용합니다. 코드는 다음과 같습니다.

html part

  <p>
    <input>
    <img  alt="노드를 사용하여 인증 코드를 생성하는 방법" >
  </p>

js part

  <script></script>
  <script>
    new Vue({
      el: &#39;#app&#39;,
      data: {
        authImgUrl: &#39;&#39;
      },
      created () {
        this.authImgUrl = &#39;http://localhost:3000/&#39;
      },
      methods: {
        changeAuthImg () {
          this.authImgUrl = &#39;http://localhost:3000/&#39; + &#39;?&#39; + new Date().getTime()
        }
      }
    })
  </script>

backend part

먼저 npm은 gd-bmp 모듈을 설치합니다: npm i gd-bmp --savenpm i gd-bmp --save
这是一个高效并且100%js应用图形库，支持画点，线，曲线，矩形，圆形等等，地址如下：
https://github.com/zengming00...

后端代码如下：

var http = require('http')

var BMP24 = require('gd-bmp').BMP24

// 生成随机数
function rand (min, max) {
  return Math.random() * (max - min + 1) + min | 0 // 特殊的技巧，|0可以强制转换为整数，向下舍入
}

// 制造验证码图片
function makeCapcha() {
  let img = new BMP24(100, 40) // 长100， 高40
  // 背景颜色
  img.fillRect(0, 0, 100, 40, 0xffffff) // 白色
  // 画曲线
  var w = img.w / 2
  var h = img.h
  var color = rand(0, 0xffffff)
  var y1 = rand(-5, 5) // Y轴位置调整
  var w2 = rand(10, 15) // 数值越小频率越高
  var h3 = rand(3, 5) //数值越小幅度越大
  var bl = rand(1, 5)
  for (let i = -w; i <p>函数makeCapcha用于生成验证码，因为图片格式bmp的，所以设置响应头类型为<code>image/bmp</code>，最后，通过<code>res.end(img.getFileData())</code>이것은 효율적인 100% js 애플리케이션 그래픽 라이브러리로 점, 선, 곡선, 직사각형, 원 등 그리기를 지원합니다. 주소는 다음과 같습니다: </p>https://github.com/zengming00... <p class="post-topheader custom- pt0"></p>백엔드 코드 <p class="post-topheader custom- pt0">rrreee<a href="http://www.php.cn/js-tutorial-406881.html" target="_blank" title="关于TypeScript在node项目中的实践分析">Function makeCapcha 인증 코드를 생성하는 데 사용됩니다. 이미지 형식이 bmp이므로 응답 헤더 유형이 <code>image/bmp</code>로 설정됩니다. 마지막으로 <code>res.end( img.getFileData())</code>로 생성된 이미지가 클라이언트에 반환됩니다. </a><br>관련 권장 사항: </p><div></div>노드 프로젝트에서 TypeScript의 실제 분석🎜🎜🎜🎜🎜

위 내용은 노드를 사용하여 인증 코드를 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!