> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-fix-docs-5528-php-updates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# ボット検知をカスタムログインページに追加する

> auth0.jsライブラリーで作成したカスタムログインページを使用する際に、ボット検知を有効にして構成する方法を学びます。

auth0.jsを使用してカスタムログインページを構築する場合には、ボット検知を有効にして、Auth0が要求を高リスクと判断したときにCAPTCHAの手順を表示することができます。

カスタムログインフォームのコードは、CAPTCHAの手順を渡すようにユーザーに求めるシナリオを処理しなければなりません。このシナリオを考慮しないと、アプリケーションでエラーが起きる可能性があります。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Auth0がホストするカスタムのログインページのみがボット検知に対応しています。テナントでこの機能を有効化する場合は、アカウント担当者までお問い合わせください。
</Callout>

## カスタムログインページテンプレートを使用する

Auth0はテンプレートを提供して、高リスクのログインを処理するコードが使用できるようにしています。

1. [［Dashboard］>［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］](https://manage.auth0.com/#/login_settings)に移動して、**［Classic（クラシック）］** を選択します。

2. **［Login（ログイン）］** タブをクリックし、**［Customize Login Page（ログインページをカスタマイズ）］** スイッチがまだ有効になっていない場合はそれを有効にします。

3. **［Default Template（デフォルトのテンプレート）］** ドロップダウンメニューから\*\*［Custom Login Form（カスタムログインフォーム）］\*\* を選択します。

   <Frame>
     <img src="https://mintcdn.com/docs-dev-fix-docs-5528-php-updates/QFqkbubKNdo2scLz/docs/images/ja-jp/cdy7uua7fh8z/4m3WA0sKMoR0C1KVnVmZ1G/89f3b3002f4d3344411af061574e89b7/2025-02-26_15-16-19.png?fit=max&auto=format&n=QFqkbubKNdo2scLz&q=85&s=8d2bc6b15f27249a9934025c1b2a4047" alt="Dashboard Branding Universal Login Classic Login Tab Custom Login Form" width="902" height="1431" data-path="docs/images/ja-jp/cdy7uua7fh8z/4m3WA0sKMoR0C1KVnVmZ1G/89f3b3002f4d3344411af061574e89b7/2025-02-26_15-16-19.png" />
   </Frame>

4. 提供されているテンプレートを使用して、ログインページをカスタマイズします。

   <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
     バージョン管理ソフトウェアを使用して、カスタムログインページのソースコードを管理することをお勧めします。詳細については、「[クラシックログインページのバージョン管理](/docs/ja-jp/customize/login-pages/classic-login/version-control)」をお読みください。
   </Callout>

5. バージョン管理ソフトウェアを使用していない場合には、Dashboard内で直接テンプレートを独自のソースコードに置き換えることができます。

6. **［Preview（プレビュー）］** をクリックして新しいフォームを確認します。

7. **［Save Changes（変更の保存）］** をクリックします。

## ログインフォームをカスタマイズする

ボット検知をサポートしたい場合は、`auth0.js`ライブラリーのバージョン`9.28`以降を使用する必要があります。

`<script src="https://cdn.auth0.com/js/auth0/9.28/auth0.min.js"></script>`

1. パスワード入力の下、サインアップボタンとログインボタンの上にCAPTCHAを表示するための要素を追加します。例：`<div class="captcha-container"></div>`

2. `WebAuth`コンストラクターの後に、`loginCaptcha`と`signupCaptcha`のコンポーネントを初期化します。

   ```javascript lines theme={null}
   var webAuth = new auth0.WebAuth(params);

   var loginCaptcha = webAuth.renderCaptcha(
       document.querySelector('.captcha-container'),
       null,
       (error, payload) => {
           if (payload) {
               triggerCaptcha = payload.triggerCaptcha;
           }
       }
   );

   var signupCaptcha = webAuth.renderSignupCaptcha(
       document.querySelector('.captcha-container'),
       null,
       (error, payload) => {
           if (payload) {
               triggerCaptcha = payload.triggerCaptcha;
           }
       }
   );
   ```

3. `login`メソッドを呼び出す際には、`captcha`プロパティに`loginCaptcha.getValue()`の値を割り当てます。

   ```lines theme={null}
   webAuth.login({
       realm: connection,
       username: username,
       password: password,
       captcha: loginCaptcha.getValue()
   }, function(err) {
       displayError(err);
       //...
   });
   ```

   `login`メソッドのコールバック関数パラメーター（`cb`）については、[auth0.jsドキュメントに記載のWebAuth](https://auth0.github.io/auth0.js/global.html#login)の説明をお読みください。

4. `signupAndLogin`メソッドを呼び出す際には、`captcha`プロパティに`signupCaptcha.getValue()`の値を割り当てます。

   ```lines theme={null}
   webAuth.redirect.signupAndLogin({
       connection: databaseConnection,
       email: email,
       password: password,
       captcha: signupCaptcha.getValue()
   }, function(err) {
       displayError(err);
       //...
   });
   ```

   `signupAndLogin`メソッドのコールバック関数パラメーター（`cb`）については、[auth0.jsドキュメントに記載のWebAuth](https://auth0.github.io/auth0.js/global.html#login)の説明をお読みください。

5. 汎用のエラー処理ロジックにある`loginCaptcha`と`signupCaptcha`コンポーネントを再度読み込みます。

   ```javascript lines theme={null}
   function displayError(err) {
     loginCaptcha.reload();
     signupCaptcha.reload();

     var errorMessage = document.getElementById('error-message');
     errorMessage.innerHTML = err.description;
     errorMessage.style.display = 'block';
   }
   ```

### CAPTCHAテンプレートを構成する

`renderCaptcha`と`renderSignupCaptcha`のメソッドを呼び出す際には、`options`パラメーターを使用して、[サポートしているCAPTCHAプロバイダー](/docs/ja-jp/secure/attack-protection/bot-detection/configure-captcha)のそれぞれにテンプレートを構成することができます。

`options`パラメーターの`templates`プロパティは以下のプロパティをサポートしています。

| 名前                     | 説明                                                             |
| ---------------------- | -------------------------------------------------------------- |
| `auth0`                | チャレンジを受け取り、文字列を返すテンプレート関数です。                                   |
| `recaptcha_v2`         | チャレンジを受け取り、文字列を返すテンプレート関数です。                                   |
| `recaptcha_enterprise` | チャレンジを受け取り、文字列を返すテンプレート関数です。                                   |
| `hcaptcha`             | チャレンジを受け取り、文字列を返すテンプレート関数です。                                   |
| `friendly_captcha`     | チャレンジを受け取り、文字列を返すテンプレート関数です。                                   |
| `arkose`               | チャレンジを受け取り、文字列を返すテンプレート関数です。                                   |
| `auth0_v2`             | チャレンジを受け取り、文字列を返すテンプレート関数です。                                   |
| `error`                | チャレンジを取得できなかった場合にカスタムエラーメッセージを返すテンプレート関数です。最初の引数としてエラーを受け取ります。 |

プロバイダーのぞれぞれにデフォルトのテンプレート関数については、[GitHubが提供するauth0.js/src/web-auth/captcha.js](https://github.com/auth0/auth0.js/blob/a3ddc0905a5da33aa190a9098467576976b95ec8/src/web-auth/captcha.js#L28)を参照してください。

## パスワードレスフローをサポートする

パスワードレスフローでボット検知をサポートしたい場合は、auth0.jsライブラリーのバージョン`9.24`以降を使用する必要があります。

`<script src="https://cdn.auth0.com/js/auth0/9.24/auth0.min.js"></script>`

1. 送信ボタンの上にCAPTCHAを表示するための要素を追加します。ユーザー名とパスワードでのログインもサポートする場合は、パスワードレスのCAPTCHA用に別の要素を作成する必要があります。例：
   `<div class="passwordless-captcha-container"></div>`

2. WebAuthコンストラクターの後に、パスワードレスフローのCAPTCHAコンポーネントを初期化します。

   ```javascript lines theme={null}
   var passwordlessCaptcha = webAuth.renderPasswordlessCaptcha(
     document.querySelector('.passwordless-captcha-container')
   );
   ```

3. パスワードレスの呼び出しにcaptchaプロパティを追加し、エラーの発生時にCAPTCHAコンポーネントが再び読み込まれるようにします。

   ```lines theme={null}
   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: 'foo@bar.com',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // handle errors
     }
     // continue
   });
   ```

## もっと詳しく

* [ボット検知をネイティブアプリケーションに追加する](/docs/ja-jp/secure/attack-protection/bot-detection/bot-detection-native-apps)