パスワードによる会員サインイン

a-blog cms には、会員登録した会員ユーザーがサイトにサインインできる機能が標準機能として提供されています。

これにより、特定のページや一部の記事は会員としてサインインしたユーザーにしか見ることができない Webサイトを制作することができます。

このドキュメントでは、会員ユーザーがメールアドレス/ユーザーIDとパスワードを使用したサインイン認証について説明します。

Member_Signin モジュール

会員サインイン機能は、Member_Signin モジュールとして提供しています。

Member_Signin モジュールで表示できる内容は、大きくの3つのブロックに別れます。

ブロック名 概要
signin メールアドレスとパスワードを入力するフォームを表示します。
verifyCode メールアドレス認証でサインインしようとした場合に、メールアドレス認証メールに記載されている認証コードを入力するフォームを表示します。
tfa 2段階認証を有効にしている場合、2段階認証コードを入力するフォームを表示します。

メールアドレスとパスワードによる認証では signin ブロック内にメールアドレスとパスワードを入力するフォームを設置し、ユーザーに入力・送信してもらうことで認証を行います。

また、上記のブロックでは以下の変数が利用できます。

変数名 概要 例
trialTime コンフィグ > ログイン設定 > セキュリティのアカウントロックで設定した、パスワード認証の再試行制限の時間（分） 5
trialNumber コンフィグ > ログイン設定 > セキュリティのアカウントロックで設定した、パスワード認証の再試行制限の回数 5
lockTime コンフィグ > ログイン設定 > セキュリティのアカウントロック時間で設定したアカウントがロックされた場合の時間（分） 5
email_auth_login コンフィグ > ログイン設定 > セキュリティのメール認証サインイン（管理ログイン）から、メール認証での管理ログインが有効かどうか（on | off） off
email_auth_signin コンフィグ > ログイン設定 > セキュリティのメール認証サインイン（管理ログイン）から、メール認証でのサインインが有効かどうか（on | off） off

パスワードによる会員サインインフォームの送信

Member_Signin モジュールは、パスワードによるサインイン認証をするためのPOSTモジュールです。

このモジュールではフォームから送信されたメールアドレスとパスワードの値でサインイン認証を行います。

送信できる項目

Member_Signin モジュールで送信できる項目については以下の項目になります。

また、Member_Signin モジュールで送信するフィールド（項目）は name 属性に login[] を、 value 属性に 送信したい項目名を指定した input タグを一緒に記述する必要があります。

<input
  type="password"
  name="pass"
  value="{pass}"
  id="input-password"
  class="acms-form-large acms-form-block acms-form-width-full"
  autocomplete="current-password"
/>
<input type="hidden" name="login[]" value="pass" />
項目名 概要 入力例
mail ログインするユーザーのメールアドレスまたは、ユーザーIDです。 info@example.com
pass ログインするユーザーのパスワードです。 password
redirect ログイン後のリダイレクト先をパス指定で指定します。
この指定はコンフィグ > ログイン設定 > 基本設定の「現在のURLでログイン」や「ログイン後ページの指定」より優先されます。		 /news/

エラー時の表示

バリデーションはテンプレート側で任意に指定することができますが、いくつかの値はプログラム側で強制的にバリデーションを設定しているため、テンプレートにバリデーターを設定していなくても、バリデータのエラーが表示されます。

パスワードによる会員サインインフォームで何らかのエラーが起きた場合には以下のフィールド（項目）がバリデーションエラーとして表示されます。

フィールド（項目）名 オプション名 概要
pass auth コンフィグ > アクセス設定 > ログイン制限で設定した制限に引っかかった場合及び、リファラーがサイトのドメインと違う場合に発生するエラー
mail lock コンフィグ > ログイン設定 > アカウントロックで設定した、パスワード認証の再試行制限に引っかかった場合に発生するエラー
mail restriction ログイン拒否端末からログインした場合に発生するエラー
passwordSignin enable パスワードによるサインイン機能が無効の場合に発生するエラー

サンプルコード

以下の例では、クエリストリングの値をグローバル変数として取得する機能を活用して、redirect に クエリストリングの値を指定することで動的にリダイレクト先を指定できるようにしています。

