# Guida alla pagina reCAPTCHA personalizzata

## Prerequisiti

{% hint style="warning" %}
Assicurarsi che Netacea abbia configurato e abilitato il CAPTCHA per il proprio account. Verificare inoltre che la pagina CAPTCHA standard sia stata testata e possa essere servita prima di implementare una pagina CAPTCHA personalizzata.
{% endhint %}

Una volta completati i prerequisiti sopra indicati, è possibile creare una pagina CAPTCHA personalizzata procedendo come segue:

## Pagina HTML

Per creare una pagina HTML che verrà utilizzata per servire il CAPTCHA, può essere utile partire dal Template HTML di Netacea prima di aggiungere il codice HTML personalizzato. La [pagina template](#netacea-captcha-template) è visibile in fondo a questo documento.\
\
La pagina HTML personalizzata può essere progettata secondo le proprie esigenze specifiche e/o in linea con il branding aziendale; tuttavia, la pagina deve includere il seguente codice.\
\
**I seguenti script devono essere inseriti all'interno dell'elemento head del documento (`<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>
```

**Inoltre, includere il seguente codice in un punto qualsiasi all'interno del 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>
```

**Gli script seguenti devono inoltre essere aggiunti alla fine del body, ma comunque al suo interno (`<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" %}
Si noti che alcuni link all'interno della pagina CAPTCHA potrebbero non funzionare se sono ospitati dietro il sito protetto da Netacea.
{% endhint %}

### Template CAPTCHA di 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>
```

*Una volta completata la pagina CAPTCHA personalizzata, fornire la pagina HTML CAPTCHA completata a Netacea. Questa verrà caricata sui nostri server e la nuova pagina verrà utilizzata per tutte le pagine CAPTCHA servite dalla soluzione Netacea Bot Management.*

### Completamento automatico del Captcha

Netacea offre inoltre un template per la pagina reCAPTCHA in cui la verifica captcha viene completata automaticamente una volta che l'utente ha superato la sfida. Se si desidera utilizzare questa soluzione, utilizzare il template seguente

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