jQuery wurde vom Amerikaner John Resig erstellt. Es handelt sich um eine schnelle und übersichtliche JavaScript-Bibliothek, die viele Durchlauffunktionen bereitstellt, wie zum Beispiel every(fn). jQuery kann den Code und den HTML-Inhalt der HTML-Seite des Benutzers trennen. Das heißt, es ist nicht erforderlich, eine Reihe von js in den HTML-Code einzufügen, um den Befehl aufzurufen. Es sind diese Betriebsmerkmale, die es Benutzern ermöglichen, HTML-Dokumente und Ereignisse einfach zu verarbeiten, Animationseffekte zu implementieren und problemlos Interaktionen für Websites bereitzustellen. Heute hat jQuery viele JavaScript-Experten aus der ganzen Welt angezogen.
Das jQuery Real Person Plugin, über das wir hier sprechen werden, ist ein jQuery-Verifizierungscode-Plugin, das vollständig in JavaScript geschrieben ist.
Das jQuery Real Person Plugin implementiert hauptsächlich zwei Überprüfungsmethoden: Buchstaben und gemischte Buchstaben und Zahlen, wodurch eine automatische Übermittlung wirksam verhindert werden kann bilden. Die Anzeige des Erscheinungsbilds bietet Anpassungsfunktionen. Die Standardeinstellung besteht aus 6-stelligen Buchstaben, wie in Abbildung 1 dargestellt.
Je nach Bedarf können Sie auch einen 8-stelligen Bestätigungscode anpassen, wie in Abbildung 2 dargestellt.
Oder ein gemischter alphanumerischer Bestätigungscode, wie in Abbildung 3 dargestellt.
Darüber hinaus können Benutzer auch den Text unten anpassen, wie in Abbildung 4 dargestellt.
Können wir diese einzigartigen und leistungsstarken Verifizierungsschnittstellen selbst implementieren? Die Antwort ist ja. Im Folgenden analysieren wir den Verifizierungsprozess des jQuery Real Person Plugin anhand einer Schritt-für-Schritt-Erklärung.
Schritt 1: Bevor Sie diese Überprüfungsfunktion verwenden, führen Sie JavaScript- und CSS-Dateien ein.
<script type="text/JavaScript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/JavaScript" src="Scripts/jquery.realperson.js"></script>
<style type="text/css">@import "Styles/jquery.realperson.css";</style>
Nach dem Login kopieren
Im obigen Code stellt Zeile 1 die jQuery-Klassenbibliothek vor. Sie können die neueste jQuery-Klassenbibliothek von der offiziellen Website herunterladen. Zeile 2 stellt die Verifizierungscode-Plugin-Bibliothek jquery.realperson.js vor. Zeile 3 führt die Bestätigungscode-Stildatei jquery.realperson.css ein. Die Website-Oberfläche ist in Abbildung 5 dargestellt.
Schritt 2: Fügen Sie das Textfeldelement in die Seite ein, das den HTML-Teil darstellt.
<table>
<tr>
<td><input type="text" id="txtValidate" name="defaultReal"></td>
</tr>
<tr>
<td><asp:Button ID="btnSubmit" runat="server" Text="登录" /></td>
</tr>
</table>
Nach dem Login kopieren
Im obigen Code verwendet Zeile 1 zwei Zeilen und eine Spalte für das Layout, eine Zeile wird zum Speichern des Textfelds und eine Zeile zum Speichern der Anmeldeschaltfläche verwendet. Zeile 3 definiert das Textfeld mit id="txtValidate" zur Eingabe des Verifizierungscodes. Zeile 6 definiert die Schaltfläche „Senden“ mit der ID „btnSubmit“, die zum Auslösen von Hintergrundereignissen für die Anmeldung am System verwendet wird.
Schritt 3: Wenn die Seite initialisiert ist, rufen Sie das Bestätigungscode-Plugin auf, um die Anzeige des Bestätigungscodes zu initialisieren.
<script>
$(document).ready(function () {
$("#txtValidate").realperson({ length: 5 });
}
);
</script>
Nach dem Login kopieren
Im obigen Code ist die zweite Zeile der Vorgang, der beim Laden der Seite ausgeführt wird, was dem onLoad-Ereignis der Seite entspricht. Zeile 3 ruft die Schnittstelle der Verifizierungscode-Steuerung auf, um den Verifizierungscode anzuzeigen.
Schritt 4, Kerncode-Analyse.
/* 核心代码
@param target (jQuery) the input field
@param inst (object) the current instance settings
@return (string) the additional content */
_generateHTML: function(target, inst) {
var text = '';
for (var i = 0; i < inst.settings.length; i++) {
text += CHARS.charAt(Math.floor(Math.random() *
(inst.settings.includeNumbers ? 36 : 26)));
}
var html = '<div class="realperson-challenge"><div class="realperson-text">';
for (var i = 0; i < DOTS[0].length; i++) {
for (var j = 0; j < text.length; j++) {
html += DOTS[CHARS.indexOf(text.charAt(j))][i] + ' ';
}
html += '\n';
}
html += '</div><div class="realperson-regen">' + inst.settings.regenerate +
'</div></div><input type="hidden" class="realperson-hash" name="' +
inst.settings.hashName.replace(/\{n\}/, target.attr('name')) +
'" value="' + this._hash(text) + '">';
return html;
Nach dem Login kopieren
Im obigen Code werden die Zeilen 7 bis 9 verwendet, um zufällige Zeichen des Bestätigungscodes zu generieren. In den Zeilen 12 bis 22 werden Hintergrundzeichen und Zufallszeichen zu HTML-Code zusammengesetzt und an den Browser ausgegeben.
Anhand der obigen Analyse können wir erkennen, dass Verifizierungscodes eine sehr wichtige Rolle bei der Passwortsicherheit spielen. Denken Sie beispielsweise an die Sicherheit von Bankkonten: Ein Hacker verschafft sich auf andere Weise ein Bankkonto und öffnet dann die Anmeldeschnittstelle seines Online-Bankings. Verwenden Sie die Methode zum Anzeigen des Quellcodes im Browser, um den HTML-Code der Anmeldeschnittstelle zu analysieren. Es wurde festgestellt, dass die Seite keinen Bestätigungscode und keine anderen Sicherheitseinstellungen enthält , sodass er mit einem Programm die Anfrage des Browsers simulieren kann. Der Bankserver übermittelt das Konto und das Passwort. Das Passwort ist normalerweise eine 6-stellige arabische Zahl und die Wahrscheinlichkeit, dass ein Passwort korrekt ist, beträgt 10 hoch 6, also 1 Million Mal. Ein Hacker findet einen leistungsstarken Computer mit hoher Bandbreite und führt ein Programm aus, um Bankpasswörter zu extrahieren. Unter der Annahme, dass dieser Computer 10 Passwörter in einer Sekunde testen kann, dauert dies 100.000 Sekunden (also 27 Stunden, etwa einen Tag). Gehen Sie alle Passwörter durch. Tatsächlich dauert es nicht so lange, bis der Hacker das Passwort stiehlt und das Geld auf dem Bankkonto überwiesen wird. Mit anderen Worten: Wenn kein Verifizierungscode vorhanden ist, können Hacker innerhalb von etwa einem Tag illegale Einnahmen erzielen, indem sie das Programm verwenden, um an Bankpasswörter zu gelangen.
In praktischen Anwendungen ist der Verifizierungscode für chinesische Zeichen auch ein relativ häufiger Verifizierungscode. Sein Prinzip besteht darin, mehrere chinesische Zeichen aus einem chinesischen Zeichensatz zufällig auszuwählen, ein Bild zu generieren und es über die HTTP-Ausgabe auf die Seite zu streamen. Wenn der Client korrekte chinesische Zeichen eingibt, kann der Vorgang fortgesetzt werden, andernfalls ist die Anmeldung verboten. China hat eine fünftausendjährige Geschichte, eine umfangreiche und tiefgründige Kultur und mehr als 90.000 chinesische Schriftzeichen. Im Vergleich zum 10-stelligen numerischen Prüfcode und dem 26-stelligen alphabetischen Prüfcode ist der chinesische Schriftzeichen-Prüfcode sicherer. Daher können wir durch das Studium der Sicherheit von Bestätigungscodes die Tiefe der chinesischen Kultur besser einschätzen. Es stellt sich heraus, dass die Passwortüberprüfung auch auf diese Weise durchgeführt werden kann!
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
