メインコンテンツへスキップ
auth0.jsを使用してカスタムログインページを構築する場合には、ボット検知を有効にして、Auth0が要求を高リスクと判断したときにCAPTCHAの手順を表示することができます。 カスタムログインフォームのコードは、CAPTCHAの手順を渡すようにユーザーに求めるシナリオを処理しなければなりません。このシナリオを考慮しないと、アプリケーションでエラーが起きる可能性があります。
Auth0がホストするカスタムのログインページのみがボット検知に対応しています。テナントでこの機能を有効化する場合は、アカウント担当者までお問い合わせください。

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

Auth0はテンプレートを提供して、高リスクのログインを処理するコードが使用できるようにしています。
  1. ［Dashboard］>［Branding（ブランディング）］>［Universal Login（ユニバーサルログイン）］に移動して、［Classic（クラシック）］ を選択します。
  2. ［Login（ログイン）］ タブをクリックし、［Customize Login Page（ログインページをカスタマイズ）］ スイッチがまだ有効になっていない場合はそれを有効にします。
  3. ［Default Template（デフォルトのテンプレート）］ ドロップダウンメニューから**［Custom Login Form（カスタムログインフォーム）］** を選択します。
    Dashboard Branding Universal Login Classic Login Tab 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: 'foo@bar.com',
  captcha: passwordlessCaptcha.getValue()
}, function (err,res) {
  if (err) {
    passwordlessCaptcha.reload();
    // handle errors
  }
  // continue
});

​
もっと詳しく

⌘I