SweetAlert [Résolu]

ckrisL 8 Messages postés jeudi 30 août 2018Date d'inscription 31 août 2018 Dernière intervention - 30 août 2018 à 12:39 - Dernière réponse : ckrisL 8 Messages postés jeudi 30 août 2018Date d'inscription 31 août 2018 Dernière intervention
- 31 août 2018 à 22:29
Bonjour,

J'ai un projet d'intégrer reCAPTCHA et je coince à intégrer sweetAlert en php.

Voici le script.
 <?php

$siteKey = "6Ld_OmcUAAAAAGQ0hrVFjZdZb9-BT9st5JKms86E";
$secretKey = "6Ld_OmcUAAAAAIML-hWUT-HX8Mk-QFLa4i1nS0oL";

require('recaptcha/autoload.php');

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

if(isset($_POST['g-recaptcha-response'])) {

$recaptcha = new \ReCaptcha\ReCaptcha($secretKey);

$resp = $recaptcha->verify($_POST['g-recaptcha-response']);

if ($resp->isSuccess()) {

var_dump('Captcha Valide');

} else {
 
echo "<script type='text/javascript'>alert(\"Captcha \ invalide\");</script>";

}

} else {

var_dump('Captcha non rempli');

}

}

?>

<html>

<head>

<title>reCAPTCHA demo: Simple page</title>

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <!-- sweetAlert-->
<script src="https://www.google.com/recaptcha/api.js" async defer></script> <!--reCAPTCHA-->

</head>

<body>

<form method="POST">

<div class="g-recaptcha" data-sitekey="<?php echo("$siteKey");?>"></div>

<br/>

<input type="submit" value="Valider" name="submitpost">

</form>

</body>

</html>


EDIT : Ajout des balises de code (jordane)
Afficher la suite 

Votre réponse

15 réponses

jordane45 22567 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 24 septembre 2018 Dernière intervention - 30 août 2018 à 13:53
0
Merci
Bonjour,

