ログイン・読者登録機能

目次

Login モジュール

a-blog cms では、会員制サイトを作成するための読者登録機能が標準機能として搭載されています。また、SNSログインや2段階認証など、メールアドレス/ユーザーIDとパスワード以外でのログイン認証についても標準機能としてサポートされている他、パスワードポリシー設定などのセキュリティに関する設定も標準機能として提供されています。

主な機能としては以下のようなものがあげられます。

  • メールアドレスとパスワードによるログイン認証
  • SNSアカウントによるログイン認証
  • 2段階認証
  • ユーザー登録の外部申請(サイト閲覧者がアカウント登録をすることができる機能)
  • メールアドレスの有効性チェック
  • パスワード変更機能
  • パスワードポリシー(パスワードのルール)の設定

Login モジュール

a-blog cms では、ログイン認証や、読者登録機能ついては、Login モジュールとして提供しております。ログイン認証や、パスワード変更、外部申請によるユーザー登録などは POST 操作になりますので、POSTモジュールとして提供されています。Login モジュールはログイン認証や、パスワード変更、外部申請によるユーザー登録などでPOSTモジュールを実行した結果を表示するためのモジュールになります。

Login モジュールで利用できるブロック



ブロック名 概要
auth https://a-blogcmsの設置場所/config.server.php で LOGIN_SEGMENT に指定した文字列/ のURLにアクセスした時に表示されるブロックです。メールアドレスとパスワードによるログインやSNSログインの認証フォームを表示します。
reset Login_Remindモジュールで発行されたパスワード変更URLからアクセスした場合に表示されるブロックです。パスワード変更フォームを表示します。
tfa メールアドレスとパスワードによるログイン認証時、2段階認証が有効になっている場合に表示されるブロックです。2段階認証コードを入力して2段階認証を行うフォームを表示します。
recovery alt のURLコンテキストに recovery が指定されている場合に表示されるブロックです。2段階認証を無効にするフォームを表示します。
subscribe alt のURLコンテキストに subscribe が指定されているかつ、コンフィグ > ログイン設定 > 読者登録機能の ユーザー登録の外部申請が有効になっている場合に表示されるブロックです。ユーザーを外部から登録するためのフォームを表示します。
remind alt のURLコンテキストに remind が指定されている場合に表示されるブロックです。パスワード変更メールを送信するフォームを表示します。
<!-- BEGIN_MODULE Login -->
<section>
  <form action="" method="post" class="h-adr js-validator">

    <!-- BEGIN auth -->
    <!-- ログイン -->
    <!-- END auth -->

    <!-- BEGIN reset -->
    <!-- パスワード変更 -->
    <!-- END reset -->

    <!-- BEGIN subscribe -->
    <!-- 新規ユーザー登録 -->
    <!-- END subscribe -->

    <!-- BEGIN remind -->
    <!-- パスワード変更メールの送信 -->
    <!-- END remind -->

    <!-- BEGIN tfa -->
    <!-- 2段階認証 -->
    <!-- END tfa -->

    <!-- BEGIN recovery -->
    <!-- 2段階認証の無効化 -->
    <!-- END recovery -->
  </form>
</section>
<!-- END_MODULE Login -->

以下のブロックは、上記のブロックの中で使用することができるブロックです。



ブロック名 概要
submit GETによるアクセス(初回アクセス)や POSTモジュールの処理が失敗してエラーが発生した場合に表示されます。POSTモジュールの処理が成功した場合に非表示にしたいテンプレートに活用します。
sendMsg#before GETによるアクセス(初回アクセス)の場合に表示されるブロックです。初回アクセス時のみ表示したいテンプレートで活用します。
sendMsg#after POST によるアクセスかつ、POSTモジュールの処理が成功した場合に表示されるブロックです。POST モジュールの処理(パスワード変更やユーザー登録)が成功した場合に表示したいテンプレートに活用します。
subscribeLink コンフィグ > ログイン設定 > 読者登録機能の ユーザー登録の外部申請が有効になっている場合に表示されるブロックです。読者登録機能が有効になっている場合のみ表示したいテンプレートに活用します。
<!-- BEGIN_MODULE Login -->
<section>
  <form action="" method="post" class="h-adr js-validator">
    <!-- BEGIN subscribe -->
    <!-- BEGIN sendMsg#before -->
    <p>登録いただくと指定されたメールアドレスに確認メールが送信されます。メールの内容に従って登録を完了してください。</p>
    <!-- END sendMsg#before -->
    <!-- BEGIN sendMsg#after -->
    <p class="acms-alert acms-alert-info alert">入力されたメールアドレス宛に、確認用メールを送信しました。</p>
    <!-- END sendMsg#after -->

    <!-- BEGIN submit -->
    <button type="submit" class="btn" name="ACMS_POST_Login_Subscribe">会員登録</button>
    <!-- END submit -->
    <!-- END subscribe -->
  </form>
</section>
<!-- END_MODULE Login -->

Login モジュールで利用できる変数



変数名 概要
step GETによるアクセス(初回アクセス)では 'step' 、POSTモジュール実行後かつ、POSTモジュールの処理が成功した場合は 'result' 、POSTモジュール実行後かつ、POSTモジュールの処理が失敗した場合は 'reapply' が表示されます。IFブロックと組み合わせて利用します。
trialTime コンフィグ > ログイン設定 > セキュリティのアカウントロックで設定した、パスワード認証の再試行制限の時間(分)
trialNumber コンフィグ > ログイン設定 > セキュリティのアカウントロックで設定した、パスワード認証の再試行制限の回数
lockTime コンフィグ > ログイン設定 > セキュリティのアカウントロック時間で設定したアカウントがロックされた場合の時間(分)
passwordPolicyMessage コンフィグ > ログイン設定 > パスワードポリシーで設定したメッセージ

また、Form モジュール と同じく送信した値は変数として表示できます。また、バリデーターやコンバーターも Form モジュールと同じ形式で利用できます。

注意点として、Login 系の POST モジュールでは、プログラム側で強制的にバリデーションを設定しているため、テンプレートにバリデーターを設定していなくても、バリデータのエラーが表示されます。

例えば、Login_Auth モジュールでは、コンフィグ > ログイン設定 > アカウントロックで設定した、パスワード認証の再試行制限に引っかかった場合、mail というフィールドの lock というオプションでエラーが表示されます。

<p class="validator-result-{mail:validator#lock} acms-admin-alert acms-admin-alert-danger">{trialNumber}回ログインに失敗したため、アカウントがロックされました。{lockTime}分後にもう一度試してください。</p>

POSTモジュールで設定しているバリデーターはモジュールごとに異なるため、各種POSTモジュールのページを参照してください。

メールアドレス認証URLからアクセスした場合に利用できるブロック

コンフィグ > ログイン設定 > 読者登録機能で、メールアドレスの有効性確認が行われる設定になっている場合、Login_Subscribe モジュールでユーザー登録を行った場合、自動返信メールに記載されているメールアドレスの有効性認証のためのURLにアクセスして初めてユーザーがログインできるようになります。

Login モジュールでは、メールアドレスの有効性認証のためのURLからアクセスした場合に、ユーザーのメールアドレス認証が成功したかどうかの結果を表示するために以下のブロックが使用できるようになります。



ブロック名 概要
subscribe.enableAccount メールアドレスの有効性認証が成功した場合に表示されるブロックです。
subscribe.badRequest メールアドレスの有効性認証のためのURLの形式が不正であるために、メールアドレスの有効性認証が失敗した場合に表示されるブロックです。
subscribe.expired メールアドレスの有効性認証のためのURLの有効期限切れが原因で、メールアドレスの有効性認証が失敗した場合に表示されるブロックです。有効期限は コンフィグ > ログイン設定 > 読者登録機能の確認メールの有効時間で設定可能です。
subscribe.notFound メールアドレスの有効性認証を行う対象となるユーザーが見つからなかったために、メールアドレスの有効性認証が失敗した場合に表示されるブロックです。既にメールアドレスの有効性を認証済みかユーザーが削除されている場合などに表示されます。
<!-- BEGIN subscribe.enableAccount -->
<p class="acms-admin-alert acms-admin-alert-info">アカウントを有効化しました。メールアドレスとパスワードを入力してログインください。</p>
<!-- END subscribe.enableAccount -->
<!-- BEGIN subscribe.badRequest -->
<p class="acms-admin-alert acms-admin-alert-danger">不正なアクセスです。</p>
<!-- END subscribe.badRequest -->
<!-- BEGIN subscribe.expired -->
<p class="acms-admin-alert acms-admin-alert-danger">有効期限切れのURLです。再度申請ください。</p>
<!-- END subscribe.expired -->
<!-- BEGIN subscribe.notFound -->
<p class="acms-admin-alert acms-admin-alert-danger">すでに有効済みか無効なURLです。</p>
<!-- END subscribe.notFound -->

パスワード変更URLからアクセスした場合に利用できるブロック

Login_Remind モジュールで発行したパスワード変更URLにアクセスした場合に、そのアクセスが有効かどうかの検証を行っています。その検証結果を表示するために以下のブロックが使用できるようになります。



ブロック名 概要
reset.success 2段階認証有効時にパスワード変更を行った場合に表示されます。2段階認証が無効の場合は、パスワード変更後、ブログのトップページへリダイレクトされるため基本は利用しません。
reset.badRequest パスワード変更URLの形式が不正であるために、パスワード変更URLの有効性検証が失敗した場合に表示されるブロックです。
reset.expired パスワード変更URLの有効期限切れが原因で、パスワード変更URLの有効性検証が失敗した場合に表示されるブロックです。有効期限は コンフィグ > ログイン設定 > セキュリティのパスワード変更の有効時間で設定可能です。
reset.notFound パスワード変更URLの有効性検証を行う対象となるユーザーが見つからなかったために、パスワード変更URLの有効性検証が失敗した場合に表示されるブロックです。既にパスワード変更URLの有効性を認証済みかユーザーが削除されている場合などに表示されます。
<!-- BEGIN reset.success -->
<p class="acms-admin-alert acms-admin-alert-info">パスワードを変更しました。</p>
<!-- END reset.success -->
<!-- BEGIN reset.badRequest -->
<p class="acms-admin-alert acms-admin-alert-danger">不正なアクセスです。</p>
<!-- END reset.badRequest -->
<!-- BEGIN reset.expired -->
<p class="acms-admin-alert acms-admin-alert-danger">有効期限切れのURLです。再度申請ください。</p>
<!-- END reset.expired -->
<!-- BEGIN reset.notFound -->
<p class="acms-admin-alert acms-admin-alert-danger">不正なアクセスです。</p>
<!-- END reset.notFound -->

Login_Auth モジュール

Login_Auth モジュールとは、メールアドレスとパスワードによるログイン認証及び、2段階認証を行うための POST モジュールです。

メールアドレスとパスワードによるログイン認証を行うことが出来ます。また、メールアドレスの代わりにユーザーIDを指定することも可能です。ログイン後はコンフィグ > ログイン設定 > 基本設定の設定に従ってリダイレクトされます。例外として、2段階認証が有効になっている場合は1度目のログイン後のリダイレクトは行われません。2段階認証が成功した場合にリダイレクトが行われます。

また、2段階認証も Login_Auth モジュールの処理として行われます。

有効なフィールド(項目)

Login_Auth モジュールで有効なフィールド(項目)について説明します。以下のフィールド(項目)が送信できます。

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

<input type="password" name="pass" value="{pass}"  class="acms-admin-form-large  validator-result-{pass:validator#auth}" autocomplete="off" />
<input type="hidden" name="login[]" value="pass" />


フィールド名(項目) 概要 入力例
mail ログインするユーザーのメールアドレスまたは、ユーザーIDです。 info@example.com
pass ログインするユーザーのパスワードです。 password
redirect ログイン後のリダイレクト先をパス指定で指定します。この指定はコンフィグ > ログイン設定 > 基本設定の「現在のURLでログイン」や「ログイン後ページの指定」より優先されます。 /news/
tfa このフィールドが on の場合、2段階認証コードの検証を行います。 on
code 2段階認証コードです。 928676

Login_Auth モジュールのサンプルコード

<!-- BEGIN_MODULE Login -->
<form action="" method="post" enctype="multipart/form-data">
  <!-- BEGIN auth -->
  <div class="acms-admin-loginBox clearfix">
      <div class="acms-admin-siteImageText">ログイン</div>
      <div class="acms-admin-form">
        <p class="validator-result-{mail:validator#restriction} acms-admin-alert acms-admin-alert-danger">お使いの端末(ブラウザ)からはログインが禁止されています。<br>管理者にお問い合わせ下さい。</p>
        <p class="validator-result-{pass:validator#auth} acms-admin-alert acms-admin-alert-danger">ユーザーIDまたはパスワードが違います。</p>
        <p class="validator-result-{mail:validator#lock} acms-admin-alert acms-admin-alert-danger">{trialNumber}回ログインに失敗したため、アカウントがロックされました。{lockTime}分後にもう一度試してください。</p>

        <label class="acms-admin-form-block acms-admin-clear">ユーザーID / メールアドレス</label>
        <input type="text" name="mail" value="{mail}" class="acms-admin-form-large  validator-result-{pass:validator#auth}" id="input-text-mail" placeholder="" />
        <input type="hidden" name="login[]" value="mail" />
        <label class="acms-admin-form-block">パスワード</label>
        <input type="password" name="pass" value="{pass}"  class="acms-admin-form-large validator-result-{pass:validator#auth}" autocomplete="off" />
        <input type="hidden" name="login[]" value="pass" />
        <input type="hidden" name="redirect" value="%{redirect}" />
        <input type="hidden" name="login[]" value="redirect" />
      </div>
      <p class="loginAction">
        <button type="submit" class="acms-admin-btn-admin acms-admin-btn-admin-primary acms-admin-btn-block acms-admin-btn-large" name="ACMS_POST_Login_Auth">ログイン</button>
      </p>
  </div>
  <!-- END auth -->
</form>
<!-- END_MODULE Login -->

a-blog cms ではクエリストリングの値をグローバル変数として取得する事ができるため、上記のサンプルコードでは、redirect に クエリストリングの値を指定することで動的にリダイレクト先を指定できるようにしています。

エラー時の表示

Login_Auth モジュールで何らかのエラーが起きた場合には以下のフィールド(項目)がバリデーションエラーとして表示されます。



フィールド(項目)名 オプション名 概要
pass auth コンフィグ > アクセス設定 > ログイン制限で設定した制限に引っかかった場合に発生するエラー
mail lock コンフィグ > ログイン設定 > アカウントロックで設定した、パスワード認証の再試行制限に引っかかった場合に発生するエラー
mail restriction ログイン拒否端末からログインした場合に発生するエラー
code auth 2段階認証に失敗した場合に発生するエラー

Login_Remind モジュール

Login_Remind モジュールとは、入力されたメールアドレスに対して、パスワード変更用のURLが記載されたメールの送信を行うための POST モジュールです。

パスワード変更用のURLの有効期限は、コンフィグ > ログイン設定 > セキュリティ のパスワード変更の有効時間から設定可能です。

有効なフィールド(項目)

Login_Remind モジュールで有効なフィールド(項目)について説明します。以下のフィールド(項目)が送信できます。

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

<input type="email" name="mail" value="{mail}"  class="acms-admin-form-large" autocomplete="email" />
<input type="hidden" name="login[]" value="mail" />


フィールド名(項目) 概要 入力例
mail(必須) パスワードリセット用のURLが記載されたメールの送信先となるメールアドレス info@example.com

Login_Remind モジュールのサンプルコード

