エブリサイトでは、メールアドレスで認証を行い、認証された人のみが閲覧できる会員向けサイトを作成できます。

基本的な会員向けサイトでは、ユーザー1名ごとの会員ページになりますが、

この記事では、同じ会社に所属する複数のユーザーに共通の会員ページを表示する方法をご紹介します。


仕組みとしては、kintoneに組織マスタ(今回の例では「顧客組織」アプリ)を作成し、ユーザーを組織ごとにグループ化することで組織ごとの表示を実現します。


ユーザー1名ごとの会員向けサイトの作成手順については下記のページをご覧ください。

 エブリサイト図鑑 2-3 会員向けサイト(目次)

完成イメージ

kintoneアプリ「顧客ごとのお知らせ」アプリのレコードを会員専用ページに表示します。

会員ログインページ:


会員専用ページ:


会員専用ページのユーザーごとの表示の違い:

組織コード「C00001(田中マーケティングテクノロジー)」に所属する田中さんと粕田さんには同じお知らせが表示され、

組織コード「C00002(山田商事株式会社)」に所属する山田さんには別のお知らせが表示されます。


kintoneアプリの構成

kintoneには、エブリサイトにログインするユーザーを管理する「顧客ユーザー」アプリと、組織ごとに表示したいお知らせを管理する「顧客ごとのお知らせアプリ」を用意しました。


処理の中では直接使用しないアプリですが、両アプリともルックアップで下記のアプリの「顧客組織」アプリを参照しています。


エブリサイトのページ

ログインページ、会員専用ページを作成します。


ログインページと認証処理の作成方法の詳細は、下記のページをご確認ください。

 エブリサイト図鑑 2-3 会員向けサイト(目次)


ログインページ

ログインページは基本的に、ユーザーごとの会員ページを作成する場合と違いはありません。

ログインページのデザイン

ログインに使用する各アイテムは、4「シンプル縦フォーム」に設定しました。


ログイン用のメールアドレスは「メールアドレス入力」を使用し、アイテムID、アイテム名は「メールアドレス」と指定、必須入力にしています。

ボタンは「ボタン(塗りつぶし)」、アイテムIDとアイテム名、ラベルは「ワンタイムパスワードを送信」と指定しました。


ログインページの接続設定

ログインで使用するのはメールアドレスを管理している「顧客ユーザーアプリ」のみですので、「顧客ユーザーアプリ」の接続設定を作成します。

ログインページのページ内処理

「ワンタイムパスワードを送信」ボタンを押した時の処理です。


やること「クエリで条件を指定して kintone からレコードを取得する」でメールアドレスを条件にレコードを取得し、アイテム「メールアドレス」に入力されたメールアドレスが、kintoneの顧客ユーザーアプリに登録済みかどうかを確認します。


kintoneからレコードが取得されれば会員登録済みですので、以下は会員ページに遷移する処理です。


やること「ユーザーを認証する」でワンタイムパスワードを使用した認証が完了したら(条件「ユーザーが認証された時」)、やること「ページを遷移する」で会員専用ページに遷移します。


最後に、kintoneに該当するメールアドレスがなかった場合は、やること「情報ダイアログを表示する」でその旨表示します。


会員専用ページ

会員専用ページでは、ログインユーザーのメールアドレスを使用して顧客ユーザーアプリからレコードを取得し、そのレコードに含まれる「組織コード」フィールドの値を使用して『どの組織のお知らせを表示すべきか』を識別します。

会員専用ページのデザイン

組織名とお名前は 4「シンプル縦フォーム」、お知らせの内容は 6「シンプルテーブル」を使用します。


4「シンプル縦フォーム」については、

それぞれテキスト アイテムを使用し、アイテムIDとアイテム名にはそれぞれ、「組織名」「お名前」と指定しました。 

6「シンプルテーブル」は列になるアイテムに テキスト アイテムを指定し、アイテムIDとアイテム名にはそれぞれ、「掲載日」「お知らせの内容」と指定しました。 

会員専用ページの接続設定

接続設定は下記の接続設定名のものを2つ作成します。

  • 会員認証

    • 会員専用ページを表示したときに、やること「ユーザーを認証する」で認証されたメールアドレスをもとに、顧客が所属する組織の組織コードを取得するための接続設定です

    • 認証時に実行するクエリに「メールアドレス = ”{{email}}”」と指定することで、この接続設定を使用したときに、kintoneに送るクエリに やること「ユーザーを認証する」で認証済みのユーザーのメールアドレスを自動的に検索条件に追加できます

  • 顧客ごとのお知らせ取得

    • 組織コードをもとに、画面に表示するお知らせを取得するための接続設定

    • 認証は必要ですが、認証に使用されたメールアドレスは使用しないので、「認証が必要 / ユーザー指定なし」を選択します


「認証可否」の違いについての詳細は下記のページをご確認ください。

ページ生成時処理とページ内処理 ・ログイン・接続設定について



会員専用ページのページ内処理

会員専用ページを表示した時(条件「ページを表示した時」)の処理です。


ユーザーがログインしていない場合(条件「ユーザーが認証済みならば」を反転した「ユーザーが未認証ならば」)は、やること「ページを遷移する」でログインページに遷移します。


ユーザーが認証済みであれば、やること「クエリで条件を指定して kintone からレコードを取得する」で、顧客ユーザーアプリからレコードを取得します。

「kintone 接続設定」で、「会員認証」の接続設定を指定することで、このアクションで実行するクエリにはログインユーザーのメールアドレスが自動的に設定されます。

そのため、検索条件としては組織コードが未入力ではない、のようなクエリを指定することで、下記のようなクエリがkintoneには送られます。


メールアドレス = “ログイン時に指定したメールアドレス” and 組織コード != “”



アクション2でレコードが取得されたら、やること「表示アイテムの内容をセットする」で取得した顧客ユーザーアプリのレコードのフィールドの値を表示します。


ログインユーザーが所属する組織のお知らせを顧客ごとのお知らせアプリから取得します。

顧客ユーザーアプリに、ユーザーの所属組織をルックアップフィールド「組織コード」で保持していますので、アクション2で取得した顧客ユーザーアプリの「組織コード」フィールドの値を検索条件に指定し、お知らせアプリのレコードを取得します。


最後に、やること「テーブルの表示内容をセットする」で、アクション6で取得したレコードをテーブルウィジェットにセットします。


このように指定することで、組織に所属する複数のユーザーの会員用ページに、会社ごとに共通の情報を表示できます。


以上が、同じ会社に所属する複数のユーザーに共通の会員ページを表示する例でした。

お手元でもぜひお試しください!


エブリサイトのドキュメントページサポートページもぜひご活用ください。