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

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

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

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

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

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

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

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

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" />

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

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

以下の例では、クエリストリングの値をグローバル変数として取得する機能を活用して、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 -->