Easy JQuery Ajax PHP CAPTCHA - Configuration de 2 minutes

Ce tutoriel montre comment implémenter rapidement un AJAX CAPTCHA de base à l'aide de PHP, JQuery et Bootstrap. Bien qu'il ne soit pas hautement sécurisé, il offre une solution simple et personnalisable pour prévenir les soumissions de formulaires automatisées. Il est idéal pour les situations où un captcha rapide et facile est nécessaire sans la complexité de Recaptcha.

Caractéristiques de clé:

• Configuration facile: Code minimal, prêt à s'intégrer en quelques minutes.
• JQUERY Valider Intégration: Fonctionne de manière transparente avec le plugin JQuery Validate populaire.
• Personnalisable: Police de contrôle, taille, couleur et couleur d'arrière-plan.
• PHP basé sur PHP: génère des captchas sur le côté du serveur, aucune API externe nécessaire.

démo:

Une démo présentant la fonctionnalité CAPTCHA est disponible (le lien vers la démo irait ici si vous êtes fourni).

[L'image de la démo captcha irait ici si elle est fournie]

Télécharger:

Le code source complet est disponible sur github (le lien vers le repo github irait ici si fourni).

Implémentation:

L'implémentation CAPTCHA se compose de composants HTML, JQuery et PHP.

1. Html (en utilisant bootstrap):

<code class="language-html"><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" class="lazy" alt="Easy jQuery AJAX PHP Captcha - 2 minute setup ">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" 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"></code>

2. jQuery:

Ce code jQuery gère la rafraîchissement et la validation CAPTCHA à l'aide de AJAX. Il exploite la règle remote du plugin jQuery Valider

pour la vérification côté serveur.

<code class="language-javascript">$(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();
});</code>

3. Php (newcaptcha.php):

Ce script PHP génère une nouvelle image CAPTCHA et stocke le code dans une variable de session.

<code class="language-php"><?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);
?></code>

4. Php (checkcaptcha.php):

Ce script vérifie l'entrée CAPTCHA de l'utilisateur contre la variable de session.

<code class="language-php"><?php
session_start();

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

N'oubliez pas d'ajuster les chemins de fichier et les paramètres de police pour correspondre à la structure de votre projet. Cela fournit un système CAPTCHA fonctionnel, bien que basique. Pour une sécurité plus élevée, envisagez d'utiliser une solution plus robuste comme recaptcha.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!