エブリサイトでは、ノーコードで作成したページのログイン処理を実現することができ、また接続設定にはサイトを閲覧しているユーザーがログインしている時のみ有効となるものが準備されています。
これらをうまく使うことで、作成したページから接続先への接続をセキュリティを高めながら実現する事ができるようになっています。
この記事では、ログイン処理を実現する例を交えながら、
エブリサイトで実現するログイン処理
ページ画面の接続設定における「設定なしで利用可」・「認証が必要／ユ－ザー指定なし」・「認証が必要／ユ－ザー指定あり」の使い分け
ページ画面の「ページ生成時処理」
についてご説明します。
この記事の処理をお試し頂くと、最終的に次のようなメールアドレスでのログイン、ログイン処理に伴うワンタイムパスワードメールの送信と多要素認証、認証後ページの表示に関する処理を実現できます。
・メールアドレスでのログイン処理
・ワンタイムパスワード入力での多要素認証ログイン
・ワンタイムパスワードメールの送信
エブリサイトで実現するログイン処理
まずは、エブリサイトでログイン処理を実現してみましょう。
ログイン処理を実現するために、この記事では
ログインページ
ログイン後に表示するページ
の2つのページを作成します。
ページから接続するためのkintoneアプリを作る
ログインページを実現するために、まずはログインできるユーザーを設定するためのkintoneアプリを１つ作成します。
アプリでは次のフィールドを設定します。
※フィールド名とフィールドコードは同じものを指定
アプリには有効でなおかつ、自身が利用しているメールアドレスを設定したレコードを１行以上登録しておいてください。
※カスタマインで作成したログイン処理でログインを実際に行うためには、メールアドレスに来たメールを確認できる必要があります
また、接続設定を行うためにAPIトークンが必要となるので、これも定義しておきましょう。アクセス権は「レコード閲覧」を指定しておいてください。
これで、kintone側の事前準備としては完了です。
エブリサイトで１つ目のページ(ログインページ)を作る
続いて、エブリサイトでのページ作成に移ります。
まずはログインページを作成します。
ページ一覧画面で、新しいページを追加します。
ページの作成
すると次のようなダイアログが表示されます。
入力項目のうち、「ページ設定名」と「ページのタイトル」は正式なものを入れておきます。
また、「URL」については何を入れても良いのですが、ログインページでおススメなのは「index」とする事です。
※URLにindexと入れたページはそのドメイン名でページを開いたときに、最初に表示されるページになるため
「追加する」をクリックすると、次のようなページ画面が開きます。
まずは画面デザインを設定しましょう。
画面デザインを設定する
今回のログイン画面のデザインはタイル１つで実現します。
まずは、「シンプルパネル」と書いてある箇所をクリックします。
すると、ウィジェット1のウィジェット編集画面が開きます。ウィジェットを変更するため、上部の「シンプルパネル」の箇所をクリックします。
すると次のように、ウィジェットを選択できます。
「フォーム」の「シンプル横フォーム」を選択して、「選択を決定する」をクリックしてください。
すると、次のような画面になります。
ログイン画面には
アイテム「メールアドレス入力」（メールアドレス入力欄として）
アイテム「ボタン(塗りつぶし) 」（ログインボタンとして）
が必要です。
これらを左から探して、中央下部の「アイテム」のエリアにドラッグアンドドロップします（一覧で探してもよいですし、上の「キーワードを検索」で絞り込んでも良いでしょう）。
※なお、ウィジェットやアイテム欄が赤くなっているのが、アイテムをドラッグアンドドロップすると黒色に変化しますが、これはウィジェットの設定にエラーがなくなった（※今回の場合は、アイテムの設定が必須であるエラー）事を意味します。
ドラッグアンドドロップすると、次の様な表示になります。
アイテムをウィジェットに設定した直後は、アイテムIDやアイテム名はitem1などの自動でついたIDや名前になるため、後に設定するページ内処理で何のアイテムかわかるよう、わかりやすい名前に変更しておきましょう。
IDや名前を変更するには、アイテムをクリックします。
すると、右にアイテムのパラメーター入力欄が表示され、名前や設定値を変更する事ができます。
また、アイテム「ボタン(塗りつぶし) 」 にはボタンのラベルを設定する箇所があるので、こちらも忘れずに設定しておきましょう(設定しないとボタンの中に文字が入らない形でのボタンとなります)。ボタンのラベルには「ログイン」とだけ入力します。
この記事の例では最終的に
アイテム「メールアドレス入力 」は「メールアドレス入力」に
アイテム「ボタン(塗りつぶし) 」 は「ログインボタン」に
設定しています。
ウィジェットの修正が終わったので、続いて接続設定を設定します。
上部の「画面デザインに戻る」でページ画面に戻っておきましょう。
接続設定を設定する
ここでは、kintoneで先ほど設定した顧客管理アプリに対して接続設定を設定します。
「接続設定タブ」をクリックし、「接続先を追加する」をクリックします。
接続先候補が出てきますので、「kintone」を選びます。
すると、kintoneの接続設定ダイアログが開きます。
接続設定ダイアログの各項目は次の要領で設定してください。
接続設定名：わかりやすい名前をつけてください。
認証可否：これはログインページであり、接続設定はログイン時に用いるものなので、あらゆる人から接続ができる必要があります。よって「認証なしで利用可」を設定します。
ドメイン：kintoneのドメインを指定します。
kintone アプリ：kintoneのアプリIDを指定します。
kintone アプリのAPIトークン：kintoneのアプリで設定したAPIトークンを指定します。
なお、認証可否について、何を選べばよいかについての考え方は、次の記事を併せて参考にしてください。
ページ生成時処理とページ内処理 ・ログイン・接続設定について
接続設定が完了したら、これでページ内処理を設定できる準備が整ったことになります。
次はページ内処理を設定しましょう。
ページ内処理を設定
ページ内処理タブを開き、「＋ アクションを追加」を4度クリックします。
そして、次のようにアクションを設定していきましょう。
ボタンを押されたらレコードを取得する
ログインボタンを押したら、レコードを取得します。
やること「クエリで条件を指定して kintone からレコードを取得する」、条件「ボタンを押した時」を使います。
やることのパラメーターは
取得元アプリ：kintoneのアプリIDを設定します。
kintone接続設定：先ほど設定した接続設定を選択します。
検索条件：画面に入力されたメールアドレスに対応するレコードを対象とします。そのため、次のように設定します。
メールアドレス = "${メールアドレス入力}"
最大取得件数：kintoneで「値の重複を禁止する」設定としており、1レコードしか存在しないはずなので、1にしておきます。
条件のパラメーターは、
ボタン：先ほど設定したボタンを選択します。
レコードが取得できた時は入力内容を使ってユーザーを認証する
ボタンを押してレコード取得後、レコードが取得できていればワンタイムパスワードを送信し、ユーザー認証用のワンタイムパスワード入力ダイアログを表示します。
やること「クエリで条件を指定して kintone からレコードを取得する」、条件「他のアクションの実行が完了した時」「文字列が条件を満たすならば」を使います。
やることのパラメーターは次のように設定してください。
kintone接続設定：先ほど設定した接続設定を選択します。
メールアドレス：
= メールアドレス入力
と指定します。なおダイアログから入力する事ができます。
ダイアログが表示されますので「アイテムの値」をクリックし、
出てきた一覧から対象となるアイテムを選択する事ができます。
式の書き方については、次のドキュメントも併せてご覧ください。
ワンタイムパスワード送信メールのタイトル：
次の例は一例です。望む形に変更して構いません。
ワンタイムパスワードをお伝えします
ワンタイムパスワード送信メールの本文：
次の例は一例です。望む形に変更して構いません。ただし「{{OTP}}」だけは必ず含めてください(※ここにワンタイムパスワードが挿入されます)。
サインインのリクエストを受け付けました。
以下のワンタイムパスワードでサインインしてください。
ワンタイムパスワード： {{OTP}}
パスワードの有効期限は ${format(fromnow(10, 'minutes'), 'YYYY-MM-DD HH:mm')} です。
有効期限を過ぎた場合は、はじめからやり直してください。
第三者による不正利用を防ぐため、このメールに心当たりのない場合は、速やかに破棄してください。
条件のパラメーターは
条件「他のアクションの実行が完了した時」の
アクション：1
条件「文字列が条件を満たすならば」の
比較する値(A)：${count($1)}
条件：等しくない
比較する値(B)：0
を設定します。
レコードが取得できなかった時は情報ダイアログを表示して終了する
ボタンを押してレコード取得後、レコードが取得できていなければ、情報ダイアログを表示して処理を終了します。
やること「情報ダイアログを表示する」、条件「他のアクションの実行が完了した時」「文字列が条件を満たすならば」を使います。
やることのパラメーターは
メッセージ：
ご入力いただいたメールアドレス(${メールアドレス})は、まだお申込みが完了していません。
条件のパラメーターは
条件「他のアクションの実行が完了した時」の
アクション：1
条件「文字列が条件を満たすならば」の
比較する値(A)：${count($1)}
条件：等しい
比較する値(B)：0
を設定します。
ユーザーの認証が完了したらページに遷移する
ユーザーが認証されていれば、次のページに遷移します。
やること「ページを遷移する」、条件「他のアクションの実行が完了した時」「ユーザーが認証済みならば」を使います。
やることのパラメーターは
遷移先URL:
mypage.html
※これは後述する、ログイン後に最初に表示されるページのURLを指定してください
条件のパラメーターは
アクション：2
を指定します。
また、条件「ユーザーが認証済みならば」を設定していないと、3番アクションのワンタイムパスワード入力の際にキャンセルなどを行ってもページが遷移してしまう動きとなりますので、必ず設定するようにしてください。
エブリサイトで２つ目のページ(ログイン後に最初に表示されるページ)を作る
続いて、ログイン後に表示するページを作成します。
こちらは要点のみ記載します。
ページのURLについて
ページのURLについては、１つ目のページ(ログインページ)のアクション４、やること「ページを遷移する」で設定した遷移先URLと同じURLを指定します。
※遷移先URLのパラメーターに「mypage.html」と指定した場合は、ページのURLに「mypage」と指定します
ページ内処理で最初に実行されるアクションについて
ページ内処理で最初に実行されるアクションは、次のアクションを指定するようにします。
これは、ログインしていないユーザーがこのページに対して直接アクセスした時に、ログインページへ強制的に遷移（移動）させるための処理となります。
やること「ページを遷移する」、条件「ページを表示した時」「ユーザーが未認証ならば」を使います。
やることのパラメーターは
遷移先URL:
index.html
※これは１つ目のページ(ログインページ)の設定と合わせています。
なお、条件「ユーザーが未認証ならば」は条件「ユーザーが認証済みならば」の条件を反転させると設定できます。
条件の反転については、条件の反転ボタンをクリックしてください。
すると、次のように反転された条件となります。
ここまでの設定が完了すれば、ログイン処理が実現できているはずです。
ぜひ、画面で動かしてみて下さい。
ただしフリープランやテスト実行の際は動かすのにすこしコツがあります。
フリープランでのページ公開や、テスト実行の際には、複数のページをまとめてテスト・公開しよう
フリープランでのページ公開やテスト実行の場合において、エブリサイトでページを公開やテスト実行したりする際には、その都度ドメインがランダムに切り替わります。
そのため、やること「ページを遷移する」などで相互に行き来するページを行き来しながら試したい場合は、対象となるページをすべて選択し、テスト実行や、ページ公開する必要があります。
実際にテスト公開を試した例は次のようになります。
「公開する」をクリックすると次のような公開中ダイアログが表示され
エブリサイトが公開処理に入ると次の表示に変わります。
「ページ公開ステータスを確認」をクリックすると、ページが公開されていればURLの一覧が表示されます（表示されない場合は、しばらく待ってから「更新する」をクリックしてください）。
公開されているページにindex.htmlが含まれている為、ドメインのリンクをクリックしても、index.htmlのリンクをクリックしても、次のようなログインページ(index.html)が表示されます。
ドメインのリンクをクリックした場合
index.htmlをクリックした場合
また、mypage.htmlをクリックした時は、mypage.html(ログイン後に最初に表示されるページ)が一瞬だけ表示されるのですが、すぐログインページが表示される動きとなります(表示される画面としては同一となるため、画面については割愛します)。
実際にログインの動きを試そう
実際にログイン処理の動きを試してみましょう。
メールアドレスを入力し、ログインボタンをクリックします。
すると、入力したメールアドレスに対しメールが送信され、画面は次のようなワンタイムパスワード入力画面になります。
次のようなメールが来ているはずなので、ワンタイムパスワードを画面に入力しましょう。
すると、ログイン後に最初に表示するページが表示されるはずです。
ぜひ、お試し下さい。
ログインした後に使える接続設定「認証が必要／ユ－ザー指定なし or あり」
ログインした後の状態（この記事では、２つ目のページ(ログイン後に最初に表示されるページ) すなわちmypage.htmlが表示された状態）では、
接続設定「設定なしで利用可」だけでなく、接続設定「認証が必要／ユ－ザー指定なし」や接続設定「認証が必要／ユ－ザー指定あり」が使えるようになっています。
それぞれの接続設定の利用の際のポイントを次に記載します。
接続設定「認証が必要／ユ－ザー指定なし」
これは、ログインした後にしか使えない接続設定であるという点以外は、接続設定「設定なしで利用可」と同じ動きになります。
接続設定「認証が必要／ユ－ザー指定あり」
これは、ログインした後にしか使えない接続設定であり、なおかつ接続設定の設定として取得できるレコードを絞り込む設定が行える接続設定です。
そのため、接続設定の「認証時に実行するクエリ」が必須項目になるのですが、
たとえばこの記事で作成した「ページから接続するためのkintoneアプリ」に対しての接続を例にすると、
メールアドレス = "{{email}}"
といった様に指定すると、ログインしたユーザーのレコードのみが取得できます。
このため、ログインしたユーザーにのみ紐つくレコードのみを取得でき、そうではないレコードは取得できないといった、情報統制において必要となるデータ取得時の絞り込みが確実に行えます。
ぜひ、お試し下さい。
おわりに
エブリサイトのドキュメントページやサポートページもぜひご活用ください。