# Guide de personnalisation de la page reCAPTCHA

## Prérequis

{% hint style="warning" %}
Veuillez vous assurer que Netacea a configuré et activé CAPTCHA pour votre compte. Assurez-vous également que la page CAPTCHA standard a été testée et peut être servie avant d'implémenter une page CAPTCHA personnalisée.
{% endhint %}

Une fois les prérequis ci-dessus remplis, une page CAPTCHA personnalisée peut être créée en procédant comme suit :

## Page HTML

Pour créer une page HTML qui sera utilisée pour servir le CAPTCHA, il peut être utile de commencer avec le modèle HTML Netacea avant d'ajouter le code HTML personnalisé. La [page modèle](#netacea-captcha-template) peut être consultée à la fin de ce document.\
\
Votre page HTML personnalisée peut être conçue selon vos exigences spécifiques et/ou l'identité visuelle de votre entreprise, cependant, la page doit inclure le code suivant.\
\
**Les scripts suivants doivent se trouver dans l'élément head du document (`<head>...</head>`) :**

```html
<link rel="stylesheet" href="https://assets.ntcacdn.net/Mitigations/captcha-1.0.0.css">
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
```

**De plus, incluez le code suivant quelque part dans le body (`<body>...</body>`) :**

```html
<form id="frmCaptcha" action="" method="POST">
    <div class="g-recaptcha" data-sitekey="{{CAPTCHA_SITE_KEY}}" data-callback="showButton"></div>
    <br />
    <input type="submit" value="Submit" class="btn btnHidden">
    <input type="hidden" maxlength="40" id="hitid" name="hitid" value="{{TRACKING_ID}}">
</form>
```

**Les scripts ci-dessous doivent également être ajoutés à la fin du body, mais toujours à l'intérieur de celui-ci (`<body>...</body>`) :**

```html
<script src="https://assets.ntcacdn.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
<script src="https://assets.ntcacdn.net/Mitigations/submit-captcha-2.0.2.js"></script>
```

{% hint style="warning" %}
Veuillez noter que certains liens au sein de la page CAPTCHA peuvent ne pas fonctionner s'ils sont hébergés derrière le site protégé par Netacea.
{% endhint %}

### Modèle CAPTCHA Netacea

```html
<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>Captcha Page</title>
    <link rel="stylesheet" href="https://assets.ntcacdn.net/Mitigations/captcha-1.1.1.css">
    <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
</head>
<body>
    <div class="wrapper">
        <header>
            <!-- header content -->
            <h1>Help us verify real visitors</h1>
            <!-- End of header  content -->
        </header>
        
        <!-- statement content -->
        <p>Please complete to continue</p>
        <!-- End of statement content -->

        <!-- Captcha Form, Do not change-->
            <form id="frmCaptcha" action="" method="POST">
                <div class="g-recaptcha" data-sitekey="{{CAPTCHA_SITE_KEY}}" data-callback="showButton"></div>
                <br />
                <input type="submit" value="Submit" class="btn btnHidden">
                <input type="hidden" maxlength="40" id="hitid" name="hitid" value="{{TRACKING_ID}}">
            </form>
        <!-- End of captcha form -->

        <div class="wrapper-values"></div>
    </div>
    <!-- The following two scripts MUST be at the end of the body -->
    <script src="https://assets.ntcacdn.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
    <script src="https://assets.ntcacdn.net/Mitigations/submit-captcha-2.3.0.js"></script>
    <!-- End of scripts at the end of body -->
</body>
</html>
```

*Une fois la page CAPTCHA personnalisée terminée, veuillez fournir la page HTML CAPTCHA complétée à Netacea. Elle sera téléchargée sur nos serveurs et la nouvelle page sera utilisée pour toutes les pages CAPTCHA servies par la solution Netacea Bot Management.*

### Complétion automatique du Captcha

Netacea propose également un modèle de page reCAPTCHA où le défi captcha est complété automatiquement une fois que l'utilisateur a terminé le défi. Si vous souhaitez utiliser cette solution, veuillez utiliser le modèle ci-dessous

```html
<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>Auto-submit reCaptcha Custom Page</title>
    <link rel="stylesheet" href="https://assets.ntcacdn-uat.net/Mitigations/captcha-1.1.1.css">
    <script src="https://assets.ntcacdn-uat.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
    <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
    <script src="https://assets.ntcacdn-uat.net/Mitigations/submit-captcha-2.3.0.js" async defer></script>
</head>
<body>
    <div class="wrapper">
        <header>
            <!-- header content -->
            <h1>Help us verify real visitors</h1>
            <!-- End of header  content -->
        </header>
        
        <!-- statement content -->
        <p>Please complete to continue</p>
        <!-- End of statement content -->

        <!-- Captcha Form, Do not change-->
        <form id="frmCaptcha" action="" method="POST" data-auto-submit>
            <div class="g-recaptcha" data-sitekey="{{CAPTCHA_SITE_KEY}}" data-callback="frmCaptchaCallback"></div><br /><input
                type="submit" value="Submit" class="btn btnHidden"><input type="hidden" maxlength="40" id="hitid"
                name="hitid" value="{{TRACKING_ID}}">
        </form>
    </div>
</body>
</html>
```
