Wie binde ich ein Captcha mit Hilfe des Easy Alphanumeric Captcha-Plugins ein?
- Easy Alphanumeric Captcha Plugin ist ein jQuery-Plugin, mit dem Sie z.B. beim Login überprüfen können, ob es sich beim Besucher um einen Bot oder einen Menschen handelt.
- Dabei muss der Besucher eine Kombination aus kleinen und großen Buchstaben und Zahlen erkennen und korrekt eingeben.
- Ist die Eingabe falsch, wird automatisch ein neues Captcha geladen.
- Zur Einbindung laden Sie sich das Captcha herunter (für die Inhalte des Links und den Einsatz des Plugins übernehme ich keine Haftung!): https://www.jqueryscript.net/other/alphanumeric-captcha.html
- Unten stehend ein Beispiel für die Einbindung in der einfachsten Variante ohne erweiterte Optionen.
- Einbindung von jQuery und der Plugin-Datei:
<head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/jquery-captcha.min.js"></script> </head> - HTML:
<body> <div><canvas id="canvasCaptcha"></canvas></div> <div><input name="code"></input></div> <div><button id="validation">Prüfen</button></div> ... Skript-Einbindung ... </body> - JavaScript:
// Neues Captcha initialisieren const captcha = new Captcha($('#canvasCaptcha')); // Ueberpruefung beim Klick auf den Button $('#validation').on('click', verifyCaptcha); // Funktion zum Ueberpruefen des Captchas function verifyCaptcha() { const answer = captcha.valid($('input[name="code"]').val()); if (answer == true) { alert('Eingabe ist korrekt.'); } }