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
![Tutorial zum Deaktivieren und Aktivieren von Triggern in MySQL [Empfohlen]](/upload/images/67cae57e84945.webp)
Artikel empfehlen
Ideen und Lösungen zur Fehlerbehebung bei hoher CPU-Auslastung in Linux-Systemen
Vorwort Als Linux-Betriebs- und Wartungsingenieur...
Bringen Sie Ihnen bei, wie Sie den Beobachtermodus in Javascript implementieren
Inhaltsverzeichnis Was ist das Beobachtermuster? ...
Wie können die Transaktionseigenschaften von MySQL InnoDB sichergestellt werden?
Vorwort Wenn Sie jemand fragt: „Was sind die Merk...
JavaScript verwendet häufig Array-Deduplizierung tatsächliche Kampf Quellcode
Mit der Array-Deduplizierung wird man häufig bei ...
Implementierung von MySQL-indexbasierten Stresstests
1. Datenbankdaten simulieren 1-1 Datenbank- und T...
Lösung für 404-Fehler beim Herunterladen einer APK-Datei vom IIS-Server
Bei der Verwendung von IIS als Server wurde die A...
Wissen Sie, wie man Mock in einem Vue-Projekt verwendet?
Inhaltsverzeichnis Erster Schritt: Der zweite Sch...
Eine kurze Einführung in Linux-Leistungsüberwachungsbefehle kostenlos
Wie können wir den Fehler lokalisieren, wenn im S...
JavaScript implementiert die Generierung eines 4-stelligen zufälligen Bestätigungscodes
In diesem Artikelbeispiel wird der spezifische Co...
JS erzielt Fünf-Sterne-Lobeffekt
Verwenden Sie JS, um objektorientierte Methoden z...
Die JD Vue3-Komponentenbibliothek unterstützt den detaillierten Prozess der Miniprogrammentwicklung
Quellcode-Vorschau: https://github.com/jdf2e/nutu...
Detaillierte Erklärung der wunderbaren Verwendung von SUID, SGID und SBIT in Linux
Vorwort Die Dateiberechtigungsverwaltung von Linu...
Verwenden Sie nginx + sekundären Domänennamen + https-Unterstützung
Schritt 1: Fügen Sie dem primären Domänennamen vo...
echars 3D-Kartenlösung für benutzerdefinierte Farben von Regionen
Inhaltsverzeichnis Frage verlängern Lösung des Pr...
Detaillierte Erläuterung der Konfigurationsmethode für den Lastenausgleich von Apache + Tomcat7 unter Windows
Vorbereitung Windows Server 2008 R2 Enterprise (2...