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:
Schreiben des KonstruktorsTextkonstruktor
//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:
|
<<: Hinweise zur Zeitverwaltung des Linux-Kernel-Gerätetreibers
>>: Detaillierte Erklärung zum Remotezugriff auf die MySQL-Datenbank über Workbench
Artikel empfehlen
Detaillierter Installationsprozess der MySQL 8.0 Windows-ZIP-Paketversion
Der Installationsprozess von MySQL 8.0 Windows Zi...
Implementierung des Imports und Exports von Docker-Images
Docker-Nutzung von Gitlab Gitlab Docker Startbefe...
So können Sie lange Vue-Listen schnell laden
Inhaltsverzeichnis Hintergrund Hauptinhalt 1. Kom...
So lösen Sie das Problem der automatischen Paketaktualisierung im Debian-System
Ich weiß nicht, wann es angefangen hat, aber jede...
Analysieren Sie CSS, um die Farbfunktion des Bildthemas zu extrahieren (Tipps)
Hintergrund Alles begann, als ein Klassenkamerad ...
Detaillierte Analyse der Verwendungs- und Anwendungsszenarien von Slots in Vue
Was sind Slots? Wir wissen, dass in Vue nichts in...
JavaScript-Code zum Erzielen eines einfachen Kalendereffekts
In diesem Artikel wird der spezifische Code für J...
Implementierungscode für den MySQL-Protokolltrigger
SQL-Anweisung DROP-TRIGGER WENN EXISTIERT sys_men...
Vue implementiert eine einfache bidirektionale Datenbindung
In diesem Artikelbeispiel wird der spezifische Co...
Vue setzt die Daten auf ihren ursprünglichen Zustand zurück
In einigen Fällen müssen die Daten in den Daten w...
Lösung für unvollständige Textanzeige im El-Tree
Inhaltsverzeichnis Methode 1: Der einfachste Weg,...
Docker verwendet Dockerfile, um die Node.js-Anwendung zu starten
Schreiben einer Docker-Datei Am Beispiel des von ...
Das Docker-Intranet erstellt DNS und verwendet den Domänennamenzugriff anstelle des IP:Port-Vorgangs.
Wenn ich beispielsweise einen Jenkins-Server in m...
So verwenden Sie den JS-Code-Compiler Monaco
Vorwort Meine Anforderungen sind Syntaxhervorhebu...
Detaillierte Erklärung zum Aktivieren des https-Dienstes in Apache unter Linux
Dieser Artikel beschreibt, wie man den https-Dien...