# Veiledning for tilpasset hCaptcha-side

## Forutsetninger

{% hint style="warning" %}
Vennligst sørg for at Netacea har konfigurert og aktivert CAPTCHA for kontoen din. Sørg også for at standard CAPTCHA-side har blitt testet og kan leveres før du implementerer en tilpasset CAPTCHA-side.
{% endhint %}

Forutsatt at de ovennevnte forutsetningene er oppfylt, kan en tilpasset CAPTCHA-side opprettes ved å gjøre følgende:

## HTML-side

For å opprette en HTML-side som skal brukes til å levere CAPTCHA, kan det være nyttig å starte med Netacea mal-HTML før du legger til den tilpassede HTML-koden. Den [malbaserte siden](#netacea-captcha-template) kan sees nederst i dette dokumentet.\
\
Din tilpassede HTML-side kan utformes i henhold til dine spesifikke krav og/eller bedriftens merkevarebygging, men siden må inneholde følgende kode.\
\
**Følgende skript bør være innenfor dokumentets head-element (`<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>
```

**I tillegg, inkluder følgende kode et sted innenfor body (`<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>

**Skriptene nedenfor må også legges til på slutten av, men fortsatt innenfor body (`<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" %}
Vær oppmerksom på at visse lenker på CAPTCHA-siden kanskje ikke fungerer hvis de er hostet bak nettstedet som beskyttes av Netacea.
{% endhint %}

### Netacea CAPTCHA-mal

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

*Når den tilpassede CAPTCHA-siden er fullført, vennligst lever den fullførte CAPTCHA HTML-siden til Netacea. Denne vil bli lastet opp til våre servere, og den nye siden vil bli brukt for alle CAPTCHA-sider som leveres av Netacea Bot Management-løsningen.*

### Automatisk fullføring av Captcha

Netacea tilbyr også en Hcaptcha-sidemal der captcha-utfordringen fullføres automatisk når utfordringen er løst av brukeren. Hvis du ønsker å bruke denne løsningen, vennligst bruk malen nedenfor

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