会員サイト サインイン時の多要素認証

※ この機能はプロフェッショナル版以上のライセンスをご購入の場合のみご利用可能です

会員サイトへのサインイン時に、多要素認証を行うよう設定することができます。PowerCMS の多要素認証では、Google Authenticator などのワンタイムパスワード認証アプリケーションに対応しています。

※ 現在動作の確認ができている「ワンタイムパスワード認証アプリケーション」は下記になります。

• Google Authenticator (Google 認証システム)
• Authy
• IIJ SmartKey
• Microsoft Authenticator

管理画面と会員サイトで同一のアカウントを利用している場合、いずれか一方で多要素認証を設定すると、両方に適用されます。

PowerCMS 7.1 / 6.83 以降の Members プラグインで利用できます。

事前準備

Perl モジュールのインストール

• JSON::WebToken

環境変数の設定

EnableMFA 1
MFAModule TOTP

テンプレート改修

会員サイトログインフォームの HTML を多要素認証に対応するための JavaScript 等を組み込みます。
ワークスペースを会員サイトにする場合、親のスペースのテンプレートも同様に修正が必要です。

サインインフォームの修正

ユーザー名・パスワードフィールドに id をつける必要があります。
『PowerCMS Bootstrap スペース 2.05』にある「PC-ログイン画面」テンプレートモジュールを例として修正を以下のように行ってください。

ユーザー名・パスワードフィールドにidをつける

<p>
    <label for="username">ユーザー名</label>
    <span class="post_input">
        <input type="text" name="username" id="username" value="" />
    </span>
</p>
<p>
    <label for="password">パスワード</label>
    <span class="post_input">
        <input type="password" name="password" id="password" />
    </span>
</p>

<p id="username-field">
    <label for="username">ユーザー名</label>
    <span class="post_input">
        <input type="text" name="username" id="username" value="" />
    </span>
</p>
<p id="password-field">
    <label for="password">パスワード</label>
    <span class="post_input">
        <input type="password" name="password" id="password" />
    </span>
</p>

JavaScript を追加する

環境変数 EnableMFAが 1 の場合に多要素認証用のJavaScriptを追加します。
※DynamicMTMLでは </mt:if name="config.EnableMFA" eq="1">> は動作しないため、変数を利用し環境変数と別で設定する必要があります。

<$mt:var name="config.EnableMFA" setvar="EnableMFA"$>
<mt:if name="EnableMFA" eq="1">
<script>
(function() {
  let ready = false;
  const form = document.querySelector("form.login_form");

  form.addEventListener("submit", function(event) {
    event.preventDefault();

    const formData = new FormData();
    form.querySelectorAll("input:not([name='__mode'])").forEach(input => {
      formData.append(input.name, input.value);
    });
    formData.append("__mode", "mfa_login_form");

    fetch('<mt:var name="script_url" encode_js="1">', {
      method: "POST",
      body: new URLSearchParams(formData),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    })
    .then(response => response.json())
    .then(json => {
      if (ready) {
        form.submit();
        return;
      }

      const result = json.result;
      if (!result || (!result.html && !result.redirect)) {
        form.submit();
        return;
      }
      if (result.redirect) {
        window.location.href = result.redirect;
        return;
      }

      const usernameField = document.querySelector("#username-field");
      usernameField.querySelector("input").setAttribute("readonly", true);

      const passwordField = document.querySelector("#password-field");
      passwordField.querySelector("input").setAttribute("readonly", true);
      passwordField.insertAdjacentHTML('afterend', result.html);
      setupToggle();

      ready = true;
    })
    .catch(error => {
      console.error(error);
    });
  });

  const enableForm = function(root) {
    root.classList.remove("hidden");
    root.querySelectorAll("input").forEach(field => {
      field.removeAttribute("disabled");
    });
  };

  const disableForm = function(root) {
    root.classList.add("hidden");
    root.querySelectorAll("input").forEach(field => {
      field.setAttribute("disabled", true);
    });
  };

  function setupToggle() {
    const useBackupCodeField = document.querySelector("input[name=use_backup_code]");
    const mfaLoginFormElem = document.querySelector("#mfa-login-form");
    const backupCodesLoginFormElem = document.querySelector("#backup_codes-login-form");
    form.querySelectorAll(".toggle-mfa").forEach(button => {
      button.addEventListener("click", () => {
        if (useBackupCodeField.value === "1") {
          enableForm(mfaLoginFormElem);
          disableForm(backupCodesLoginFormElem);
          useBackupCodeField.value = "0";
        } else {
          enableForm(backupCodesLoginFormElem);
          disableForm(mfaLoginFormElem);
          useBackupCodeField.value = "1";
        }
      });
    });
  }
})();
</script>
</mt:if>

プロフィールの編集

ログイン中のユーザーのアカウント編集用の画面テンプレートに、多要素認証設定へのリンクを設置する。
『PowerCMS Bootstrap スペース 2.05』の場合「プロフィールの編集」(識別子 members_e_p)のシステムテンプレートが該当します。

<mt:if name="config.EnableMFA" eq="1">
<a href="<$mt:Var name="script_url"$>?__mode=edit_mfa">多要素認証設定</a>
</mt:if>

設定

プラグイン設定

• 多要素認証の有効化
• 任意：多要素認証設定済みのユーザーでのみ、多要素認証を要求する。
• 必 須：多要素認証未設定のユーザーでログインする際に、多要素認証の設定と利用を強制する。
• MFA更新用シークレット（ランダム文字列を設定）
• MFA更新用シークレットは初期状態では設定されていないので、任意の推測不可能な文字列を設定する。

TOTP設定について

管理画面サインイン時の多要素認証 の設定を踏襲します。

多要素認証関連テンプレート

カスタマイズする場合はスペースまたはワークスペースに同一識別子名のテンプレートモジュールを作成してください。

管理画面との関係

管理画面と会員サイトで同一アカウントを使用している場合、どちらかで多要素認証を設定すると両方に適用されます。