CAPTCHA существует и работает, но не активна в контактной форме - PullRequest
Новая
       27

CAPTCHA существует и работает, но не активна в контактной форме

0 голосов
/ 14 апреля 2020

Я пытаюсь добавить IconCaptcha (https://github.com/fabianwennink/IconCaptcha-Plugin-jQuery-PHP#installation) в форму контакта.

Мне удалось успешно реализовать его на веб-странице. Но всякий раз, когда я нажимаю кнопку SUBMIT (с другими полями, заполненными), форма отправляется. Даже если я нажму не ту капчу ... Или вообще нет капчи.

Вот контакт. php Код страницы: 

<?php


    session_start();
	require('IconCaptcha-PHP/src/captcha-session.class.php');
    require('IconCaptcha-PHP/src/captcha.class.php');
    IconCaptcha::setIconsFolderPath('../assets/icons/');
    IconCaptcha::setIconNoiseEnabled(true);
    if(!empty($_POST)) {
        if(IconCaptcha::validateSubmission($_POST)) {
            $captchaMessage = 'Le message a bien été envoyé!';
        } else {
            $captchaMessage = json_decode(IconCaptcha::getErrorMessage())->error;
        }
    }
?>

<!doctype html>
<!--
  * IconCaptcha Plugin: v2.5.0
* Copyright © 2017, Fabian Wennink (https://www.fabianwennink.nl)
* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
-->
<html>
<head>

<!--FORMAT-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->


<!--STYLES-->
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-4.3.1.css" rel="stylesheet" type="text/css">
<!-- IconCaptcha stylesheet -->
<link href="IconCaptcha-PHP/assets/css/icon-captcha.min.css" rel="stylesheet" type="text/css">

<script src="http://use.edgefonts.net/montserrat:n4:default.js" type="text/javascript"></script>

<!--SCRIPTS BOOTSTRAP-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>

<body>

<section id="contact" class="section-orange">
	<div class="container-fluid" justify-content="center" style="width: 90%">
<!-- DEBUT FORMULAIRE CONTACT -->
					 <?php
                    if(isset($captchaMessage)) {
                        echo '<b>Captcha Message: </b>' . $captchaMessage;
                    }
                ?>
                    <form id="reused_form" role="form" method="post" action="envoiformulaire.php">
                            <div class="row">
                                <div class="col-md-6 form-group">
                                        <label for="first_name"></label>
                                        <input id="firstname" name="first_name" type="text" class="form-control" placeholder="Prénom" required="required">
                                </div>
                                <div class="col-md-6 form-group">
                                        <label for="last_name"></label>
                                        <input id="lastname" name="last_name" type="text" class="form-control" placeholder="NOM" required="required">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 form-group">
                                        <label for="email"></label>
                                        <input id="email" name="email" type="email" class="form-control" placeholder="Courriel" required="required">
                                </div>
                                <div class="col-md-6 form-group">
                                        <label for="telephone"></label>
                                        <input id="telephone" type="tel" name="telephone" onkeyup="formatte(this,2)" onkeypress="return isNumberKey(event)" class="form-control" placeholder="Téléphone" required="required" minlength="14" maxlength="14">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 form-group">
                                        <label for="comments"></label>
                                        <textarea id="message" name="comments" class="form-control" placeholder="Message (400 caractères maximum)" maxlength="400" rosws="4" required="required"></textarea>
                                </div>
								<div class="col-md-12 form-group">
                                  <div class="captcha-holder"></div>
                                </div>
                                <div class="col-md-12 form-group">
                                   <br> <input type="submit" id="btnContactUs" class="btn btn-success btn-send" value="Envoyer le message">
                                </div>
                            </div>

                    </form>
					 <script src="IconCaptcha-PHP/assets/js/icon-captcha.min.js" type="text/javascript"></script>
					 <!-- Initialize the IconCaptcha -->
        <script async type="text/javascript">
            $(window).ready(function() {
                $('.captcha-holder').iconCaptcha({
                    theme: ['light'],
                    fontFamily: '',
                    clickDelay: 500,
                    invalidResetDelay: 3000,
                    requestIconsDelay: 1500,
                    loadingAnimationDelay: 1500, // How long the fake loading animation should play.
                    hoverDetection: true,
                    showCredits: 'show',
                    enableLoadingAnimation: false,
                    validationPath: 'IconCaptcha-PHP/src/captcha-request.php',
                    messages: {
                        header: "Vous devez choisir, « …but, choose wiesly! »",
                        correct: {
                            top: "« You have chosen… wisely. »",
                            bottom: "Félicitations! Vous n'êtes pas un robot."
                        },
                        incorrect: {
                            top: "« You chose poorly! »",
                            bottom: "Oups! Mauvaise image."
                        }
                    }
                })
                    .bind('init.iconCaptcha', function(e, id) {
                        console.log('Event: Captcha initialized', id);
                    }).bind('selected.iconCaptcha', function(e, id) {
                    console.log('Event: Icon selected', id);
                }).bind('refreshed.iconCaptcha', function(e, id) {
                    console.log('Event: Captcha refreshed', id);
                }).bind('success.iconCaptcha', function(e, id) {
                    console.log('Event: Correct input', id);
                }).bind('error.iconCaptcha', function(e, id) {
                    console.log('Event: Wrong input', id);
                });
            });
        </script>
<!-- FIN FORMULAIRE CONTACT -->
                </div>

</section>
</body>
</html>

Вот список функций PHP. php для отправки формы: 

<?php
header('Content-Type: text/html; charset=utf-8');

if(isset($_POST['email'])) {
 
    $email_to = "mail@mail.com";
    $email_subject = "Nouveau message web";
 
    function died($error) {
        echo "Oups! Une ou plusieurs erreurs se trouvent dans votre formulaire.<br>";
        echo $error."<br /><br />";
        die();
    }
 
 
    // validation expected data exists
    if(!isset($_POST['first_name']) ||
        !isset($_POST['last_name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['telephone']) ||
        !isset($_POST['comments'])) {
        died('Oups! Un problème est survenu avec votre formulaire.');       
    }
 
     
 
    $first_name = $_POST['first_name']; // required
    $last_name = $_POST['last_name']; // required
    $email_from = $_POST['email']; // required
    $telephone = $_POST['telephone']; // not required
    $comments = $_POST['comments']; // required
 
    $error_message = "";
    $email_exp ='/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
 
  if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'Le courriel saisi ne semble pas valide.<br />';
  }
 
	 $phone_exp = "/^(\d\d\s){4}(\d\d)$/";
	
  if(!preg_match( $phone_exp,$telephone)) {
    $error_message .= 'Le numéro de téléphone saisi ne semble pas valide.<br />';
	    }
	
    $string_exp = "/^[A-Za-z àèìòùÀÈÌÒÙáéíóúýÁÉÍÓÚÝâêîôûÂÊÎÔÛãñõÃÑÕäëïöüÿÄËÏÖÜŸçÇßØøÅåÆæœ.'-]+$/";
 
  if(!preg_match($string_exp,$first_name)) {
    $error_message .= 'Le prénom saisi ne semble pas valide.<br />';
  }
 
  if(!preg_match($string_exp,$last_name)) {
    $error_message .= 'Le nom saisi ne semble pas valide.<br />';
  }

  if(strlen($comments) < 2) {
    $error_message .= 'Le message saisi ne semble pas valide.<br />';
  }
 
  if(strlen($error_message) > 0) {
    died($error_message);
  }
 
    $email_message = "Ci-après le formulaire complété.\n\n";
 
     
    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }
 
     
 
    $email_message .= "Prénom: ".clean_string($first_name)."\n";
    $email_message .= "NOM: ".clean_string($last_name)."\n";
    $email_message .= "Courriel: ".clean_string($email_from)."\n";
    $email_message .= "Téléphone: ".clean_string($telephone)."\n";
    $email_message .= "Message: ".clean_string($comments)."\n";
 
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'Content-Type: text/plain; charset="utf-8"'.
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
?>
 

Thank you for contacting us. We will be in touch with you very soon.
 
<?php
 
}
?>

Я предполагаю, что на странице контактов, когда я нажимаю кнопку SUBMIT, активируется PHP для отправки формы без CAPTCHA (method = post action = "envoiformulaire . php ").

Возможно, мне придется добавить« что-то », чтобы сделать кнопку« ОТПРАВИТЬ »доступной только после завершенной капчи. Но я не понял, как это сделать.

Может кто-нибудь дать мне подсказку?

С уважением,

Frédéri c.

1 Ответ

0 голосов
/ 15 апреля 2020

Я был в контакте с создателем иконки капчи. Он мне очень помог, на самом деле больше, чем я ожидал.

Первая ошибка, я поместил часть кодовой страницы проверки PHP в контактную форму: 

    if(!empty($_POST)) {
        if(IconCaptcha::validateSubmission($_POST)) {
            $captchaMessage = 'Le message a bien été envoyé!';
        } else {
            $captchaMessage = json_decode(IconCaptcha::getErrorMessage())->error;
        }
    }

Это должно go от контакта. php к envoiformulaire. php.

После этого он помог мне с моими орешками php skill ...

В верхней части страницы контактов необходимо добавить следующий код: 

<?php
    session_start();

    require('IconCaptcha-PHP/src/captcha-session.class.php');
    require('IconCaptcha-PHP/src/captcha.class.php');

    IconCaptcha::setIconsFolderPath('../assets/icons/');
    IconCaptcha::setIconNoiseEnabled(true);
?>

И добавить этот код (ДОБАВИТЬ) в формуляр. php: 

<?php
	session_start(); // ADD THIS

	header('Content-Type: text/html; charset=utf-8');

	require('IconCaptcha-PHP/src/captcha-session.class.php'); // ADD THIS
	require('IconCaptcha-PHP/src/captcha.class.php'); // ADD THIS

	IconCaptcha::setIconsFolderPath('../assets/icons/'); // ADD THIS
	IconCaptcha::setIconNoiseEnabled(true); // ADD THIS

	if(isset($_POST['email'])) {

		$email_to = "mail@mail.com";
		$email_subject = "Nouveau message web";

		function died($error) {
			echo "Oups! Une ou plusieurs erreurs se trouvent dans votre formulaire.<br>";
			echo $error."<br /><br />";
			die();
		}


		// validation expected data exists
		if(!isset($_POST['first_name']) ||
			!isset($_POST['last_name']) ||
			!isset($_POST['email']) ||
			!isset($_POST['telephone']) ||
			!isset($_POST['comments'])) {
			died('Oups! Un problème est survenu avec votre formulaire.');
		}

		// ADD THIS
		if(!IconCaptcha::validateSubmission($_POST)) {
			died('ADD YOUR ERROR MESSAGE HERE');
		}

		...

И теперь, это прекрасно работает, спасибо Фабиан!

Я надеюсь, что этот пост поможет кому-то в будущем.

Frédéri c.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...