JavaScript を使用してページに動的な検証コードを実装する例

導入：

現在、プログラム攻撃を防ぐために、ユーザーがログインまたは登録するときに多くの動的検証テクノロジが追加されています。通常、これはランダムに生成された検証コードの入力をユーザーに求めることで実現されます。私はバックエンドとやり取りせず、フロントエンドで検証して、誰もが見られるように送信するものを自分で書きました。

効果画像:

実装のアイデア:

数字と文字を配列に入れて、配列のインデックスをランダムに取得し、合計 4 つを取得して検証コードを形成します。
検証コードを（1つずつ）レンダリングします。
ランダムな色で一定数の干渉線を描きます。
認証コードを入力します。4桁の数字を入力して認証に進むと、正しい場合はチェックマークが表示され、間違っている場合は×が表示され、認証コードが更新されます。

コンストラクタの記述

テキストコンストラクタ

//テキストコンストラクタ関数 Text(o){
		this.x=0,//x座標 this.y=0,//y座標 this.text='',//コンテンツ this.font=null;//フォント this.textAlign=null;//配置		
		これをinit(o);
	}
	
	Text.prototype.init=function(o){
		for(var key in o){
			this[キー]=o[キー];
		}
	}
	Text.prototype.render=function(context){
		this.ctx=コンテキスト;
		innerRender(これを);
			
		関数innerRender(obj){
			var ctx = obj.ctx;
			ctx.save()
			ctx.beginPath();
			ctx.translate(obj.x,obj.y);
			
			フォントサイズは、
				ctx.font=obj.font;
			}
			（obj.textAlign）の場合{
				ctx.textAlign=obj.textAlign;
			}
			if(obj.fill){//塗りつぶされていますか? obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
				ctx.fillText(obj.text,0,0);
			}
		 	ctx.restore();
		}
	 	これを返します。
	}

線分コンストラクタ

 
	//直線構築関数 Line(ctx,o){
		this.x=0,//x座標 this.y=0,//y座標 this.startX=0,//開始点のx位置 this.startY=0, //開始点のy位置 this.endX=0,//終点のx位置 this.endY=0;//終点のy位置 this.thin=false;//間引き係数を設定 this.ctx=ctx;
		
		これをinit(o);
	}
	Line.prototype.init=function(o){
		for(var key in o){
			this[キー]=o[キー];
		}
	}
	Line.prototype.render = 関数() {
		innerRender(これを);
		
		関数innerRender(obj){
			var ctx = obj.ctx;
			ctx.save()
			ctx.beginPath();
			ctx.translate(obj.x,obj.y);
			if(obj.thin){
				ctx.translate(0.5,0.5);
			}
			if(obj.lineWidth){//線の幅を設定する ctx.lineWidth=obj.lineWidth;
			}
			（obj.strokeStyle）の場合{
				ctx.strokeStyle=obj.strokeStyle;
			}
			//線を描く ctx.moveTo(obj.startX, obj.startY);
		 	ctx.lineTo(obj.endX, obj.endY);
		 	ctx.stroke();
		 	ctx.restore();
		}
	 	
	 	これを返します。
	}

長さで認証コードを取得する

	//指定された長さに従ってランダムな英数字を生成します Verifiable.prototype.randomWord=function(range){
	 var str = "",位置,
	   arr = ['0'、 '1'、 '2'、 '3'、 '5'、 '6'、 '7'、 '9'、 'a'、 'b' '、' e '、' f '、' g '' '' '' '' u '、' v '、' w '、' x '、' y '、' '、' '、' b '、' d '、' e '、' f '、' g '' '' '' '' '' '' '' z '];
	 for(var i=0; i<range; i++){
	  pos = Math.round(Math.random() * (arr.length-1));
	  str += arr[位置];
	 }
	 str を返します。
	}

