Beispiel für die Implementierung eines dynamischen Überprüfungscodes auf einer Seite mithilfe von JavaScript

Beispiel für die Implementierung eines dynamischen Überprüfungscodes auf einer Seite mithilfe von JavaScript

Einführung:

Heutzutage werden bei der Anmeldung oder Registrierung von Benutzern viele dynamische Verifizierungstechnologien hinzugefügt, um Programmangriffe zu verhindern. Im Allgemeinen wird dies erreicht, indem Benutzer aufgefordert werden, einen zufällig generierten Verifizierungscode einzugeben. Ich habe selbst eines geschrieben, das nicht mit dem Backend interagiert, es aber auf dem Frontend überprüft und für alle sichtbar sendet.

Effektbild:

Umsetzungsideen:

  • Fügen Sie Zahlen und Buchstaben in ein Array ein, erhalten Sie den Array-Index nach dem Zufallsprinzip und bilden Sie mit insgesamt 4 den Bestätigungscode.
  • Geben Sie die Bestätigungscodes wieder (einzeln).
  • Zeichnen Sie eine bestimmte Anzahl von Interferenzlinien in zufälligen Farben.
  • Gib den Bestätigungscode ein, 4 Ziffern eingeben und dann zur Bestätigung gehen, bei Richtigkeit wird ein Häkchen angezeigt, bei Falsch ein Kreuz und der Bestätigungscode wird aktualisiert.

Schreiben des Konstruktors

Textkonstruktor

//Textkonstruktorfunktion Text(o){
		this.x=0,//x-Koordinate this.y=0,//y-Koordinate this.text='',//Inhalt this.font=null;//Schriftart this.textAlign=null;//Ausrichtung		
		dies.init(o);
	}
	
	Text.prototype.init=Funktion(o){
		für (var Schlüssel in o) {
			dies[Schlüssel]=o[Schlüssel];
		}
	}
	Text.prototype.render=Funktion(Kontext){
		dies.ctx=Kontext;
		innerRender(dies);
			
		Funktion innerRender(Objekt){
			var ctx=obj.ctx;
			ctx.speichern()
			ctx.beginPath();
			ctx.translate(Objekt.x,Objekt.y);
			
			wenn(Objekt.Schriftart){
				ctx.font=obj.font;
			}
			wenn (obj.textAlign) {
				ctx.textAlign=obj.textAlign;
			}
			if(obj.fill){//Ist es ausgefüllt? obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null;
				ctx.fillText(obj.text,0,0);
			}
		 	ctx.wiederherstellen();
		}
	 	gib dies zurück;
	}

Liniensegment-Konstruktor

 
	//Funktion zur Konstruktion gerader Linien Line(ctx,o){
		this.x=0,//x-Koordinate this.y=0,//y-Koordinate this.startX=0,//Startpunkt x-Position this.startY=0, //Startpunkt y-Position this.endX=0,//Endpunkt x-Position this.endY=0;//Endpunkt y-Position this.thin=false;//Ausdünnungskoeffizient festlegen this.ctx=ctx;
		
		dies.init(o);
	}
	Zeile.prototype.init=Funktion(o){
		für (var Schlüssel in o) {
			dies[Schlüssel]=o[Schlüssel];
		}
	}
	Line.prototype.render = Funktion() {
		innerRender(dies);
		
		Funktion innerRender(Objekt){
			var ctx=obj.ctx;
			ctx.speichern()
			ctx.beginPath();
			ctx.translate(Objekt.x,Objekt.y);
			wenn(Objekt.dünn){
				ctx.übersetzen(0.5,0.5);
			}
			if(obj.lineWidth){//Linienbreite festlegen ctx.lineWidth=obj.lineWidth;
			}
			wenn (obj.StrokeStyle) {
				ctx.strokeStyle=obj.strokeStyle;
			}
			//Eine Linie zeichnen ctx.moveTo(obj.startX, obj.startY);
		 	ctx.lineTo(obj.endX, obj.endY);
		 	ctx.stroke();
		 	ctx.wiederherstellen();
		}
	 	
	 	gib dies zurück;
	}

