Script ReCaptcha pour CMW 1.6.2 1.1

Bonjour,

Voici un petit tuto pour utiliser ReCAPTCHA sur le popup d'inscription. Ce tuto sera structuré en 4 parties. Il est important de les faire dans l'ordre et de bien lire toutes les phrases jusqu'au bout.

ReCATPCHA V2:

ReCAPTCHA invisible:



1. Lier recaptcha avec google
Pour ce faire, vous aurez besoin d'un compte google ( /!\ compte google ≠ compte GMAIL !).
Allez ici ( Merci de vous Connecter/S'inscrire pour voir les liens. ) et cliquez sur "Get reCAPTCHA " ou "My ReCAPTCHA" en haut à droite de la page. Une fois fait, si ce n'est pas déjà le cas, connectez-vous.

2. Créer un lien entre recaptcha et votre site
Dans le cadre "enregistrer un site", entrez un libellé ( = nom qui représentera votre "site").
Si vous avez choisi le captcha V2, cochez la première proposition (reCAPTCHA V2).
Si vous avez choisi le captcha invisible, cocher la deuxième proposition (reCAPTCHA invisible).
Une fois coché, la case "Domaines" apparaîtra. Dedans, vous y ajoutez le lien de votre site ( ex: craftmywebsite.fr sans le https:// ni http:// ). Vous pouvez bien sur ajouter plusieurs site comme par exemple "localhost". Remarque que les sous domaine sont automatiquement compris.
Vous acceptez les CGU de reCAPTCHA (que vous devez lire *tousse*)... et vous pouvez enfin cliquer sur enregistrer.

3. La clé publique / privée, ca tourne mal (explication)
Afin d'assurer le bon fonctionnement du captcha, google vous met à disposition deux clés. Ces clés sont réservées uniquement aux sites que vous avez mentionnés dans le point 2. Inutile donc de les mettre ailleurs... Si vous l'avez quand même fait, un message d'erreur apparaîtra dans la box du captcha.

4. Intégration coté CMS
On rentre dans le coté sérieux du tuto.
Pour les fainéants, vous pouvez simplement télécharger l'archive et la décompresser / dézipper / unzip. Vous aurez alors deux dossiers: CAPTCHA V2 & CAPTCHA invisible. Allez dans celui de votre choix et glisser tout les dossier dans la racine de votre serveur. Ça vous évitera de devoir faire le point 4.x.1, 4.x.2 & 4.x.3 . Vous devrez juste changer votre clé publique dans le fichier "./theme/default/formulaires.php" (ligne 126 pour RECAPTCHA V2 & ligne 137 pour RECAPTCHA invisible), et la clé privée dans le fichier "./controleur/joueur/inscription.php" ligne 6.

4.1 Intégration de la clé publique
4.1.1 reCAPTCHA V2
Pour pouvoir ajouter la clé publique, vous devez modifier le fichier "./theme/[votre_theme]/formulaires.php". Vous devez remplacer le code (ligne 122 => 133)

Code:

<div class="form-group row">
<div class="col-md-6">
<label>Captcha:</label>
<input type='text' name='CAPTCHA' placeholder='captcha' class="form-control"/>
</div>
<div class="col-md-6">
<img id='captcha' src='include/purecaptcha/purecaptcha_img.php?t=login_form' style="width: 100%;height: 100px;"/>
<br/>
<button type="button" onclick='var t=document.getElementById("captcha"); t.src=t.src+"&amp;"+Math.random();' href="" class="btn btn-info"><i class="fa fa-refresh"></i> Recharger le captcha</button>
<br/>
</div>
</div>

par

Code:

<div class="form-group row">
<div class="col-md-6">
<label>Captcha:</label>
<script src='https://www.google.com/recaptcha/api.js?hl=fr'></script>
<div class="g-recaptcha" data-sitekey="[clé publique]"></div>
</div>
</div>

N'oubliez pas de changer "[clé publique]" par votre clé publique !!!

4.1.2 reCAPTCHA invisible
Pour pouvoir ajouter la clé publique, vous devez modifier le fichier "./theme/[votre_theme]/formulaires.php".

• Ligne 86

Code:

<form role="form" method="post" action="?&action=inscription">

Remplacez par

Code:

<form role="form" method="post" action="?&action=inscription" id="inscription_form">

• Supprimez les lignes 132 à 143 (compris)

• Ligne 133 à 136

Code:

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
        <button type="submit" class="btn btn-primary" id="InscriptionBtn" disabled>S'inscrire</button>
      </div>

replacez par

Code:

      <div class="modal-footer">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<style>.grecaptcha-badge{position: static !important}</style>
<script>function onSubmit(token) { document.getElementById("inscription_form").submit(); }</script>
<button class="g-recaptcha btn btn-primary" data-sitekey="6Lcy9FoUAAAAALKdBTmnlJJuKOjajyGRZgMByGZv" data-callback='onSubmit' id="InscriptionBtn" disabled>Envoyer</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
      </div>

4.2 Intégration de la clé privée
Pour pouvoir ajouter la clé privée, vous devez modifier le fichier "./controleur/joueur/inscription.php". Vous devez remplacer le code (ligne 3 & 4)

Code:

if (isset($_POST['CAPTCHA']) AND $_POST['CAPTCHA'] != ''){
if (checkCaptcha($_POST['CAPTCHA'])){

par

Code:

include("include/recaptchalib.php");
    $response = null;
    $reCaptcha = new ReCaptcha("[clé privée]");
if ($_POST["g-recaptcha-response"])
$response = $reCaptcha->verifyResponse($_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"]);

    if ($response != null && $response->success){

Ensuite, toujours dans le même fichier ("inscription.php") supprimer les lignes 152 à 156.
N'oubliez pas de chager "[clé privée]" par votre clé privée !!!

4.3 La librairie
Vous devez maintenant télécharger l'archive .zip, prendre le fichier "recaptchalib.php" (dans le dossier "xxx/include" de l'archive) et le mettre dans dans le dossier "include" de votre FTP.


Voila qui clôture ce tuto. Si vous avez des questions, n'hésitez pas !


La bonne journée ...