また、{email_auth_signin} 変数を活用して、メールアドレス認証によるサインイン認証機能に、管理画面から設定を変更するだけで切り替えられるようにしています。

  <form
    action=""
    method="post"
    class="acms-form"
    enctype="multipart/form-data"
  >
    <!-- BEGIN signin -->
    <div class="separate">
      <section class="separate-item">
        <h2 class="heading-md heading-margin-top-none acms-text-center">
          メールアドレスでサインイン
        </h2>

        <div class="validator-result-{mail:validator#restriction} acms-alert acms-alert-danger">
          お使いの端末（ブラウザ）からはログインが禁止されています。<br />管理者にお問い合わせ下さい。
        </div>
        <div class="validator-result-{pass:validator#auth} acms-alert acms-alert-danger">
          ユーザーIDまたはパスワードが違います
        </div>
        <div class="validator-result-{mail:validator#notFound} acms-alert acms-alert-danger">
          ユーザーが存在しません
        </div>
        <div class="validator-result-{mail:validator#send} acms-alert acms-alert-danger">
          認証メールの送信に失敗しました
        </div>
        <div class="validator-result-{mail:validator#lock} acms-alert acms-alert-danger">
          <!--$1-->{trialNumber}<!--/$1-->回ログインに失敗したため、アカウントがロックされました。
          <!--$1-->{lockTime}<!--/$1-->分後にもう一度試してください。
        </div>
        <div class="validator-result-{mailAuthSignin:validator#enable} acms-alert acms-alert-danger">
          メール認証によるサインイン機能は無効です
        </div>
        <div class="validator-result-{passwordSignin:validator#enable} acms-alert acms-alert-danger">
          パスワードによるサインイン機能は無効です
        </div>

       <!-- BEGIN badRequest -->
        <div class="acms-alert acms-alert-danger">
          不正なアクセスです。
        </div>
        <!-- END badRequest -->

        <!-- BEGIN expired -->
        <div class="acms-alert acms-alert-danger">
          有効期限切れのURLです。再度お試しください。
        </div>
        <!-- END expired -->

        <ul class="form-group-list">
          <li class="form-group">
            <div class="form-label">
              <label class="acms-form-block acms-clear" for="input-text-mail"
                >メールアドレス</label
              >
            </div>
            <div class="form-control">
              <input
                type="text"
                name="mail"
                value="{mail}"
                class="acms-form-large acms-form-block acms-form-width-full js-ready-focus"
                id="input-text-mail"
                placeholder=""
                autocomplete="username"
                data-validator="mail"
              />
              <input type="hidden" name="login[]" value="mail" />
            </div>
          </li>
          <!-- BEGIN_IF [{email_auth_signin}/neq/on] -->
          <li class="form-group">
            <div class="form-label">
              <label class="acms-form-block acms-clear" for="input-password"
                >パスワード</label
              >
            </div>
            <div class="form-control">
              <input
                type="password"
                name="pass"
                value="{pass}"
                id="input-password"
                class="acms-form-large acms-form-block acms-form-width-full"
                autocomplete="current-password"
              />
              <input type="hidden" name="login[]" value="pass" />
              <input type="hidden" name="redirect" value="%{redirect}" />
              <input type="hidden" name="login[]" value="redirect" />
            </div>
          </li>
          <!-- END_IF -->
        </ul>
        <!-- BEGIN_IF [{email_auth_signin}/neq/on] -->
        <p class="acms-text-center">
          <a
            href="%{BLOG_URL}%{RESET_PASSWORD_SEGMENT}/"
            class="text-link is-color-text is-bold"
            >パスワードをお忘れの方はこちらから</a
          >
        </p>

        <div class="form-button-group">
          <button
            type="submit"
            name="ACMS_POST_Member_Signin"
            class="button is-lg is-width-lg form-button"
          >
            サインイン
          </button>
        </div>
        <!-- END_IF -->

        <!-- BEGIN_IF [{email_auth_signin}/eq/on] -->
        <p class="form-button-group">
          <button
            type="submit"
            name="ACMS_POST_Member_SigninWithEmail"
            class="button is-lg is-width-lg form-button"
          >
            確認メールを送信
          </button>
        </p>
        <!-- END_IF -->
      </section>
    </div>
    <!-- END signin -->
  </form>

会員サインアップ（会員登録）フォームへのリンクを表示する

subscribeLink ブロックを活用することで、コンフィグ > ログイン設定 > 会員登録機能の「ユーザー登録の外部申請」が有効になっている場合のみ、会員サインアップ（会員登録）フォームへのリンクを表示するといったことができます。

<!-- subscribeLink ブロックは「ユーザー登録の外部申請」が有効になっている場合のみ表示される -->
<!-- BEGIN subscribeLink -->
<div class="acms-member-main-box-bottom">
  <div class="acms-grid">
    <p class="acms-col-6 acms-margin-none"><a href="%{BLOG_URL}%{SIGNUP_SEGMENT}/" class="acms-btn-flat acms-btn-block"><!--T-->新規会員登録<!--/T--></a></p>
    <p class="acms-col-6 acms-margin-none"><a href="%{BLOG_URL}" class="acms-btn-flat acms-btn-block"><!--T-->サイトに戻る<!--/T--></a></p>
  </div>
</div>
<!-- END subscribeLink -->