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

​

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

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（変更の保存）］ をクリックします。

​

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

1. パスワード入力の下、サインアップボタンとログインボタンの上にCAPTCHAを表示するための要素を追加します。例：<div class="captcha-container"></div>
2. WebAuthコンストラクターの後に、loginCaptchaとsignupCaptchaのコンポーネントを初期化します。
   Report incorrect code

   Copy

   Ask AI

   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()の値を割り当てます。
   Report incorrect code

   Copy

   Ask AI

   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()の値を割り当てます。
   Report incorrect code

   Copy

   Ask AI

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

   signupAndLoginメソッドのコールバック関数パラメーター（cb）については、auth0.jsドキュメントに記載のWebAuthの説明をお読みください。
5. 汎用のエラー処理ロジックにあるloginCaptchaとsignupCaptchaコンポーネントを再度読み込みます。
   Report incorrect code

   Copy

   Ask AI

   function displayError(err) {
     loginCaptcha.reload();
     signupCaptcha.reload();
   
     var errorMessage = document.getElementById('error-message');
     errorMessage.innerHTML = err.description;
     errorMessage.style.display = 'block';
   }
   

​

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

​

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

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

   Copy

   Ask AI

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

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

   Copy

   Ask AI

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

​

もっと詳しく

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