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

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

auth0.jsライブラリを使用してカスタムログインページを構築している場合は、Auth0 がrequestを高リスクと判断したときに CAPTCHA ステップをレンダリングするための ボット検出 を有効にできます。

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

ボット検出は、Auth0 がホストするカスタムログインページでのみサポート対象です。テナントでこの機能を有効にするには、アカウント担当者への連絡が必要になる場合があります。

​

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

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

1. Auth0 Dashboard > Branding > Universal Login に移動し、Classic を選択します。

2. Login タブをクリックし、まだ有効になっていない場合は Customize Login Page スイッチを有効にします。

3. Default Templates ドロップダウンメニューで、Custom Login Form を選択します。

   

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

   Custom Login Pages のソースコードの管理には、バージョン管理ソフトウェアの使用をおすすめします。詳しくは、Classic Login Page Version Control をご覧ください。

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

6. Preview を選択して、新しいフォームを確認します。

7. 変更を保存 を選択します。

​

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

ボット検出をサポートするには、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 コンポーネントを初期化します。

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

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

   login メソッドのコールバック関数パラメーター (cb) について詳しくは、auth0.js ドキュメントの WebAuth を参照してください。

4. signupAndLogin メソッドを呼び出すときは、captcha プロパティに signupCaptcha.getValue() の値を設定します。

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

   signupAndLogin メソッドのコールバック関数パラメーター (cb) について詳しくは、auth0.js ドキュメントの WebAuth を参照してください。

5. 汎用的なエラー処理ロジックで、loginCaptcha コンポーネントと signupCaptcha コンポーネントを再読み込みします。

   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 プロバイダーのテンプレートを設定できます。

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を参照してください。

​

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

パスワードレスフローでボット検出をサポートするには、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 コンポーネントを初期化します。

   var passwordlessCaptcha = webAuth.renderPasswordlessCaptcha(
     document.querySelector('.passwordless-captcha-container')
   );
   

3. Passwordless の呼び出しに captcha プロパティを追加し、エラーが発生した場合は CAPTCHA コンポーネントを再読み込みします。

   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: '[e-mail]',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // エラーを処理する
     }
     // 続行する
   });
   

​

詳細

• ネイティブアプリケーションにボット検出を追加