テキストを描く

	//テキストを描画する Verifiable.prototype.drawText=function(){
		var _this_ は、次のようになります。
		var count = 4; //文字数 var textW = 40; //テキストの幅 var code=this.code = this.randomWord(count);
		var codeArr = code.split("");
		var テキスト、x ;
		codeArr.forEach(関数(c,i){
			x = that.w/count*i+textW/2;
			//テキストを描画 text = new Text({
				x:x、
				y:テキストW-10,
				テキスト:c,
				フォント:'30px ans-serif',
				テキスト配置:'center',
				塗りつぶし:true、
				塗りつぶしスタイル:'#412D6A'
			});
			that.renderArr.push(テキスト);
		})		
	}

現時点での効果：

干渉線を描く

//干渉線を描く Verifiable.prototype.interfering=function(){
		var count = this.lineCount=20、line、ctx=this.ctx;
		var startX,
			開始Y、
			終了X、
			終了Y、
			色;
			
		for(var i=0;i<count;i++){
			//ランダムな開始座標、終了座標、色 startX = _.getRandom(0,140);
			開始Y = _.getRandom(0,40);
			endX = _.getRandom(0,140);
			終了Y = _.getRandom(0,40);
			色 = _.getRandomColor();
			//直線を定義する line = new Line(ctx,{
				x:0,
				y:0,
			 	開始X:開始X、
			 	開始Y:開始Y、
			 	終了X:終了X、
			 	終了Y:終了Y、
			 	ストロークスタイル:色
			})
			
			this.renderArr.push(行);
		}
	}

効果は以下のとおりです。

ページレイアウトを追加

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>検証可能</title>
  <スタイル>
   ＃箱{
		幅:140ピクセル;
		高さ:40px;
		位置:絶対;
		
	}
	#入力Div{
		幅:220px;
		位置:絶対;
		マージン:0 自動;
		左:0;
		上:30px;
		右:0;
		下:0;
	}
	＃容器{
		幅:220px;
		高さ:60px;
		位置:絶対;
		マージン:0 自動;
		左:0;
		上:60px;
		右:0;
		下:0;
	}
	.リフレッシュ{
		位置:絶対;
		左:140px;
	}
  </スタイル>
</head>
 
<本文>
	<div id='inputDiv'>
  	確認コード: <input size=10 id='codeInput'><img id='stateImg' style="vertical-align: middle;width:20px"></img>
  </div>
  <div id="コンテナ">
  	<div id='ボックス'></div>
  	<a href="javascript:void 0" class="refresh" onclick="refresh()">1 つ変更</a>
  </div>
</本文>
	<script type="text/javascript" src='verifiable.js'></script>
  <script type="text/javascript">
 	var box = document.getElementById('box');
 	var stateImg = document.getElementById('stateImg');
 	var codeInput = document.getElementById('codeInput');
 	
	検証可能.init(ボックス、コード入力、状態画像);
	
	//画像を変更する function refresh(){
		検証可能.renderArr.length=0;
		検証可能な描画();
	}
  </スクリプト>
</html>

入力ボックスイベントを追加

	//入力ボックスイベント Verifiable.prototype.inputValid=function(input){
		var val = 入力値;
		val.length<4の場合、戻り値は;
		
		if(this.code==val){
			コンソールにログ出力します。
			this.result(0);
		}それ以外{
			this.result(1);
		}
	}

成功と失敗の検証を追加する

// 結果の処理 Verifiable.prototype.result=function(result){
		var codeInput = this.codeInput;
		var stateImg = this.stateImg;
		if(result==0){//成功 stateImg.src="./images/suc.jpeg";
			codeInput.readOnly=true;
		}else{//失敗 codeInput.readOnly=false;
			stateImg.src="./images/fail.jpeg";
			this.renderArr.length=0;
			これを描画します。
		}
	}

仕上げる

コードのダウンロード

これで、ページに動的検証コードを実装するための JavaScript の実装例に関するこの記事は終了です。より関連性の高い JavaScript 動的検証コードの内容については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: