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
Eigenschaften und Quellcode der Echarts-Legendenkomponente
Die Legendenkomponente ist eine häufig verwendete...
Einführung und Tipps zur Verwendung der interaktiven Visualisierungs-JS-Bibliothek gojs
Inhaltsverzeichnis 1. Einführung in Gojs 2. Gojs ...
Detaillierter Vergleich von Ember.js und Vue.js
Inhaltsverzeichnis Überblick Warum ein Framework ...
Analysieren Sie das Arbeitsprinzip von Tomcat
SpringBoot ist wie eine riesige Python, die sich ...
Eine kurze Analyse der LRU-verknüpften Liste von MySQL
1. Beschreiben Sie kurz die traditionelle LRU-ver...
So legen Sie schnell den Dateipfad-Alias in React fest
React ist eine JavaScript-Bibliothek zum Erstelle...
Beispiele für die Verwendung von HTML-Listen-Tags dl, ul, ol
Code kopieren Der Code lautet wie folgt: <!-- ...
Javascript-Grundlagen zu integrierten Objekten
Inhaltsverzeichnis 1. Einführung in integrierte O...
Teilen Sie 8 MySQL-Fallstricke, die Sie erwähnen müssen
MySQL ist einfach zu installieren, schnell und ve...
Abfrageprozess und Optimierungsmethode der (JOIN/ORDER BY)-Anweisung in MySQL
Die EXPLAIN-Anweisung wird im MySQL-Abfrageanweis...
Docker ändert die Konfigurationsinformationen eines nicht gestarteten Containers
Als ich Docker zum ersten Mal verwendete, habe ic...
MySQL-FAQ-Serie: So vermeiden Sie eine plötzliche Vergrößerung der ibdata1-Datei
0. Einleitung Was ist die ibdata1-Datei? ibdata1 ...
Flex-Grow-, Flex-Shrink-, Flex-Basis- und Neun-Raster-Layout verstehen
1. Flex-Grow-, Flex-Shrink- und Flex-Basis-Eigens...
Beim Layout von Webseiten sollten Kompatibilitätsprobleme mit IE6 berücksichtigt werden
Die folgende Abbildung zeigt die Browser-Anzeiger...
So überprüfen Sie die PCIe-Version und -Geschwindigkeit unter Linux
PCIE verfügt über vier verschiedene Spezifikation...