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

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

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

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

Auth0がホストするカスタムのログインページのみがボット検知に対応しています。テナントでこの機能を有効化する場合は、アカウント担当者までお問い合わせください。

​

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

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

1. ［Dashboard］>［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］に移動して、［Classic（クラシック）］ を選択します。

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

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

   

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

   バージョン管理ソフトウェアを使用して、カスタムログインページのソースコードを管理することをお勧めします。詳細については、「クラシックログインページのバージョン管理」をお読みください。

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のコンポーネントを初期化します。

   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プロパティは以下のプロパティをサポートしています。

名前	説明
auth0	チャレンジを受け取り、文字列を返すテンプレート関数です。
recaptcha_v2	チャレンジを受け取り、文字列を返すテンプレート関数です。
recaptcha_enterprise	チャレンジを受け取り、文字列を返すテンプレート関数です。
hcaptcha	チャレンジを受け取り、文字列を返すテンプレート関数です。
friendly_captcha	チャレンジを受け取り、文字列を返すテンプレート関数です。
arkose	チャレンジを受け取り、文字列を返すテンプレート関数です。
auth0_v2	チャレンジを受け取り、文字列を返すテンプレート関数です。
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. パスワードレスの呼び出しにcaptchaプロパティを追加し、エラーの発生時にCAPTCHAコンポーネントが再び読み込まれるようにします。

   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: '[e-mail]',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // handle errors
     }
     // continue
   });
   

​

もっと詳しく

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