> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> auth0.jsライブラリで構築されたカスタムログインページを使用する際に、ボット検出を有効にして設定する方法を説明します。

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

auth0.jsライブラリを使用してカスタムログインページを構築している場合は、Auth0 がrequestを高リスクと判断したときに CAPTCHA ステップをレンダリングするための <Tooltip tip="ボット検出: Auth0 がログインプロセス中に CAPTCHA を有効にすることで、ボットの疑いがあるトラフィックをブロックする攻撃対策の一種です。" cta="用語集を表示" href="/docs/ja-jp/glossary?term=Bot+Detection">ボット検出</Tooltip> を有効にできます。

カスタムログインフォームのコードでは、ユーザーに CAPTCHA ステップの完了を求めるケースに対応する必要があります。これを考慮していないと、アプリケーションでエラーが発生する可能性があります。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  ボット検出は、Auth0 がホストするカスタムログインページでのみサポート対象です。テナントでこの機能を有効にするには、アカウント担当者への連絡が必要になる場合があります。
</Callout>

<div id="use-custom-login-page-template">
  ## カスタムログインページテンプレートを使用する
</div>

Auth0 では、高リスクのログインに対応するコードと組み合わせて使用できるテンプレートを提供しています。

1. [Auth0 Dashboard > Branding > Universal Login](https://manage.auth0.com/#/login_settings) に移動し、**Classic** を選択します。
2. **Login** タブをクリックし、まだ有効になっていない場合は **Customize Login Page** スイッチを有効にします。
3. **Default Templates** ドロップダウンメニューで、**Custom Login Form** を選択します。

   <Frame>
     <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4m3WA0sKMoR0C1KVnVmZ1G/b311bdbc6c48b4910eac49cc8f1b9ba8/2025-02-26_15-17-18.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=56fab9e9b970808c2b646078137305ea" alt="Auth0 Dashboard Branding Universal Login Classic Login タブ Custom Login Form" width="902" height="1350" data-path="docs/images/cdy7uua7fh8z/4m3WA0sKMoR0C1KVnVmZ1G/b311bdbc6c48b4910eac49cc8f1b9ba8/2025-02-26_15-17-18.png" />
   </Frame>
4. 提供されているテンプレートを使って、ログインページのカスタマイズを始めます。

   <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
     Custom Login Pages のソースコードの管理には、バージョン管理ソフトウェアの使用をおすすめします。詳しくは、[Classic Login Page Version Control](/docs/ja-jp/customize/login-pages/classic-login/version-control) をご覧ください。
   </Callout>
5. バージョン管理ソフトウェアを使用していない場合は、Auth0 Dashboard でテンプレートをソースコードに直接置き換えることができます。
6. **Preview** を選択して、新しいフォームを確認します。
7. **変更を保存** を選択します。

<div id="customize-the-login-form">
  ## ログインフォームをカスタマイズする
</div>

ボット検出をサポートするには、`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()` の値を設定します。

   ```text 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()` の値を設定します。

   ```text 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';
   }
   ```

<div id="configure-captcha-templates">
  ### CAPTCHA テンプレートを設定する
</div>

`renderCaptcha` メソッドと `renderSignupCaptcha` メソッドを呼び出す際は、`options` パラメーターを使用して、各[サポート対象の CAPTCHA プロバイダー](/docs/ja-jp/secure/attack-protection/bot-detection/configure-captcha)のテンプレートを設定できます。

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

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

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

<div id="support-passwordless-flows">
  ## パスワードレスフローをサポートする
</div>

<Tooltip tip="パスワードレス: 第1認証要素としてパスワードを使用しない認証方式。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=passwordless">パスワードレス</Tooltip>フローでボット検出をサポートするには、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. Passwordless の呼び出しに captcha プロパティを追加し、エラーが発生した場合は CAPTCHA コンポーネントを再読み込みします。

   ```text lines theme={null}
   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: 'foo@bar.com',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // エラーを処理する
     }
     // 続行する
   });
   ```

<div id="learn-more">
  ## 詳細
</div>

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