Easy JQuery Ajax PHP CAPTCHA - 2 Minuten Setup

Dieses Tutorial zeigt, wie ein grundlegendes Ajax Captcha mit PHP, JQuery und Bootstrap schnell implementiert werden kann. Obwohl es nicht sehr sicher ist, bietet es eine einfache, anpassbare Lösung zur Verhinderung automatisierter Formulareinreichungen. Es ist ideal für Situationen, in denen ein schneller, einfacher Captcha ohne die Komplexität von Recaptcha benötigt wird.

Schlüsselmerkmale:

• Einfache Setup: Minimaler Code, bereit für die Integration in Minuten.
• jQuery Validieren Integration: arbeitet nahtlos mit dem beliebten jQuery Validate Plugin.
• Anpassbar: Steuerschrift, Größe, Farbe und Hintergrundfarbe.
• PHP-basiert: generiert Captchas auf der serverseitigen, keine externen APIs erforderlich.

Demo:

Eine Demo, die die CAPTCHA -Funktionalität zeigt (Link zur Demo würde hier gehen, wenn dies bereitgestellt wird).

[Bild der Captcha -Demo würde hierher gehen, wenn er zur Verfügung gestellt wird]

herunterladen:

Der vollständige Quellcode ist auf GitHub verfügbar (Link zu Github Repo würde hier hier gehen, wenn dies angegeben ist).

Implementierung:

Die Captcha -Implementierung besteht aus HTML-, JQuery- und PHP -Komponenten.

1. HTML (mit Bootstrap):

<label class="" for="captcha">*Please enter the verification code shown below.</label>
<div id="captcha-wrap">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174028207285395.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="Easy jQuery AJAX PHP Captcha - 2 minute setup " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Easy jQuery AJAX PHP Captcha - 2 minute setup " />
</div>
<input class="narrow text input" id="captcha" name="captcha" type="text" placeholder="Verification Code" />

2. JQuery:

Dieser JQuery -Code erstellt CAPTCHA -Aktualisierung und Validierung mit AJAX. Es nutzt die JQuery Validate Plugins remote -Regel für die serverseitige Überprüfung.

$(function() {
    WEBAPP = {
        settings: {},
        cache: {},
        init: function() {
            this.cache.$form = $('#captcha-form'); // Assumes your form has id="captcha-form"
            this.cache.$refreshCaptcha = $('#refresh-captcha');
            this.cache.$captchaImg = $('img#captcha');
            this.cache.$captchaInput = $(':input[name="captcha"]');
            this.eventHandlers();
            this.setupValidation();
        },
        eventHandlers: function() {
            WEBAPP.cache.$refreshCaptcha.on('click', function(e) {
                WEBAPP.cache.$captchaImg.attr("src", "/php/newCaptcha.php?rnd=" + Math.random());
            });
        },
        setupValidation: function() {
            WEBAPP.cache.$form.validate({
                onkeyup: false,
                rules: {
                    "captcha": {
                        required: true,
                        remote: {
                            url: '/php/checkCaptcha.php',
                            type: "post",
                            data: {
                                code: function() {
                                    return WEBAPP.cache.$captchaInput.val();
                                }
                            }
                        }
                    }
                    // Add other form field validation rules here as needed
                },
                messages: {
                    "captcha": {
                        required: "Please enter the verification code.",
                        remote: "Verification code incorrect, please try again."
                    }
                    // Add other form field error messages here as needed
                },
                submitHandler: function(form) {
                    // Handle successful form submission here (e.g., AJAX submission)
                }
            });
        }
    };
    WEBAPP.init();
});

3. PHP (newcaptcha.php):

Dieses PHP -Skript generiert ein neues Captcha -Bild und speichert den Code in einer Sitzungsvariablen.

<?php
session_start();

$string = '';
for ($i = 0; $i < 6; $i++) {
    $string .= chr(rand(97, 122));
}

$_SESSION['captcha'] = $string;

$dir = '../fonts/'; // Path to your fonts directory
$image = imagecreatetruecolor(165, 50);
$font = "PlAGuEdEaTH.ttf"; // Your font file
$color = imagecolorallocate($image, 113, 193, 217);
$white = imagecolorallocate($image, 255, 255, 255);
imagefilledrectangle($image, 0, 0, 399, 99, $white);
imagettftext($image, 30, 0, 10, 40, $color, $dir . $font, $_SESSION['captcha']);

header("Content-type: image/png");
imagepng($image);
?>

4. PHP (checkcaptcha.php):

Dieses Skript überprüft die Captcha -Eingabe des Benutzers gegen die Sitzungsvariable.

<?php
session_start();

if (isset($_REQUEST['code'])) {
    echo json_encode(strtolower($_REQUEST['code']) == strtolower($_SESSION['captcha']));
} else {
    echo 0;
}
?>

Denken Sie daran, Dateipfade und Schriftstellungen so anzupassen, dass sie Ihrer Projektstruktur entspricht. Dies liefert ein funktionales, wenn auch einfaches CAPTCHA -System. Für eine höhere Sicherheit sollten Sie eine robustere Lösung wie Recaptcha verwenden.

Das obige ist der detaillierte Inhalt vonEasy JQuery Ajax PHP CAPTCHA - 2 Minuten Setup. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!