# Guide de personnalisation de la page hCaptcha

## 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 de mettre en œuvre une page CAPTCHA personnalisée.
{% endhint %}

Une fois les prérequis ci-dessus satisfaits, 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) est visible au bas 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 être placés 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://js.hcaptcha.com/1/api.js" async defer></script>
```

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

<pre class="language-html"><code class="lang-html">&#x3C;form id="frmCaptcha" action="" method="POST">
<strong>    &#x3C;div
</strong>        class="h-captcha"
        data-sitekey="{{CAPTCHA_SITE_KEY}}"
        data-callback="showButton"
    >&#x3C;/div>
    &#x3C;br />
    &#x3C;br />&#x3C;input type="submit" value="Submit" class="btn btnHidden" />&#x3C;input
        type="hidden"
        maxlength="40"
        id="hitid"
        name="hitid"
        value="{{TRACKING_ID}}"
    />
&#x3C;/form>
</code></pre>

**Les scripts ci-dessous doivent également être ajoutés à la fin du corps du document, 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-hcaptcha-2.0.2.js"></script>
```

{% hint style="warning" %}
Veuillez noter que certains liens dans 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>
        <title>Help us verify real visitors | $customername</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />>
        <link rel="stylesheet" href="https://assets.ntcacdn.net/Mitigations/captcha-1.0.0.css"/>
        <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
    </head>
    <body>
        <div class="wrapper">
            <!-- Customer logo (Optional) If you would like your logo to appear, 
                uncomment lines 13 to 15 and add your source. -->
            <!-- <div class="logo">
                <img width="300" alt="logo" src="$logoURL"/>
            </div> -->
            <!-- End of customer logo -->

            <!-- Captcha page headings -->
            <h1>Help us verify real visitors</h1>
            <p>Please complete to continue</p>
            <!-- End of captcha headings -->

            <!-- Captcha Form -->
            <form id="frmCaptcha" action="" method="POST">
                <div
                  class="h-captcha"
                  data-sitekey="{{CAPTCHA_SITE_KEY}}"
                  data-callback="showButton"
                ></div>
                <br />
                <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>

        <!-- 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-hcaptcha-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ète à Netacea. Celle-ci 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 Hcaptcha où le défi captcha est complété automatiquement une fois que l'utilisateur a résolu 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 hCaptcha Custom Page</title>
    <link
      rel="stylesheet"
      href="https://assets.ntcacdn-uat.net/Mitigations/captcha-1.0.0.css"
    />
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>###---THIS IS A CUSTOM AUTO-SUBMIT HCAPTCHA PAGE---###</h1>
            <h1>Help us verify real visitors</h1>
      </header>
      <hr><br><br>
      <h1>🤖Are you a bot?🤖</h1>
      <br>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFb1qE_jzVunCV4Rx6BMblb1WlodceKEwr3A&usqp=CAU" alt="bot-mugshot">
      <br>
        <p>Please complete this custom hCaptcha page to continue...</p>
      <form id="frmCaptcha" action="" method="POST" data-auto-submit>
        <div
          class="h-captcha"
          data-sitekey="{{CAPTCHA_SITE_KEY}}"
          data-callback="frmCaptchaCallback"
        ></div>
        <br />
        <br /><input type="submit" value="Submit" class="btn btnHidden" /><input
          type="hidden"
          maxlength="40"
          id="hitid"
          name="hitid"
          value="{{TRACKING_ID}}"
        />
      </form>
    </div>
    <script src="https://assets.ntcacdn-uat.net/Mitigations/fetch-polyfill-3.6.2.js"></script>
    <script src="https://assets.ntcacdn-uat.net/Mitigations/hsubmit-captcha-2.3.0.js"></script>
  </body>
</html>
```
