戦闘へのWebフロントエンドエントリ：CAPTCHA実現

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、良い、医学、健康。アルファベットの文字は除外され、簡単に誤認識文字が参加することができます（そのためにも、グラフィックコードがユーザーに尋ねる4ランダムに生成されたテキストを作った、またはユーザーがイディオム等、様々な形での空白を埋める生成することができます）。そして、あなたはtoLowerCaseメソッドメソッドを使用する必要があるので、ユーザーに敏感無視します。

その後、いくつかのヒントを描画キャンバスがあります。

キャンバスの描画

canvas要素自体は電力を消費していません。すべての描画作業には、JavaScript以内に完了する必要があります。

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

JavaScriptの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 + ")";
    }

これらの2つの方法を用いて、グラフィカルな検証コード生成されているが完了し、次のステップは、問題を使用することです。

使用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
});

この時点で作業はCAPTCHAを追加するために完了すると、学生は迅速な立ち上げ。