エブリサイトでは、kintone のレコードを参照し、メールアドレスで認証を行うことが可能です。
認証された人のみ閲覧できるページや、認証された上でさらに特定のユーザーしか見えないページを作れます。
会員向けサイトを例に、認証機能を利用したページの作成例を紹介します。
今回はこちらの4ページ
を作成するうちの「ログインページ」についての作成例を紹介します。
画面デザイン
完成図
ログインページの完成図はこちらです。
画面デザインページ
ログインページの画面デザインページはこちらです。
接続設定
次に、接続設定を行います。
ログインページでは「認証なしで利用可」の接続設定を行います。
ログインページはインターネット上で誰でもアクセスできるページです。
そのため「認証可否」には「認証なしで利用可」を設定して接続設定を行います。
接続設定画面の操作・概要については次の記事を併せてご覧下さい。
また、「認証可否」の詳細については次の記事の「接続設定における4種類の接続可否とは」節を併せてご覧下さい。
ページ生成時処理とページ内処理 ・ログイン・接続設定について
認証
このページでは、「認証」についてご紹介します。
この機能を使用すると、認証された人のみ閲覧できるページや、認証された上でさらに特定のユーザーしか見えないページを作れます。
流れとしては、ログインページにてメールアドレスを入力して、そのメールアドレス宛に６桁のワンタイムパスワードを記載したメールが送信されます。
そのパスワードを以下の入力画面で入力することで認証を行うことが可能です。
使用するのは「ページ内処理」のやること「ユーザーを認証する」です。この「やること」の詳しい設定は後述します。
ページ内処理
画面デザインページでメールアドレスの入力フォームのためにウィジェット「シンプル縦フォーム」を使用していますが、設定したアイテムに「必須項目にする」にチェックを入れていても、エラーチェックはされないため、ページ内処理のやること「入力エラーをチェックする」で条件「ボタンを押した時」にエラーチェックをします。
1番でエラーチェックを行っておき、条件「入力アイテムにエラーがないならば」（条件「入力アイテムにエラーがあるならば」の反転）でエラーがない状態であれば、やること「クエリで条件を指定して kintone からレコードを取得する」で、入力されたメールアドレスを使用してkintoneアプリからレコードを取得します。
やること「ユーザーを認証する」を使用して、入力されたメールアドレスで認証手続きを行います。認証に成功すると、認証が必要な接続設定を用いたデータ取得ができるようになります。
条件「数値が条件を満たすならば」で「count関数」を使用し、２番アクションで取得したレコード件数を判定します。
メールアドレスが一致するレコードがあれば、このアクションを実行します。
やること「ページを遷移する」を条件「ユーザーが認証された時」であれば遷移します。ここではマイページ（在庫一覧）を遷移先に指定します。
「遷移先URL」には、公開したサイトの完全な URI（https://everysite.gusuku.io など）や同じサイト内のパス（mypage/index.html など）を設定します。
なお、「タブ」では「同じタブで開く」を選択します。「別タブで開く」を選択すると、開いた先のタブでは「ユーザーを認証する」での認証が維持できないためエラーとなります。
メールアドレスが一致するレコードがなければ、やること「情報ダイアログを表示する」で情報ダイアログを表示します。
「条件」は、条件「数値が条件を満たすならば」で「count関数」を使用して、２番アクションで取得したレコード件数を判定します。
なお、5番アクションでは、もしサイトへの攻撃者がアクセスしようとした際に一致しないレコードがあると、そのメールアドレスのユーザーの存在有無が知られてしまう、というリスクがあるため、一致するレコードがあるような挙動・見た目にする、という目的があります。
最後に
この記事ではこちらの4ページ
を作成するうちの、「ログインページ」についての作成例を紹介しました。
。
ぜひ他のページの作成例も参考にエブリサイトを活用してみてください。