# Anleitung für benutzerdefinierte hCaptcha-Seite

## Voraussetzungen

{% hint style="warning" %}
Bitte stellen Sie sicher, dass Netacea CAPTCHA für Ihr Konto konfiguriert und aktiviert hat. Stellen Sie außerdem sicher, dass die Standard-CAPTCHA-Seite getestet wurde und bereitgestellt werden kann, bevor Sie eine benutzerdefinierte CAPTCHA-Seite implementieren.
{% endhint %}

Sofern die oben genannten Voraussetzungen erfüllt sind, kann eine benutzerdefinierte CAPTCHA-Seite wie folgt erstellt werden:

## HTML-Seite

Um eine HTML-Seite zu erstellen, die für die Bereitstellung von CAPTCHA verwendet wird, kann es hilfreich sein, mit der Netacea-HTML-Vorlage zu beginnen, bevor Sie den benutzerdefinierten HTML-Code hinzufügen. Die [Vorlagen-Seite](#netacea-captcha-template) finden Sie am Ende dieses Dokuments.\
\
Ihre benutzerdefinierte HTML-Seite kann gemäß Ihren spezifischen Anforderungen und/oder Ihrem Unternehmensbranding gestaltet werden, jedoch muss die Seite den folgenden Code enthalten.\
\
**Die folgenden Skripte sollten sich innerhalb des Document-Head-Elements befinden (`<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>
```

**Fügen Sie zusätzlich den folgenden Code irgendwo innerhalb des Body ein (`<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>

**Die folgenden Skripte müssen ebenfalls am Ende des Body, aber noch innerhalb dessen hinzugefügt werden (`<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" %}
Bitte beachten Sie, dass bestimmte Links innerhalb der CAPTCHA-Seite möglicherweise nicht funktionieren, wenn sie hinter der Website gehostet werden, die von Netacea geschützt wird.
{% endhint %}

### Netacea CAPTCHA-Vorlage

```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>
```

*Sobald die benutzerdefinierte CAPTCHA-Seite fertiggestellt ist, stellen Sie bitte die fertige CAPTCHA-HTML-Seite Netacea zur Verfügung. Diese wird auf unsere Server hochgeladen und die neue Seite wird für alle CAPTCHA-Seiten verwendet, die von der Netacea Bot Management-Lösung bereitgestellt werden.*

### Automatische Vervollständigung des Captcha

Netacea bietet auch eine Hcaptcha-Seitenvorlage an, bei der die Captcha-Challenge automatisch abgeschlossen wird, sobald die Challenge vom Benutzer gelöst wurde. Wenn Sie diese Lösung verwenden möchten, nutzen Sie bitte die folgende Vorlage

```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>
```
