# カスタム reCAPTCHA ページガイド

## 前提条件

{% hint style="warning" %}
Netaceaがお客様のアカウントでCAPTCHAを設定し、有効化していることをご確認ください。また、カスタムCAPTCHAページを実装する前に、標準CAPTCHAページがテスト済みで、正常に配信できることをご確認ください。
{% endhint %}

上記の前提条件が完了している場合、以下の手順でカスタムCAPTCHAページを作成できます。

## HTMLページ

CAPTCHAの配信に使用するHTMLページを作成する際は、カスタムHTMLコードを追加する前に、NetaceaテンプレートHTMLから始めることをお勧めします。[テンプレートページ](#netacea-captcha-template)は本ドキュメントの末尾に記載されています。\
\
カスタムHTMLページは、お客様の具体的な要件や企業ブランディングに合わせてデザインできますが、以下のコードを含める必要があります。\
\
**以下のスクリプトは、ドキュメントのhead要素内（`<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>
```

**さらに、以下のコードを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>
```

**以下のスクリプトも、body（`<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-captcha-2.0.2.js"></script>
```

{% hint style="warning" %}
CAPTCHAページ内の一部のリンクは、Netaceaによって保護されているサイトの背後でホストされている場合、正常に機能しない可能性がありますのでご注意ください。
{% endhint %}

### Netacea CAPTCHAテンプレート

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

*カスタムCAPTCHAページが完成しましたら、完成したCAPTCHA HTMLページをNetaceaにご提供ください。弊社のサーバーにアップロードされ、Netacea Bot Managementソリューションによって配信されるすべてのCAPTCHAページに新しいページが使用されます。*

### CAPTCHAの自動完了

Netaceaでは、ユーザーがチャレンジを完了すると自動的にCAPTCHAチャレンジが完了するreCAPTCHAページテンプレートも提供しています。このソリューションをご利用になりたい場合は、以下のテンプレートをご使用ください。

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