전투에 웹 프런트 엔드 항목 : CAPTCHA 실현

CAPTCHA 무엇입니까

CAPTCHA는 검증 코드입니다. 확인 코드 (보안 문자) ( "완전 자동화 된 공공 튜링 테스트 외에 컴퓨터와 인간에게"컴퓨터 약어 및 인간 튜링 테스트 간의 자동 구분 방지 할 수있는 사용자의 공용 컴퓨터 또는 자동 절차 구별된다 : 악성 균열 코드, 브러시 티켓, 포럼 관개는 지속적으로 확인 코드로 시도를 착륙에 특정 프로그램 브 루트 포스 접근 특정 등록 된 사용자를위한 *** 실제로 지금 방법을 널리 많은 사이트입니다 방지 할 수 있습니다.

CAPTCHA는 사람과 시스템의 작동을 구별하는 것이기 때문에, 우리는 그래프에 대한 질문에 대답 할 수 하나를 그릴 수 있습니다. 더 일반적인 다음 사진에 텍스트를 확인 일관성을 입력 할 수있는 사용자 그림에서 문자 확인 코드를 생성하고,.

이 인증 방법은 점차 다른 하였지만, 더 진보 된 방법은 백 - 엔드 보안에 비해 검증 코드를 생성하기 위해 (그림의 텍스트는 여전히 프로그램 식별을 읽을 수 있습니다), 그리고 프런트 엔드를 제거 높지 않다,하지만 우리 로딩 x의 유일한 목적은 프로그램 만 부수적 효과의 보안을 향상시킬 수 있습니다.

로그인 양식

첫째, 우리는 FormItem의는 로그인 양식에 입력을위한 추가 코드를 추가해야하고, 그래픽 코드 캔버스 컨테이너를 제공합니다. 때로는 코드가 이해하지 못하는 생성, 확인 코드를 전환하는 클릭 이벤트 코드를 추가 할 필요가있다 :

web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<Form ref="loginForm" :model="form" :rules="rules">
    <FormItem prop="userName">
        <Input v-model="form.userName" placeholder="请输入用户名">
            <span slot="prepend">
                <Icon :size="16" type="person"></Icon>
            </span>
        </Input>
    </FormItem>
    <FormItem prop="password">
        <Input type="password" v-model="form.password" placeholder="请输入密码">
            <span slot="prepend">
                <Icon :size="14" type="locked"></Icon>
            </span>
        </Input>
    </FormItem>
    <FormItem prop="valiCode" v-show="this.count">
        <Input v-model="form.valiCode" placeholder="请输入验证码">
            <span slot="prepend">
                <Icon :size="14" type="ios-analytics"></Icon>
            </span>
        </Input>
        <div class="canvas" @click="getImgYanzheng">
            <canvas id="canvas"></canvas>
        </div>
    </FormItem>
    <FormItem>
        <Button @click="handleSubmit" type="primary" long>登录</Button>
    </FormItem>
</Form>

당신은 속성을 사용할 필요가

ValiCode 양식은 사용자 입력을 기록하는 추가 코드를 추가해야합니다. 다음은 사용자 로그인이 착륙 횟수의 실패 ++ 물론,이 방법은 매우 엄격하지 않을 때, 그래서 카운트 속성을 추가, 다시 추가 그래픽 코드를 입력해야합니다 실패 할 때 우리는 정의하고 사용자가 새로 고침 페이지 수는 삭제됩니다. 판단의 기초를 계산하기 때문에 단순히 프로그램 엔드 다시 포함하고 있지 않습니다 경우 같이, 원격 로그인 등 다음과 같은 많은 제한을 추가 할 수 있습니다.

data() {
    return {
      form: {
        userName: "",// 用户名
        password: "",// 密码
        valiCode: ""// 验证码
      },
      count: 0, // 登录次数
      show_num: [],// 图形上的文字
    }
}

생산 CAPTCHA

페이지의 방법은 getImgYanzheng CAPTCHA을 그릴 수밖에 없다 캔버스 컨테이너입니다

. 필요가 일 세트의 콘텐츠를 정의하는 것으로 사용하여 PIN 코드 그래픽 도면이다 : A, B, C, E, F, G, H, J, K, M, N, P, Q, R , S, T, W, X, Y, Z, 1,2,3,4,5,6,7,8,9,0, 좋은, 의학, 건강. 알파벳 문자는 제외하고 쉽게 오인식 문자가 가입 할 수 있습니다 (따라서 또한 그래픽 코드는 네 개의 무작위로 생성 된 텍스트는 다양한 형태의 빈 등의 숙어 채우기를 생성하는 사용자를 사용자 요청, 또는 허용했다). 당신이와 toLowerCase 방법을 사용할 필요가 있도록 그리고, 사용자에 민감한 무시합니다.

그런 다음 몇 가지 팁을 그리기 캔버스가있다.

캔버스 그리기

캔버스 요소 자체는 전원을 공급하지 않습니다. 모든 그리기 작업은 자바 스크립트 이내에 완료되어야합니다 :

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

자바 스크립트 ID를 캔버스 요소를 찾은 다음 컨텍스트 객체를 생성,는 getContext ( "2D") 객체는 내장 HTML5 객체 그리기 경로, 상자, 원, 문자뿐만 아니라 이미지를 추가하는 방법에 대한 몇 가지 방법이 있습니다. 우리는 캔버스보기를 상상할 수있는 문맥 렌더링 풍경 캔버스입니다.

드로잉 공정에서 코드 이후 도면에 좌우되므로 캔버스의 사용을 예약하는 플러스 별도로 검증 소자 때 일부 잡음 부호 번호되도록되어 있지 쉽게 인식 과정을 그려.

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
getImgYanzheng() {
      var show_num = [];
      var canvas_width = 150; //document.getElementById("canvas").style.width;
      var canvas_height = 30; //document.getElementById("canvas").style.height;
      var canvas = document.getElementById("canvas"); //获取到canvas的对象，景色
      var context = canvas.getContext("2d"); //获取到canvas画图的环境，景色呈现的画布
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode =
        "A,B,C,E,F,G,H,J,K,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,好,医,生";
      var aCode = sCode.split(",");
      var aLength = aCode.length; //获取到数组的长度

      for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
        var txt = aCode[j]; //得到随机的一个内容
        show_num[i] = txt.toLowerCase();
        var x = 10 + i * 20; //文字在canvas上的x坐标
        var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (var i = 0; i <= 5; i++) {
        //验证码上显示线条
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      for (var i = 0; i <= 30; i++) {
        //验证码上显示小点
        context.strokeStyle = this.randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
      this.show_num = show_num;
    },

코드의 라인 및 일부 임의의 색상이 필요합니다

randomColor() {
      //得到随机的颜色值
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    }

이러한 두 가지 방법으로, 그래픽 확인 코드가 완료 될 때 생성 된, 다음 단계는 문제를 사용하는 것입니다.

사용 CAPTCHA

숫자 코드를 입력하기 위해 0보다 큰 로그 필요가있는 경우 분석 로그인은, 수 :

const self = this;
if (this.count) {
        if (this.form.valiCode) {
            if (this.show_num.join("") != this.form.valiCode.toLowerCase()) {
                self.$Notice.warning({
                    title: "验证码错误"
                });
                return;
            }
        } else {
            self.$Notice.warning({
                title: "请输入验证码"
            });
            return;
        }
    }

로그인 실패하고 새로 고침 횟수 ++ 코드를 수행 할 필요가있을 때 :

self.count++;
self.getImgYanzheng();
self.$Notice.warning({
title: "登陆失败",
desc: rs.data.msg
});

이 때 작업이 보안 문자를 추가 완료, 학생들은 빨리 일어나.