!-- BEGIN_MODULE Login -->
<form action="" method="post" enctype="multipart/form-data">
  <!-- BEGIN remind -->
  <div class="acms-admin-loginBox">
      <div class="acms-admin-siteImageText"><span class="acms-admin-label" style="background-color:%{BLOG_THEME_COLOR};">%{BLOG_NAME}</span>&nbsp;<span class="acms-admin-label"><!--T-->パスワード変更<!--/T--></span></div>
      <!-- BEGIN sendMsg#before -->
      <p class="acms-admin-alert acms-admin-alert-info">パスワードの再設定をご案内するメールを送信します。</p><!-- END sendMsg#before --><!-- BEGIN sendMsg#after -->
      <p class="acms-admin-alert acms-admin-alert-info">パスワードの再設定をご案内するメールを送信しました。</p><!-- END sendMsg#after -->

      <p class="validator-result-{mail:validator#required} acms-admin-alert acms-admin-alert-danger">メールアドレスが入力されていません。</p>
      <p class="validator-result-{mail:validator#exist} acms-admin-alert acms-admin-alert-danger">登録されていないメールアドレスです。</p>
      <p class="validator-result-{mail:validator#confirmed} acms-admin-alert acms-admin-alert-danger">有効化されていないメールアドレスです。</p>
      <p class="validator-result-{mail:validator#send} acms-admin-alert acms-admin-alert-danger">メールの送信に失敗しました。システムの設定に問題があります。システムの管理者にお問い合わせください。</p>

      <div class="acms-admin-form">
        <label class="acms-admin-form-block acms-admin-clear">メールアドレス</label>
        <input type="email" name="mail" value="{mail}" class="acms-admin-form-large validator-result-{mail:validator#required} validator-result-{mail:validator#exist} validator-result-{mail:validator#send}" id="input-text-mail" placeholder="" />
        <input type="hidden" name="login[]" value="mail" />
      </div>
      <!-- BEGIN submit -->
      <p class="loginAction">
        <button type="submit" class="acms-admin-btn-admin acms-admin-btn-admin-primary acms-admin-btn-block acms-admin-btn-large" name="ACMS_POST_Login_Remind">パスワード再設定メールを送る</button>
      </p><!-- END submit -->
    </div>
  <!-- END remind -->
</form>
<!-- END_MODULE Login -->

エラー時の表示

Login_Remind モジュールで何らかのエラーが起きた場合には以下のフィールド(項目)がバリデーションエラーとして表示されます。



フィールド名(項目) オプション名 概要
mail required メールアドレスが入力されていない場合に発生するエラーです。
mail exist 指定したメールアドレスで有効化されているユーザーが存在しない場合に発生するエラーです。
mail confirmed 指定したメールアドレスのユーザーがメールアドレスの有効性が認証されているユーザーでない場合に発生するエラーです。
mail send メールの送信が失敗した場合に発生するエラーです。

パスワード再設定メールで使用できる変数

パスワード再設定メールでは以下の変数が使用できます。



変数名 概要
resetUrl パスワード変更用のURL

Login_ResetPassword モジュール

Login_ResetPassword モジュールとは、ユーザーのパスワード変更を行うための POST モジュールです。

ユーザーのパスワードをユーザー自身が指定したパスワードに変更できます。パスワード変更が成功すると自動的にログインし、現在のブログのトップページにリダイレクトされます。

ユーザーがログインパスワードを忘れてログインできない場合に、パスワードの再設定を行い、ログインできるようにするために利用できます。

また、Login_ResetPassword モジュールは Login_Remind モジュールで発行されたパスワード変更のURLから実行する必要がありますのでご注意ください。

2段階認証が有効な場合は、パスワード変更が成功した場合でもリダイレクトせず、そのままログイン画面に遷移します。

有効なフィールド(項目)

Login_ResetPassword モジュールで有効なフィールド(項目)について説明します。以下のフィールド(項目)が送信できます。

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

<input type="password" name="pass" value="{pass}" class="acms-admin-form-large validator-result-{pass:validator#required} validator-result-{pass:validator#password}" autocomplete="off" />
<input type="hidden" name="user[]" value="pass" />


フィールド名(項目) 概要 入力例
pass(必須) 新しく設定したいパスワード password
retype_pass(必須) 新しく設定したいパスワード(確認用) password

Login_ResetPassword モジュールのサンプルコード