1 - Pour poster ton code sur le forum, à l'avenir, merci d'utiliser les balises de code
(explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

2 - Nous poster ton code sans nous expliquer en détail le souci rencontré ne nous sert à rien.
Pense à nous préciser si tu as d'éventuels messages d'erreurs et explique en quoi exactement ton souci consiste.
Sans cela..impossible pour nous de t'aider !
Commenter la réponse de jordane45
ckrisL 8 Messages postés jeudi 30 août 2018Date d'inscription 31 août 2018 Dernière intervention - Modifié par ckrisL le 30/08/2018 à 15:42
0
Merci
Je ferais attention à l'avenir veuillez m'escuser.
Le problème que je rencontre c'est que j'aimerais remplacer l'alerte Pop-Up traditionnelle situé dans la partie <?php?>
 echo "<script type='text/javascript'>alert(\"Captcha \ invalide\");</script>";

Par celui de sweetAlert mais je n'y arrive pas en php (quelques exemples de Pop-Up sweetAlert ici : https://sweetalert2.github.io

en html d'un autre projet la solution était de mettre la source sweetAlert dans <head>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js">

suivi de
<script> //JavaScript
$(document).ready(function(){
 $("form").submit(function(){
   var response = grecaptcha.getResponse();
      if(response.length == 0){
          sweetAlert("Oops...", 'Veuillez cocher la case "Je ne suis pas un robot"', "error"); //Alerte Pop-up
    return false;
 } 
 });
});
</script>

<script type="text/javascript">
 var onloadCallback = function() {
 grecaptcha.render('html_element', {
 'sitekey' : '6Ld_OmcUAAAAAGQ0hrVFjZdZb9-BT9st5JKms86E' //SiteKey
 });
 };
</script>

Pour que l'alerte Pop-Up de sweetAlert fonctionne.
Le script complet du premier projet en html si ça peut aider.
<!DOCTYPE html>
<html>
<head>
 <title>Nom entrepise</title>
 <link rel="stylesheet" type="text/css" href="style/style.css" />
 
 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <!-- SweetAlert-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script> //JavaScript
$(document).ready(function(){
 $("form").submit(function(){
   var response = grecaptcha.getResponse();
      if(response.length == 0){
          sweetAlert("Oops...", 'Veuillez cocher la case "Je ne suis pas un robot"', "error"); //Alerte Pop-up
    return false;
 } 
 });
});
</script>

<script type="text/javascript">
 var onloadCallback = function() {
 grecaptcha.render('html_element', {
 'sitekey' : '6Ld_OmcUAAAAAGQ0hrVFjZdZb9-BT9st5JKms86E' //SiteKey
 });
 };
</script>
 
</head>

<body>

 <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" 
 async defer> <!--Google ReCaptcha-->
 </script>
 
<div align="center">

<h3>Application web</h3>

<img src="https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/12046572_1655106934769523_8786844962802643801_n.jpg?_nc_cat=1&oh=ec7ed622ad6a0fe65d0d70474fb62d41&oe=5C35DD63.jpg"
  alt="Google logo"
   title="Google"/> <!--Professional Logo-->
 

<form action="https://www.google.fr" method="post">
 <div id="html_element"></div>
 
<section class="buttons"> <!--Custom button-->
 <button class="spin circle">Valider</button>
</section>
 
</form> 
 
 
</body>
</html>
jordane45 22567 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 24 septembre 2018 Dernière intervention - 31 août 2018 à 16:08
Il faut que ton echo se trouve apres le chargement du js.
jordane45 22567 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 24 septembre 2018 Dernière intervention - 31 août 2018 à 16:41
Essaye comme ça
<?php

//affichage des erreurs PHP
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

$siteKey = "6Ld_OmcUAAAAAGQ0hrVFjZdZb9-BT9st5JKms86E";
$secretKey = "6Ld_OmcUAAAAAIML-hWUT-HX8Mk-QFLa4i1nS0oL";

require_once('recaptcha/autoload.php');

if(isset($_POST['submitpost'])) {
  if(isset($_POST['g-recaptcha-response'])) {
    $recaptcha = new \ReCaptcha\ReCaptcha($secretKey);
    $resp = $recaptcha->verify($_POST['g-recaptcha-response']);
  } else {
    var_dump('Captcha non rempli');
  }
}

?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <!-- SweetAlert-->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <div class="form">
      <form method="POST">
        <div class="g-recaptcha" data-sitekey="<?php echo("$siteKey");?>"></div>
        <br/>
        <input type="submit" value="Valider" name="submitpost">
      </form>
    </div>
    <div class="messages">
      <?php
      if (!empty($res) && $resp->isSuccess()) {
          var_dump('Captcha Valide');
      } else {
        echo "<script type='text/javascript'>
                document.addEventListener('DOMContentLoaded', function() {
                  sweetAlert(\"Captcha \Invalide\");
                });
              </script>";
      }
      ?>
    </div>
  </body>
</html>
ckrisL 8 Messages postés jeudi 30 août 2018Date d'inscription 31 août 2018 Dernière intervention - 31 août 2018 à 21:13
Ca fonctionne mille merci ! Mais il y a un souci c'est que lorsque je valide le test du captcha l'echo "Captcha Valide" n'apparait pas. A la place apparait pop "Captcha Invalide"
jordane45 22567 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 24 septembre 2018 Dernière intervention - 31 août 2018 à 21:36
Ca c'est un autre souci.... donc ouverture d'un nouveau sujet sur le forum dédié à ce problème.
De toutes façons... on ne sait rien de la class recaptcha que tu utilises...donc impossible de te renseigner.
A tout hasard... vérifie que le "secret" que tu utilises est le bon (celui que tu auras récupéré via ton compte google : https://www.google.com/recaptcha/admin#list)
Tu peux aussi faire un
print_r($_POST);
au début de ton script pour essayer de voir ce que retourne ton formulaire.
Pense aussi à regarder la doc officielle si besoin :
https://developers.google.com/recaptcha/intro
ckrisL 8 Messages postés jeudi 30 août 2018Date d'inscription 31 août 2018 Dernière intervention - 31 août 2018 à 22:29
Entendu je te remercie pour ton aide j'ai beaucoup appris.
Commenter la réponse de ckrisL

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.