プログラマはインストールしなくてもいいですか?まず登録してください.グラフィック認証コードです.(canvas実現)

注意深い学友は発見することができて、今多くのウェブサイトは何度も登録した後に1つのグラフィックの検証コードが現れて、あるいはフォームを提出する時、あるいはクリックして携帯電話の検証コードを得るシーンはいずれもグラフィックの検証コードの出現があります.
グラフィック認証コードはどんな問題を解決するために作られましたか?
グラフィック認証コードとは?
グラフィック認証コードは認証コードの一種である.検証コード(CAPTCHA)は、「Copletely Automatied Public Turing test to tell Computters and Humans Aart」(全自動でコンピュータと人間を区別する図霊テスト)の略語であり、ユーザーがコンピュータかそれとも人間かを区別する公共全自動プログラムです.防ぐことができます:悪意がパスワードを解読して、切符を使って、フォーラムは水を入れて、効果的にあるハッカーがある特定の登録ユーザーに対して特定のプログラムの暴力的な解読の方式で絶えない登録の試みを行うことを防止して、実際には検証コードを使うのは今多くのウェブサイトの通行の方式です.
グラフィック認証コードはマシンと人の間の操作を区別するためですので、人だけが解ける問題を図形上に描くことができます.よく見られるのは、画像上で文字認証コードを生成し、ユーザーが画像上の文字を入力すると確認されます.
このような検証方法は他のより先進的な方法によって徐々に淘汰されましたが、(画像上の文字は依然としてプログラムによって読み取られます)、そして、フロントエンドの認証コードを生成する方式はバックエンドの安全性より高くないです.しかし、私達の目的はxを取り付けるためだけで、手順の安全性を向上させるのは付随する効果だけです.
ログインフォーム
まず、登録フォームに認証コードを入力するFormItemを追加する必要があり、画像認証コードにcanvas容器を提供する.生成された認証コードがよく見えない場合がありますので、認証コードにクリックイベントを追加して検証コードを切り替える必要があります.

使用する属性
フォームは、ユーザ入力の認証コードを記録するためにvaliCodeを追加する必要があります.ここでは、ユーザがログインに失敗すると、グラフィカルな検証コードを追加する必要があると定義し、count属性を追加し、ログインに失敗した場合はcount++、もちろんこのような処理は厳密ではないが、ユーザリフレッシュページcountはクリアされる.ここでは、異郷登録など、このケースはバックエンドプログラムに全く関連していないので、簡単にcountを判断根拠としているだけで、より多くの制限を追加することができる.

data() {
    return {
      form: {
        userName: "",//    
        password: "",//   
        valiCode: ""//    
      },
      count: 0, //     
      show_num: [],//       
    }
}

生産パターン検証コード
ページ上にcanvas容器を結合する方法getImgYanzhengは、グラフィック認証コードを描画しています.
.図の検証コードを描画するときは、認証コードのためのコンテンツセットを定義する必要があります.ここで使用するのは、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描画のテクニックです.
canvas描画
canvas元素自体は描画能力がない.すべての描画作業はJavaScriptの内部で行わなければなりません.

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

JavaScriptでは、IDを使用してcanvas要素を探し、contextオブジェクトを作成し、getContext("2d") オブジェクトは内部に構築されたHTML 5オブジェクトであり、複数の描画経路、矩形、円形、文字、および画像を追加する方法がある.canvasを景色に想像できます.contextは景色のキャンバスです.
検証コードを描く過程では左から右に描きますので、カンバスの使用範囲を計画する必要があります.また、検証コードを作る時にはランダムな要素を加えて検証コードをプログラムで識別するのが難しいです.

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つの方法があります.グラフィック認証コードはすでに生成されました.次は使用の問題です.
グラフィック認証コードを使う
登録回数countを判断し、登録回数が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;
        }
    }

ログインに失敗した場合はcount++を実行し、認証コードを更新する必要があります.

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

この時点で、グラフィックスの検証コードの追加作業が完了しました.レビューをすることが最大の励みです.