<!-- BEGIN_MODULE Login -->
<form action="" method="post" enctype="multipart/form-data">
  <!-- BEGIN reset -->
  <div class="acms-admin-loginBox">
      <div class="acms-admin-siteImageText">パスワード変更</div>

      <!-- BEGIN_IF [{pass:validator#required}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">パスワードが入力されていません。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{pass:validator#password}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">不正なパスワードです。別のパスワードを入力ください。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{retype_pass:validator#equalTo}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">パスワードが一致しません。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{reset:validator#isOperable}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">不正な操作です。</p>
      <!-- END_IF -->

      <div class="acms-admin-form">
        <label class="acms-admin-form-block acms-admin-clear">新しいパスワード</label>
        <div class="js-password_strength">
          <input type="password" name="pass" value="{pass}" class="js-input acms-admin-form-large  validator-result-{pass:validator#required} validator-result-{pass:validator#password}" autocomplete="off" />
          <input type="hidden" name="user[]" value="pass" />
          <div>
            <div class="js-meter acms-admin-password-strength-meter acms-admin-form-width-full"></div>
          </div>
          <span class="js-label acms-admin-password-strength-label" aria-live="assertive"></span>
        </div>

        <label class="acms-admin-form-block acms-admin-clear">新しいパスワードを確認</label>
        <input type="password" name="retype_pass" value="{retype_pass}" class="acms-admin-form-large validator-result-{retype_pass:validator#equalTo}" autocomplete="off" />
        <input type="hidden" name="user[]" value="retype_pass" />
        <input type="hidden" name="retype_pass:validator#equalTo" value="pass" id="validator-retype_pass-equalTo" />

        <!-- BEGIN passwordPolicyMessage:veil -->
        <p class="acms-admin-text-danger">{passwordPolicyMessage}</p>
        <!-- END passwordPolicyMessage:veil -->
      </div>
      <p class="loginAction">
        <button type="submit" class="acms-admin-btn-admin" name="ACMS_POST_Login_ResetPassword">パスワードを変更</button>
      </p>
    </div>
  <!-- END reset -->
</form>
<!-- END_MODULE Login -->

エラー時の表示

Login_ResetPassword モジュールで何らかのエラーが起きた場合には以下のフィールド(項目)がバリデーションエラーとして表示されます。



フィールド(項目)名 オプション名 概要
pass required パスワードが入力されていない場合に発生するエラーです。
pass password コンフィグ > ログイン設定 > パスワードポリシーで設定したルールに違反している場合に発生するエラーです。
retype_pass equalTo 入力されたパスワードが retype_pass のフィールド(項目)で入力したパスワードと一致していない場合に発生するエラーです。
reset isOperable Login_Remind モジュールで発行されたパスワード変更のURLでないURLや、パスワード変更のURLの有効期限が切れていた場合などに発生するエラーです。

Login_Subscribe モジュール

Login_Subscribe モジュールとは、外部申請によるユーザー登録を行うためのPOSTモジュールです。

Login_Subscribe モジュールを使うことで、サイト閲覧者自身でユーザー登録を行うことができます。これにより、サイト閲覧者に会員登録をしてもらうことを想定した会員制サイトを構築することが可能です。

また、Login_Subscribe モジュールでは、メールアドレスや名前などのユーザーの基本設定だけでなく、ユーザーのカスタムフィールドも登録することが可能です。また、コンフィグ > ログイン設定 > 読者登録機能から登録するユーザーのステータスや権限の設定や、メールアドレスの有効性認証を行うかどうかをカスタマイズできます。

Login_Subscribe モジュールを使ったユーザー登録フォームのカスタマイズについては、以下のドキュメントで詳しく紹介されています。


有効なフィールド(項目)

Login_Subscribe モジュールではユーザーの基本設定のフィールド(項目)とカスタムフィールドのデータを送信できます。基本設定のフィールド(項目)を送信する場合は、 name 属性に `user[]` を、 value 属性に 送信したいフィールド(項目)名を指定した input タグを一緒に記述する必要があります。

<input type="text" name="name" value="{name}" class="acms-form-large validator-result-{name:validator#required}" placeholder="" />
<input type="hidden" name="user[]" value="name" />

<!-- ↓カスタムフィールドも追加できます -->
<input type="text" name="company" value="{company}" class="acms-form-large" />
<input type="hidden" name="field[]" value="company" />


フィールド名(項目) 概要 入力例
name(必須) 登録するユーザーの名前です。 アップルップル
mail(必須) 登録するユーザーのメールアドレスです。 info@example.com
pass(必須) 登録するユーザーのパスワードです。 password
retype_pass(必須) 登録するユーザーのパスワード(確認用)です。 password
code 登録するユーザーのユーザーコードです。 ablogcms
url 登録するユーザーのURLです。 https://example.com
mail_magazine 登録するユーザーがメールマガジンを受信するかどうか(on | off)です。 off

上記のユーザー基本設定に加えて、ユーザーのカスタムフィールドを登録することも可能です。

Login_Subscribe モジュールのサンプルコード

<!-- BEGIN_MODULE Login -->
<form action="" method="post" enctype="multipart/form-data">
  <!-- BEGIN subscribe -->
  <div class="acms-admin-loginBox">
      <div class="acms-admin-siteImageText">新規ユーザー登録</div>

      <!-- BEGIN sendMsg#before -->
      <p class="acms-admin-login-text">登録いただくと指定されたメールアドレスに確認メールが送信されます。メールの内容に従って登録を完了してください。</p>
      <!-- END sendMsg#before -->
      <!-- BEGIN sendMsg#after -->
      <p class="acms-admin-alert acms-admin-alert-info">入力されたメールアドレス宛に、確認用メールを送信しました。</p>
      <!-- END sendMsg#after -->

      <!-- BEGIN_IF [{name:validator#required}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">名前が入力されていません。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{mail:validator#required}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">メールアドレスが入力されていません。</p>
      <!-- END_IF -->

      <!-- BEGIN_IF [{mail:validator#email}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">不正なメールアドレスです。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{mail:validator#doubleMail}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">すでに登録されているメールアドレスです。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{mail:validator#send}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">メールの送信に失敗しました。システムの設定に問題があります。システムの管理者にお問い合わせください。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{pass:validator#required}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">パスワードが入力されていません。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{pass:validator#password}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">不正なパスワードです。別のパスワードを入力ください。</p>
      <!-- END_IF -->
      <!-- BEGIN_IF [{retype_pass:validator#equalTo}/eq/0] -->
      <p class="validator-result-0 acms-admin-alert acms-admin-alert-danger">パスワードが一致しません。</p>
      <!-- END_IF -->

      <div class="acms-admin-form">
        <label class="acms-admin-form-block acms-admin-clear">名前</label>
        <input type="text" name="name" value="{name}" class="acms-admin-form-large  validator-result-{name:validator#required}" placeholder="" />
        <input type="hidden" name="user[]" value="name" />

        <label class="acms-admin-form-block acms-admin-clear">メールアドレス</label>
        <input type="text" name="mail" value="{mail}" class="acms-admin-form-large  validator-result-{mail:validator#required} validator-result-{mail:validator#email} validator-result-{mail:validator#doubleMail} validator-result-{mail:validator#send}" placeholder="" />
        <input type="hidden" name="user[]" value="mail" />

        <label class="acms-admin-form-block acms-admin-clear">パスワード</label>
        <div class="js-password_strength">
          <input type="password" name="pass" value="{pass}" class="js-input acms-admin-form-large validator-result-{pass:validator#required} validator-result-{pass:validator#password}" autocomplete="off" />
          <input type="hidden" name="user[]" value="pass" />
          <div>
            <div class="js-meter acms-admin-password-strength-meter acms-admin-form-width-full"></div>
          </div>
          <span class="js-label acms-admin-password-strength-label" aria-live="assertive"></span>
        </div>

        <label class="acms-admin-form-block acms-admin-clear">パスワード(確認)</label>
        <input type="password" name="retype_pass" value="{retype_pass}" class="acms-admin-form-large validator-result-{retype_pass:validator#equalTo}" autocomplete="off" />
        <input type="hidden" name="user[]" value="retype_pass" />
      </div>
      <!-- BEGIN passwordPolicyMessage:veil -->
      <p class="acms-admin-text-danger">{passwordPolicyMessage}</p>
      <!-- END passwordPolicyMessage:veil -->
      <!-- BEGIN submit -->
      <p class="loginAction">
        <button type="submit" class="acms-admin-btn-admin acms-admin-btn-admin-primary acms-admin-btn-block acms-admin-btn-large" name="ACMS_POST_Login_Subscribe"><!--T-->読者登録<!--/T--></button>
      </p>
     <!-- END submit -->
    </div>
  <!-- END subscribe -->
</form>
<!-- END_MODULE Login -->

エラー時の表示

Login_Subscribe モジュールで何らかのエラーが起きた場合には以下のフィールド(項目)がバリデーションエラーとして表示されます。



フィールド(項目)名 オプション名 概要
name required ユーザーの名前が入力されていない場合に発生するエラー
mail required ユーザーのメールアドレスが入力されていない場合に発生するエラー
mail email ユーザーのメールアドレスの形式が間違っている場合に発生するエラー
mail doubleMail 入力されたメールアドレスで登録されたユーザーが既に存在する場合に発生するエラー
mail send 読者登録メールの送信に失敗した場合に発生するエラー
pass required ユーザーのパスワードが入力されていない場合に発生するエラー
pass password ユーザーのパスワードがコンフィグで設定したパスワードポリシーに違反している場合に発生するエラー
retype_pass equalTo ユーザーのパスワード(確認用)が入力されたパスワードと一致しない場合に発生するエラー
code regex ユーザーコードが不正な形式である場合に発生するエラー
code doubleCode 入力されたコードで登録されたユーザーが既に存在する場合に発生するエラー
url url ユーザーのURLの形式が間違っている場合に発生するエラー
login isOperable コンフィグ > ログイン設定 > 読者登録機能のユーザー登録の外部申請が無効になっている場合に発生するエラー

自動送信メールで使用できる変数

Login_Subscribe モジュールで送信された自動送信メールでは以下の変数が利用できます。



変数名 概要
uid 作成されたユーザーのユーザーIDです。
name 作成されたユーザーの名前です。
mail 作成されたユーザーのメールアドレスです。
code 作成されたユーザーのユーザーコードです。
url 作成されたユーザーのURLです。
subscribeUrl メールアドレスの有効性認証ための認証URLです。

Login_Tfa_Recovery モジュール

Login_Tfa_Recovery モジュールとは、リカバリーコードを活用して2段階認証を無効にするための POST モジュールです。

このページは Login_Tfa_Recovery モジュールについてのドキュメントです。2段階認証の設定方法については以下をご確認ください。


有効なフィールド(項目)

Login_Tfa_Recovery モジュールで有効なフィールド(項目)について説明します。以下のフィールド(項目)が送信できます。

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

<input type="password" name="recovery" value="{recovery}"  class="acms-admin-form-large  validator-result-{recovery:validator#auth}" autocomplete="off" />
<input type="hidden" name="login[]" value="recovery" />


フィールド名(項目) 概要 入力例
mail 2段階認証を無効化するユーザーのメールアドレス info@example.com
pass 2段階認証を無効化するユーザーのパスワード password
recovery リカバリコード aaaaaaaa

Login_Tfa_Recovery モジュールのサンプルコード

<!-- BEGIN_MODULE Login -->
<form action="" method="post" enctype="multipart/form-data">
  <!-- BEGIN recovery -->
  <div class="acms-admin-loginBox clearfix">
      <div class="acms-admin-siteImageText">ログイン</div>
      <div class="acms-admin-form">
        <p class="validator-result-{pass:validator#auth} acms-admin-alert acms-admin-alert-danger">ユーザーIDまたはパスワードが違います。</label>
        <p class="validator-result-{recovery:validator#auth} acms-admin-alert acms-admin-alert-danger">正しいリカバリーコードを入力してください。</label>
        <p class="validator-result-{mail:validator#lock} acms-admin-alert acms-admin-alert-danger">{trialNumber}回ログインに失敗したため、アカウントがロックされました。{lockTime}分後にもう一度試してください。</p>

        <label class="acms-admin-form-block acms-admin-clear">ユーザーID / メールアドレス</label>
        <input type="text" name="mail" value="{mail}" class="acms-admin-form-large validator-result-{pass:validator#auth}” id="input-text-mail" placeholder="" />
        <input type="hidden" name="login[]" value="mail" />

        <label class="acms-admin-form-block">パスワード</label>
        <input type="password" name="pass" value="{pass}"  class="acms-admin-form-large  validator-result-{pass:validator#auth}" placeholder="" />
        <input type="hidden" name="login[]" value="pass" />

        <label class="acms-admin-form-block">リカバリーコード</label>
        <input type="password" name="recovery" value="{recovery}"  class="acms-admin-form-large validator-result-{recovery:validator#auth}" placeholder="" />
        <input type="hidden" name="login[]" value="recovery" />
      </div>
      <p class="loginAction">
        <button type="submit" class="acms-admin-btn-admin" name="ACMS_POST_Login_Tfa_Recovery">2段階認証を無効化</button>
      </p>
    </div>
  <!-- END recovery -->
</form>
<!-- END_MODULE Login -->

2段階認証の無効化に成功すると Login モジュールの auth ブロック内で tfaRecovery という変数が利用できます。以下のようにテンプレートを記述することで2段階認証の無効化に成功したことを表示できます。

<!-- BEGIN_IF [{tfaRecovery}/eq/on] -->
<p class="validator-result-0 acms-admin-alert acms-admin-alert-info">2段階認証を無効化しました</p>
<!-- END_IF -->

エラー時の表示

Login_Tfa_Recovery モジュールで何らかのエラーが起きた場合には以下のフィールド(項目)がバリデーションエラーとして表示されます。



フィールド(項目)名 オプション名 概要
pass auth コンフィグ > アクセス設定 > ログイン制限で設定した制限に引っかかった場合に発生するエラー
mail lock コンフィグ > ログイン設定 > アカウントロックで設定した、パスワード認証の再試行制限に引っかかった場合に発生するエラー
recovery auth 間違ったリカバリーコードを送信した場合に発生するエラー

会員サインアップ(会員登録)

a-blog cms には、読者権限のユーザーとして、サイト上からユーザーが自由に会員登録することができる機能が標準機能として提供されています。

会員サインアップ(会員登録)フォームはテンプレートをカスタマイズすることが可能なので、オリジナルデザインの会員サインアップ(会員登録)フォームを作成することができます。

また、ステップフォームとしてフォームを分割することもできるため、入力項目が多くなってしまった場合でもユーザビリティの高い会員サインアップ(会員登録)フォームを作成することができます。

会員登録機能設定

サイト上からユーザーが自由に会員登録できるようにするためには、管理画面 > コンフィグ > ログイン設定 を変更する必要があります。

会員登録機能セクションから、"ユーザー登録の外部申請" を有効にしてください。


ユーザー登録の外部申請を有効にする子をで、サイト上からユーザーが自由に会員登録できるようになります。

会員サインアップ(会員登録)機能の設定


会員登録機能の設定では、他にも会員登録時にメールアドレスの有効性確認をするかどうかの他、会員登録時のユーザー権限を変更することができます。

Member_Signup モジュール

会員サインアップ(会員登録)フォーム機能は、Member_Signup モジュールとして提供しています。

デフォルトでは以下のように入力・確認・完了・認証の4つのステップに分かれています。(step#2 はデフォルトでは利用されていませんがステップフォーム実装の例として記述されています。)

フォーム送信時のバリデーションに失敗した場合、ステップの遷移は行われず、送信前のステップに遷移します。

<!-- BEGIN_MODULE Member_Signup -->
<div class="acms-member-container">
  @include("/_member/parts/header.html")

  <!-- BEGIN step#auth -->
  @include("/_member/parts/signup/auth.html")
  <!-- END step#auth -->

  <!-- BEGIN step#input -->
  @include("/_member/parts/signup/input.html")
  <!-- END step#input -->

  <!-- BEGIN step#2 -->
  @include("/_member/parts/signup/input2.html")
  <!-- END step#2 -->

  <!-- BEGIN step#confirm -->
  @include("/_member/parts/signup/confirm.html")
  <!-- END step#confirm -->

  <!-- BEGIN step#result -->
  @include("/_member/parts/signup/result.html")
  <!-- END step#result -->
</div>
<!-- END_MODULE Member_Signup -->

また、Form モジュール と同じく送信した値は変数として表示できます。また、バリデーターやコンバーターも Form モジュールと同じ形式で利用できます。

特別なステップ

フォームモジュールと同様にステップはカスタマイズで任意のステップ名で増減することができますが、以下に紹介するステップはステップ名が予め決まっています。



ステップ名 説明
input GETによるアクセス(初回アクセス)時に表示される初期ステップです。
auth 会員登録時に発行されるメールアドレス認証URLからアクセスしたときに表示されるステップです。

利用できる変数・ブロック

基本的には、Form モジュール と同じくフォームの項目として送信された値が変数として利用可能です。また、会員登録時に発行されるメールアドレス認証URLからアクセスしたときに表示されるステップである auth ステップを除いて、以下の変数が利用できます。



変数名 概要
passwordPolicyMessage コンフィグ > ログイン設定 > パスワードポリシーで設定したメッセージ

会員登録時に発行されるメールアドレス認証URLからアクセスしたときに表示される auth ステップでは以下のブロックが利用できます。このブロックにより、ユーザーに対して、メールアドレス認証が成功したかどうかの結果を表示できるようになります。



ブロック名 概要
enableAccount メールアドレス認証が成功した場合に表示されるブロックです。
badRequest メールアドレス認証のためのURLの形式が不正であるために、メールアドレス認証が失敗した場合に表示されるブロックです。
expired メールアドレス認証のためのURLの有効期限切れが原因で、メールアドレス認証が失敗した場合に表示されるブロックです。有効期限は コンフィグ > ログイン設定 > 会員登録機能の確認メールの有効時間で設定可能です。
notFound メールアドレス認証を行う対象となるユーザーが見つからなかったために、メールアドレス認証が失敗した場合に表示されるブロックです。既にメールアドレスが認証済みかユーザーが削除されている場合などに表示されます。

フォームの項目をカスタマイズする

会員サインアップ(会員登録)フォームの項目はカスタマイズすることが可能で、ユーザーの基本設定の項目から特定の項目とユーザーのカスタムフィールドを以下のように自由に設置することができます。

基本設定のフィールド(項目)を送信する場合は、 name 属性に user[] を、 value 属性に 送信したいフィールド(項目)名を指定した input タグを一緒に記述する必要があります。

<input type="text" name="name" value="{name}"  placeholder="山田 太郎" />
<input type="hidden" name="user[]" value="name" />

<!-- ↓カスタムフィールドも追加できます -->
<input type="text" name="company" value="{company}" />
<input type="hidden" name="field[]" value="company" />

フォームの項目として追加できるユーザーの基本設定項目は以下になります。



項目名 概要 入力例
name(必須) 登録するユーザーの名前です。 アップルップル
mail(必須) 登録するユーザーのメールアドレスです。 info@example.com
pass(必須) 登録するユーザーのパスワードです。「メール認証でのサインイン」が有効化されている場合は指定できません。 password
retype_pass(必須) 登録するユーザーのパスワード(確認用)です。「メール認証でのサインイン」が有効化されている場合は指定できません。 password
code 登録するユーザーのユーザーコードです。 ablogcms
url 登録するユーザーのURLです。 https://example.com
mail_magazine 登録するユーザーがメールマガジンを受信するかどうか(on | off)です。 off

以下はカスタマイズ例として、プライバシーポリシーのチェックボックスをカスタムフィールドとして設置しています。

<!-- BEGIN_MODULE Member_Signup -->
<form action="" method="post" class="acms-form" enctype="multipart/form-data">
  <ul>
    ... その他の項目
    <li class="form-group">
      <div class="form-label">
        <label class="acms-form-block acms-clear">プライバシーポリシーへの同意</label>
      </div>
      <label class="acms-form-checkbox form-checkbox-only" for="input-privacy-on" data-validator="privacy">
        <input type="checkbox" name="privacy[]" value="on" id="input-privacy-on" {privacy:checked#on}/>
        <i class="acms-ico-checkbox"></i>
        <span class="form-checkbox-only-label">
          <a href="%{BASE_URL}privacy.html" target="_blank">プライバシーポリシー</a>に同意する
        </span>
      </label>
      <input type="hidden" name="field[]" value="privacy"/>
      <input type="hidden" name="privacy:v#required" id="privacy-v-required"/>

      <p class="form-helper-text">※お客様の個人情報はお問い合わせへの対応のみに利用させていただきます。</p>

      <div role="alert" aria-live="assertive">
        <div data-validator-label="privacy-v-required" class="validator-result-{privacy:validator#required}">
          <p class="form-error-text"><span class="acms-icon acms-icon-news" aria-hidden="true"></span>プライバシーポリシーを確認し、同意いただけないとお問い合わせに応じることができません。</p>
        </div>
      </div>
    </li>
  </ul>

  <p class="form-message is-bold">プライバシーポリシーをご一読いただき、送信内容のご確認にお進みください。</p>

  <div class="form-button-group">
    <input type="hidden" name="step" value="confirm" />
    <button
      type="submit"
      name="ACMS_POST_Member_Signup_Confirm"
      class="button is-lg is-width-lg form-button"
    >
      内容を確認する
    </button>
  </div>
</form>
<!-- END_MODULE Member_Signup -->

ステップフォームのカスタマイズ

標準のフォームモジュールと同様に name 属性に step が指定されている input 要素の value 属性にステップ名を指定することで遷移先のステップを指定することができます。

以下のサンプルコードでは、遷移先のステップを confirm として指定しています。

<input type="hidden" name="step" value="confirm" />
<button
  type="submit"
  name="ACMS_POST_Member_Signup_Confirm"
  class="button is-lg is-width-lg form-button"
>
  内容を確認する
</button>

会員サインアップ(会員登録)フォームを送信する

Member_Signup_Confirm モジュールは、送信された値のバリデーションとステップ遷移をするためのPOSTモジュールです。また、Member_Signup_Submit モジュールはバリデーションとステップ遷移に加え、会員登録処理や認証メールの送信をするためのPOSTモジュールになります。

エラー時の表示

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

会員サインアップ(会員登録)フォームで何らかのエラーが起きた場合には以下のフィールド(項目)がバリデーションエラーとして表示されます。



フィールド(項目)名 オプション名 概要
name required ユーザーの名前が入力されていない場合に発生するエラー
mail required ユーザーのメールアドレスが入力されていない場合に発生するエラー
mail email ユーザーのメールアドレスの形式が間違っている場合に発生するエラー
mail doubleMail 入力されたメールアドレスで登録されたユーザーが既に存在する場合に発生するエラー
mail send 会員登録メールの送信に失敗した場合に発生するエラー
mail pseudoUserExists ユーザーのメールアドレスが仮登録ステータスのユーザーで利用されている場合に発生するエラー
pass required ユーザーのパスワードが入力されていない場合に発生するエラー
pass password ユーザーのパスワードがコンフィグで設定したパスワードポリシーに違反している場合に発生するエラー
retype_pass equalTo ユーザーのパスワード(確認用)が入力されたパスワードと一致しない場合に発生するエラー
code regex ユーザーコードが不正な形式である場合に発生するエラー
code doubleCode 入力されたコードで登録されたユーザーが既に存在する場合に発生するエラー
url url ユーザーのURLの形式が間違っている場合に発生するエラー
login isOperable コンフィグ > ログイン設定 > 会員登録機能のユーザー登録の外部申請が無効になっている場合に発生するエラー

自動返信メール

会員登録が成功した場合、登録ユーザー及び、管理者宛にメールが送信されます。登録ユーザーはメールに記載のURLからアカウントを有効化することができます。

会員登録時の自動返信メールはカスタマイズすることが可能です。メールテンプレートについては、コンフィグ > メール設定から変更することができます。


会員登録時の自動返信メールについての設定画面

会員登録時の自動返信メールについての設定画面

自動送信メールでは以下の変数が利用できます。



変数名 概要
uid 作成されたユーザーのユーザーIDです。
name 作成されたユーザーの名前です。
mail 作成されたユーザーのメールアドレスです。
code 作成されたユーザーのユーザーコードです。
url 作成されたユーザーのURLです。
subscribeUrl メールアドレスの有効性認証ための認証URLです。

上記の変数以外にもユーザーのカスタムフィールドとして登録したデータも自動返信メール内で変数として利用可能です。

メールアドレス認証なしで会員登録する

通常、会員登録は申請するとメールアドレス認証のためのURLが記載されたメールが届き、そのURLにアクセスすることで、メールアドレスの有効性が確認され、会員登録が完了します。

しかし、メールアドレス認証をせずに会員登録を完了させたい場面もあるかと思います。そのような場面に対応するため、コンフィグ > ログイン設定から会員登録機能から「メールアドレスの有効性確認」を無効にすることで、メールアドレス認証をせずに会員登録を完了できるようになります。


メールアドレス認証をしない設定を有効にする

メールアドレス認証をしない設定を有効にする

ログイン・会員機能の基本

この機能は Ver. 3.1 以上のバージョンから利用できます。


a-blog cms では、会員制サイトを作成するための会員機能が標準機能として搭載されています。SNSログインや2段階認証など、メールアドレス/ユーザーIDとパスワード以外でのログイン認証についても標準機能としてサポートされている他、パスワードポリシー設定などのセキュリティに関する設定も標準機能として提供されています。


また、管理者用のログインURLと会員用のログインURLを別々に設定できるため、セキュリティ的にも安全な会員制サイトを制作することができます。

主な機能としては以下のようなものがあげられます。

  • メールアドレスとパスワードによるサインイン認証
  • SNSアカウントによるサインイン認証
  • 2段階認証
  • メール認証サインイン機能
  • 会員サインアップ(会員登録)フォーム
  • メールアドレス認証機能
  • パスワードリセット機能
  • マイページ機能(プロフィール情報変更機能)
  • メールアドレス変更機能
  • パスワード変更機能
  • 退会機能
  • パスワードポリシー(パスワードのルール)の設定

公式テーマの一つである member テーマは、会員機能のカスタマイズ例として活用することができます。会員制サイトを制作する際は是非参考にしてください。

member テーマについてもっと知りたい方は memberテーマの使い方を御覧ください。


認証に関連するページとURLについて


管理者ログインページや、会員サインインページなど、認証に関連するページと、そのページがどのようなURLで表示されるかを説明します。



ページ 説明 デフォルトURL
管理ログインページ 管理ユーザーがログインするためのページです /login/
管理ユーザー用パスワード再設定ページ 管理ユーザーがパスワードを忘れた時、パスワードを再設定するページです /admin-reset-password/
管理ユーザー用パスワード再設定の認証ページ 管理ユーザーがパスワードを再設定するため、認証メールの送信を行うページです /admin-reset-password-auth/
管理ユーザー用2段階認証解除ページ 管理ユーザーがリカバリーコードにより、2段階認証を解除するページです /admin-tfa-recovery/
サインインページ 一般(会員ユーザー)がサインインするためのページです /signin/
会員登録ページ 一般(会員ユーザー)が会員登録するためのページです /signup/
一般(会員ユーザー)ユーザー用パスワード再設定ページ 一般(会員ユーザー)がパスワードを忘れた時、パスワードを再設定するページです /reset-password/
一般(会員ユーザー)ユーザー用パスワード再設定の認証ページ 一般(会員ユーザー)がパスワードを再設定するため、認証メールの送信を行うページです /reset-password-auth/
一般(会員ユーザー)ユーザー用2段階認証解除ページ 一般(会員ユーザー)ユーザーがリカバリーコードにより、2段階認証を解除するページです /tfa-recovery/
プロフィール更新ページ ログイン後、自身のプロフィールを変更するページです /mypage/update-profile/
メールアドレス変更ページ ログイン後、自身のメールアドレスを変更するページです /mypage/update-email/
パスワード変更ページ ログイン後、自身のパスワードを変更するページです /mypage/update-password/
2段階認証設定ページ ログイン後、2段階認証の設定を行うページです /mypage/update-tfa/
退会ページ 一般(会員ユーザー)が退会するページです /mypage/withdrawal/

以下のページはコンフィグの設定に関わらず、ページキャッシュ機能が無効になります。

  • プロフィール更新ページ
  • メールアドレス変更ページ
  • パスワード変更ページ
  • 2段階認証設定ページ
  • 退会ページ

認証に関連するページのURLを変更する


認証に関連するページのURLは config.server.php から変更することができます。



定数 説明 デフォルト値
LOGIN_SEGMENT 管理ログインページのパス login
ADMIN_RESET_PASSWORD_SEGMENT 管理ユーザー用パスワード再設定ページのパス admin-reset-password
ADMIN_RESET_PASSWORD_AUTH_SEGMENT 管理ユーザー用パスワード再設定の認証ページのパス admin-reset-password-auth
ADMIN_TFA_RECOVERY_SEGMENT 管理ユーザー用2段階認証解除ページのパス admin-tfa-recovery
SIGNIN_SEGMENT 一般サインインページのパス signin
SIGNUP_SEGMENT 会員登録ページのパス signup
RESET_PASSWORD_SEGMENT 一般ユーザー用パスワード再設定ページのパス reset-password
RESET_PASSWORD_AUTH_SEGMENT 一般ユーザー用パスワード再設定の認証ページのパス reset-password-auth
TFA_RECOVERY_SEGMENT 一般ユーザー用2段階認証解除ページのパス tfa-recovery
PROFILE_UPDATE_SEGMENT 自身のプロフィール変更ページのパス mypage/update-profile
PASSWORD_UPDATE_SEGMENT 自身のパスワード変更ページのパス mypage/update-password
EMAIL_UPDATE_SEGMENT 自身のメールアドレス変更ページのパス mypage/update-email
TFA_UPDATE_SEGMENT 自身の2段階認証設定ページのパス mypage/update-tfa
WITHDRAWAL_SEGMENT 自身の退会ページのパス mypage/withdrawal

config.server.php で設定した各ページのパスはグローバル変数として表示できます。

テンプレート上はグローバル変数でURLを表示することで、あとから設定を変更した場合でもテンプレートの修正が必要なくなり、変更に強いテンプレートを作成することができます。

グローバル変数


管理ユーザーと一般(会員ユーザー)について


管理ユーザーと一般(会員ユーザー)をどのように分けているかについて説明いたします。

管理ユーザーは一般サインイン画面からログインはできず、管理ログイン画面からのみログインできます。一般(会員ユーザー)は管理ログイン画面からログインできず、一般サインイン画面からのみログインできます。

デフォルトの分け方は以下のように、読者権限のユーザーのみが一般(会員ユーザー)として扱われます。



タイプ ユーザー権限
管理ユーザー 管理者・編集者・投稿者
一般(会員ユーザー) 読者

投稿者を一般(会員ユーザー)として扱いたいなど、管理ユーザーと一般(会員ユーザー)の権限を変更したい場合は、管理画面 > コンフィグ > ログイン設定 の「基本設定」から「一般サインイン権限」で設定を変更することができます。


一般サインイン権限を設定する

一般サインイン権限を設定する


認証に関連するテンプレート

管理ログインページや会員登録ページなど認証に関連するテンプレートについて説明します。

管理ユーザー向けのテンプレート

管理ユーザー向けのテンプレートについて説明します。管理ユーザー向けのテンプレートのため基本的にカスタマイズが必要になることはありません。



パス 説明
_member-admin/login.html 管理ログインするためのテンプレート
_member-admin/reset-password.html 管理ユーザーのパスワード再設定のためのテンプレート
_member-admin/reset-password-auth.html 管理ユーザーのパスワード再設定リンク先のテンプレート
_member-admin/tfa-recovery.html 管理ユーザーが2段階認証を解除するためのテンプレート

会員ユーザー向けのテンプレート

会員ユーザー向けのテンプレートについて説明します。会員制サイトを制作する場合にカスタマイズするテンプレートになります。



パス 説明
_member/signin.html 会員サインインするためのテンプレート
_member/signup.html 会員登録するためのテンプレート
_member/reset-password.html 会員のパスワード再設定するためのテンプレート
_member/reset-password-auth.html 会員のパスワード再設定リンク先のテンプレート
_member/tfa-recovery.html 会員が2段階認証を解除するためのテンプレート
_member/update-email.html ログイン後、メールアドレスを更新するためのテンプレート
_member/update-password.html ログイン後、パスワードを更新するためのテンプレート
_member/update-profile.html ログイン後、ユーザー情報を更新するためのテンプレート
_member/update-tfa.html ログイン後、2段階認証を設定・解除するためのテンプレート
_member/withdrawal.html 会員ユーザーが退会するためのテンプレート

テンプレートのパスを変更する

管理ユーザー向けのテンプレート及び、会員ユーザー向けのテンプレートは、config.system.yaml または、使用しているテーマ直下のtemplate.yaml から変更することができます。

tpl_login: _member-admin/login.html
tpl_admin-reset-password: _member-admin/reset-password.html
tpl_admin-reset-password-auth: _member-admin/reset-password-auth.html
tpl_admin-tfa-recovery: _member-admin/tfa-recovery.html
tpl_signin: _member/signin.html
tpl_signup: _member/signup.html
tpl_reset-password: _member/reset-password.html
tpl_reset-password-auth: _member/reset-password-auth.html
tpl_tfa-recovery: _member/tfa-recovery.html
tpl_update-profile: _member/update-profile.html
tpl_update-password: _member/update-password.html
tpl_update-email: _member/update-email.html
tpl_update-fta: _member/update-tfa.html
tpl_withdrawal: _member/withdrawal.html

シークレットステータスのブログ・カテゴリーにアクセスしたときに表示されるログインページ

シークレットカテゴリやシークレットブログに設定しているページにアクセスした場合、通常、ログインページが表示されます。

このとき、管理ログインページと一般サインインページのどちらを表示させたいかはサイトの仕様によるため、コンフィグから管理ログインページと一般サインインページのどちらを表示させるかを設定できるようになっています。

管理ページ > コンフィグ > ログイン設定の「ログインページの指定」で行います。


ログインページの指定の設定

ログインページの指定の設定


一般的には、会員サイトであればデフォルト値である「一般サインイン画面」を設定するのがおすすめです。

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

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

メール認証による会員サインイン

a-blog cms では、ユーザーにサインイン用のリンク及びコードを含むメールを送信し、サインインしてもらうことができます。この認証方法では、ユーザーのメールアドレスの検証も行います。

メール認証によるサインインでは、次のようなメリットがあります。

  • パスワードが必要がないため、サインアップ・サインインが簡単になります。
  • パスワードが再利用されるリスクが低くなります。パスワードを再利用すると、適切なパスワードを選択していても、セキュリティが低下する恐れがあります。
  • サインイン認証で、ユーザーがメールアドレスの正当な所有者であることを確認できます。
  • アクセス可能なメール アカウントがあればそれだけでサインインできます。SNSアカウントは必要ありません。
  • パスワードを入力(あるいは記憶)しなくても、安全にサインインできます。特に、パスワードの入力や記憶が面倒なモバイルデバイスでの利用が多い場合に有効です。

メール認証による会員サインインを有効化する

メール認証でユーザーをサインインさせるには、コンフィグ > ログイン設定のメール認証サインイン(管理ログイン)から「メール認証でのサインイン」を有効にして保存します。

また、メール認証サインインの有効時間を設定することも可能です。セキュリティのため出来るだけ短い時間を設定するのを推奨します。


メール認証サインインの設定

メール認証サインインの設定


サインインの流れ

メール認証によるサインインの流れを説明します。

1. サインイン画面にアクセス

サインイン画面にアクセスします。メール認証では、パスワード認証とは違いメールアドレスの入力欄のみが表示されます。


メール認証サインイン画面

メール認証サインイン画面

2. 登録されているメールアドレスを入力

サインインするアカウントのメールアドレスを入力して「確認メールを送信」ボタンを押すと、サインイン用のリンク及びコードを含むメールが送信されます。


認証メール送信後の画面

認証メール送信後の画面

3. 届いたメールにあるリンクにアクセスするか、確認コードをサインインフォームに入力する

届いたメールからサインイン用のリンクにアクセスするか、確認コードをサインインフォームに入力して「認証する」ボタンを押すことで、サインインができます。


認証メール

認証メール

ユーザーのメールアドレスに認証メールを送信する

メール認証によるサインインを実装するには、Member_Signin モジュールを利用してユーザーにメールアドレスの入力をさせるためのフォームを用意します。

以下の例では、{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>

そして、認証用リンクが記載されたメールの送信には Member_SigninWithEmail というPOSTモジュールを活用します。

Member_SigninWithEmail モジュールによって、認証メールの送信が成功すると、Member_Signin モジュールの verifyCode ブロックが表示されます。また、verifyCode ブロック内では、認証メールの送信成功時に successSent ブロックが表示されます。

<!-- BEGIN_MODULE Member_Signin -->
<!-- BEGIN verifyCode -->
<div>
  <!-- BEGIN successSent -->
  <p class="form-message">本人確認のため、確認メールをお送りしました。<br>メールに記載されている確認リンクをクリックするか、下記に確認コードを入力してください。</p>
  <!-- END successSent -->
</div>
<!-- END verifyCode -->
<!-- END_MODULE Member_Signin -->

送信できる項目

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

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

<input
  type="text"
  name="mail"
  value="{mail}"
  id="input-text-mail"
  placeholder=""
  autocomplete="username"
/>
<input type="hidden" name="login[]" value="mail" />


項目名 概要 入力例
mail サインインするユーザーのメールアドレスです。 info@example.com

エラー時の表示

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

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



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

認証メール

ユーザーは認証メールに記載されているURLへのアクセス及び、コードの入力によりサインインを完了するすることができます。この認証メールはカスタマイズすることが可能です。メールテンプレートについては、コンフィグ > メール設定から変更することができます。


コンフィグ > メール設定から認証メールのテンプレートを設定できます。

コンフィグ > メール設定から認証メールのテンプレートを設定できます。


認証メールでは以下の変数が利用できます。



変数名 概要
authUrl 認証用のURL
verifyCode 認証用の確認コード

認証メールに記載されているURLへアクセスして、メール認証サインインを完了する

認証メールに記載されているURLへアクセスすることで、メール認証サインインを完了してサインインすることができます。

メール認証が成功した場合は設定に従って適切なページにリダイレクトされますが、失敗した場合は、Member_Signin モジュールで以下のブロックが表示できます。



ブロック名 概要
badRequest 認証URLの形式が不正であるために、認証が失敗した場合に表示されるブロックです。
expired 認証URLが有効期限切れの場合に表示されるブロックです。

テンプレート上では、以下のように表示できます。

<!-- BEGIN_MODULE Member_Signin -->
    <!-- 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 -->
<!-- END_MODULE Member_Signin -->

認証メールに記載されている確認コードを入力して、メール認証サインインを完了する

認証メールに記載されている確認コードをサインインフォームに入力して送信することで、メール認証サインインを完了してサインインすることができます。

メール認証サインインを完了すると、設定に従って適切なページにリダイレクトされます。

認証メールに記載されている確認コードを利用するには、Member_Signin モジュールを利用してユーザーに確認コードの入力をさせるためのフォームを用意します。

認証メールの送信に成功すると、Member_Signin モジュールの verifyCode ブロックが表示されます。そのため、確認コードの入力フォームは verifyCode ブロック内にテンプレートを記述します。

<!-- BEGIN_MODULE Member_Signin -->
<!-- BEGIN verifyCode -->
<div>
  <!-- BEGIN successSent -->
  <p class="form-message">本人確認のため、確認メールをお送りしました。<br>メールに記載されている確認リンクをクリックするか、下記に確認コードを入力してください。</p>
  <!-- END successSent -->

  <div class="form-group-list is-narrow">
    <div class="form-group">
      <div class="validator-result-{mail:validator#lock} acms-alert acms-alert-danger">
        {trialNumber}回ログインに失敗したため、アカウントがロックされました。
        {lockTime}分後にもう一度試してください。
      </div>
      <div class="validator-result-{code:validator#auth} acms-alert acms-alert-danger">
        確認コードが違います
      </div>
      <div class="validator-result-{code:validator#request} acms-alert acms-alert-danger">
        不正なアクセスです
      </div>
      <div class="validator-result-{code:validator#expired} acms-alert acms-alert-danger">
        確認コードの有効期限が切れています
      </div>
    </div>
  </div>

  <ul class="form-group-list is-narrow">
    <li class="form-group">
      <div class="form-label">
        <label for="input-text-code" class="acms-form-block acms-clear">確認コード</label>
      </div>
      <input
        type="text"
        name="code"
        value="{code}"
        id="input-text-code"
        class="acms-form-large acms-form-block acms-form-width-full"
        placeholder=""
        data-validator="code"
      >
      <input type="hidden" name="login[]" value="code" />
      <input type="hidden" name="takeover" value="{signin:takeover}" />
    </li>
  </ul>
  <div class="form-button-group">
    <button
      type="submit"
      name="ACMS_POST_Member_SigninWithVerifyCode"
      class="button is-lg is-width-lg form-button"
    >
      サインイン
    </button>
  </div>
  <div class="form-button-group">
    <a href="%{BLOG_URL}%{SIGNIN_SEGMENT}/" class="button is-bordered is-lg is-width-lg form-button">サインイン画面に戻る</a>
  </div>
</div>
<!-- END verifyCode -->
<!-- END_MODULE Member_Signin -->

確認コードによる認証には、Member_SigninWithVerifyCode というPOSTモジュールを活用します。

送信できる項目

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

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

<div>
  <label for="input-text-code">確認コード</label>
</div>
<input
  type="text"
  name="code"
  value="{code}"
  id="input-text-code"
  placeholder=""
  data-validator="code"
>
<input type="hidden" name="login[]" value="code" />


項目名 概要 入力例
mail サインインするユーザーのメールアドレスです。 info@example.com
code 認証メールに記載されている確認コード 0MIJKI

SigninWithVerifyCode モジュールはユーザーのメールアドレスの情報を必要としますが、以下のように takeover の値を一緒に送信することで認証メール送信のために入力したメールアドレスの値を利用できるため、メールアドレスの入力は不要です。

<input type="hidden" name="takeover" value="{signin:takeover}" />

エラー時の表示

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

認証コード入力フォームで何らかのエラーが起きた場合には以下のフィールド(項目)がバリデーションエラーとして表示されます。



フィールド(項目)名 オプション名 概要
pass auth コンフィグ > アクセス設定 > ログイン制限で設定した制限に引っかかった場合及び、リファラーがサイトのドメインと違う場合に発生するエラー
code auth コード認証に失敗した場合に発生するエラー
code request 認証コードが不正な場合に発生するエラー
code expired 認証コードが有効期限切れの場合に発生するエラー
mail lock コンフィグ > ログイン設定 > アカウントロックで設定した、パスワード認証の再試行制限に引っかかった場合に発生するエラー
mail restriction ログイン拒否端末からログインした場合に発生するエラー