Bestätigungscode nach Länge abrufen

	//Generiere zufällige alphanumerische Zeichen entsprechend der angegebenen Länge Verifiable.prototype.randomWord=function(range){
	 var str = "",pos,
	   arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', ​​\u200b\u200b', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
	 für(var i=0; i<Bereich; i++){
	  pos = Math.round(Math.random() * (arr.length-1));
	  str += arr[pos];
	 }
	 gibt str zurück;
	}

Text zeichnen

	//Text zeichnen Verifiable.prototype.drawText=function(){
		var das=dies;
		var count = 4; //Anzahl der Zeichen var textW = 40; //Breite des Textes var code=this.code = this.randomWord(count);
		var codeArr = code.split("");
		var Text, x;
		codeArr.forEach(Funktion(c,i){
			x = das.w/Anzahl*i+textW/2;
			//Text zeichnen text = new Text({
				x:x,
				y:textW-10,
				text:c,
				Schriftart: „30px ans-serif“,
				Textausrichtung: 'zentriert',
				füllen:wahr,
				Füllstil: '#412D6A'
			});
			das.renderArr.push(text);
		})		
	}

Die Wirkung zu diesem Zeitpunkt:

Interferenzlinien zeichnen

//Interferenzlinie zeichnen Verifiable.prototype.interfering=function(){
		var Anzahl = diese.Zeilenanzahl=20,Zeile,ctx=diese.ctx;
		var startX,
			startY,
			EndeX,
			Ende,
			Farbe;
			
		für(var i=0;i<Anzahl;i++){
			//Zufällige Startkoordinaten, Endkoordinaten, Farbe startX = _.getRandom(0,140);
			startY = _.getRandom(0,40);
			endX = _.getRandom(0,140);
			endY = _.getRandom(0,40);
			Farbe = _.getRandomColor();
			//Definiere eine gerade Linie line = new Line(ctx,{
				x:0,
				y:0,
			 	startX:startX,
			 	startY:startY,
			 	EndeX:EndeX,
			 	EndeY:EndY,
			 	Strichstil: Farbe
			})
			
			dies.renderArr.push(Zeile);
		}
	}

Die Wirkung ist wie folgt:

Seitenlayout hinzufügen

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
  <meta charset="UTF-8">
  <title>überprüfbar</title>
  <Stil>
   #Kasten{
		Breite: 140px;
		Höhe: 40px;
		Position: absolut;
		
	}
	#inputDiv{
		Breite: 220px;
		Position: absolut;
		Rand: 0 automatisch;
		links: 0;
		oben: 30px;
		rechts:0;
		unten: 0;
	}
	#Container{
		Breite: 220px;
		Höhe: 60px;
		Position: absolut;
		Rand: 0 automatisch;
		links: 0;
		oben: 60px;
		rechts:0;
		unten: 0;
	}
	.aktualisieren{
		Position: absolut;
		links: 140px;
	}
  </Stil>
</Kopf>
 
<Text>
	<div id='EingabeDiv'>
  	Bestätigungscode: <input size=10 id='codeInput'><img id='stateImg' style="vertical-align: middle;width:20px"></img>
  </div>
  <div id="Behälter">
  	<div id='Box'></div>
  	<a href="javascript:void 0" class="refresh" onclick="refresh()">Eine ändern</a>
  </div>
</body>
	<script type="text/javascript" src='verifiable.js'></script>
  <Skripttyp="text/javascript">
 	var box = document.getElementById('box');
 	var stateImg = document.getElementById('stateImg');
 	var codeInput = document.getElementById('codeInput');
 	
	überprüfbar.init(Box,CodeInput,StateImg);
	
	//Ändern eines Bildes Funktion refresh(){
		überprüfbar.renderArr.length=0;
		überprüfbar.draw();
	}
  </Skript>
</html>

Eingabefeldereignis hinzufügen

	//Eingabefeldereignis Verifiable.prototype.inputValid=function(input){
		var val = Eingabe.Wert;
		wenn (Wertlänge < 4) zurückgeben;
		
		wenn(dieser.code==val){
			console.log('suc');
			dies.ergebnis(0);
		}anders{
			dies.ergebnis(1);
		}
	}

Hinzufügen einer Erfolgs- und Fehlerüberprüfung

//Ergebnisse verarbeiten Verifiable.prototype.result=function(result){
		var codeInput = diese.codeInput;
		var stateImg = dies.stateImg;
		if(Ergebnis==0){//Erfolg stateImg.src="./images/suc.jpeg";
			codeInput.readOnly=true;
		}else {//FehlercodeInput.readOnly=false;
			stateImg.src="./images/fail.jpeg";
			dies.renderArr.Länge=0;
			dies.zeichnen();
		}
	}

Beenden

Code herunterladen

Damit ist dieser Artikel über das Implementierungsbeispiel von JavaScript zur Implementierung von dynamischem Verifizierungscode auf der Seite abgeschlossen. Weitere relevante Inhalte zu dynamischem JavaScript-Verifizierungscode finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • JSP-Methode zum Generieren eines Seitenüberprüfungscodes [mit Code]
  • js implementiert einfachen Verifizierungscode
  • js realisiert den Countdown-Effekt des Klickens, um den Bestätigungscode zu erhalten
  • Drei Möglichkeiten zur Implementierung der JS-Verifizierungscodefunktion
  • JS erstellt den Implementierungscode für den Grafiküberprüfungscode
  • js + canvas realisiert die Funktion des Schiebepuzzle-Verifizierungscodes
  • js+html, um einen einfachen Bestätigungscode zu erstellen
  • Implementierungscode für den JS-Verifizierungscode
  • js-Plugin zur Implementierung des Bildschiebeüberprüfungscodes

<<:  Hinweise zur Zeitverwaltung des Linux-Kernel-Gerätetreibers

>>:  Detaillierte Erklärung zum Remotezugriff auf die MySQL-Datenbank über Workbench

Artikel empfehlen

Detaillierte Erläuterung des Implementierungsprozesses von Nginx zur Aktivierung des Brotli-Komprimierungsalgorithmus

Vorwort Um in Webanwendungen Datenverkehr zu spar...

Eine detaillierte Darstellung des Prozesses zum Erklimmen einer Grube des Docker-Bereitstellungsdienstes

Zum ersten Mal schreiben. Gestatten Sie mir, mich...

Zusammenfassung gängiger MySQL-DDL-Operationen

Bibliotheksverwaltung Erstellen einer Bibliothek ...

Docker stellt Mysql, .Net6, Sqlserver und andere Container bereit

Inhaltsverzeichnis Installieren Sie Docker unter ...

Einführung in den Unterschied zwischen On- und Where-Bedingungen in der MySQL-Left-Join-Operation

Priorität Der Grund, warum das Platzieren derselb...

Allgemeine Symbole in Unicode

Unicode ist ein von einer internationalen Organis...

Vue öffnet ein neues Fenster und implementiert ein grafisches Beispiel für die Parameterübergabe

Die Funktion, die ich erreichen möchte, besteht d...

Einfaches Webdesign-Konzept – Farbabstimmung

(I) Grundkonzepte der Farbabstimmung auf Webseiten...

Zusammenfassung relevanter Erkenntnisse zur Umsetzung adaptiven Webdesigns

Wie funktioniert „Adaptives Webdesign“? Eigentlich...

Tutorial zum Herunterladen, Installieren und Bereitstellen von Tomcat für IDEA (mit zwei Hot-Deployment-Einstellungsmethoden für IDEA)

Inhaltsverzeichnis Tomcat-Download-Tutorial Tutor...

Beispielcode für HTML-Layout links und rechts

CSS: Code kopieren Der Code lautet wie folgt: html...

jQuery benutzerdefinierter Lupeneffekt

In diesem Artikelbeispiel wird der spezifische Co...

Wie melde ich mich per Remote-Zugriff bei der MySql-Datenbank an?

Einführung: Manchmal müssen wir zur Entwicklung e...

Wie verstecke ich einen bestimmten Text in HTML?

Code zum Ausblenden von Text, Ausblenden eines bes...

So verwenden Sie nginx zum Konfigurieren des Zugriffs auf wgcloud

Die Nginx-Konfiguration ist wie folgt: Wie http:/...