会員制サンプルサイトの解説

本ページでは弊社がオープンソースで提供している会員制サンプルサイトをKuroco構築時のテンプレートとして利用している方向けに、サンプルサイトの構造や仕様について解説します。

リポジトリ：https://github.com/diverta/front_nuxt_auth
デモサイト：https://dev-nuxt-auth.g.kuroco-front.app/

利用しているAPIについて

会員制サンプルサイトに設定しているAPIについて解説します。
ここでは各エンドポイントが果たす役割について解説しますので、具体的にどのようなパラメータが設定されているかは、フリートライアルから作成した自身のサイトをご確認ください。

認証

パス	モデル::オペレーション	説明
`/rcms-api/1/login`	Login::login_challenge	ログインに使用します。こちらのエンドポイントに`email`, `password`をPOSTするとログイン処理が行われます。
`/rcms-api/1/logout`	Login::logout	ログアウトに使用します。こちらのエンドポイントにリクエストを送るとログアウト処理が行われます。
`/rcms-api/1/profile`	Login::profile	ログイン状態でリクエストを送ると、`name1`, `name2`の情報を返します。ログイン有無の確認に使用します。
`/rcms-api/1/reminder`	Login::reminder	パスワードリセットの機能に使用します。 emailをPOSTすると、パスワードリマインダーメールが送付され、仮パスワードとトークンが発行されます。 token, temp_pwd, login_pwd をPOSTするとパスワードが更新されます。
`/rcms-api/1/reset_password`	Login::reset_password	login_id, current_password, new_password をPOSTするとパスワードの更新ができるエンドポイントですが、会員制サンプルサイトのフロントでは使用していません。

コンテンツ

パス	モデル::オペレーション	説明
`/rcms-api/1/content/list`	Topics::list	コンテンツ定義ID=1のリストを取得するAPIです。クエリパラメータにカウント数やtopics_idを指定することで任意のデータを取り出します。
`/rcms-api/1/content/details/{topics_id}`	Topics::details	コンテンツの詳細を取得するAPIです。
`/rcms-api/1/content/category`	TopicsCategory::list	コンテンツ定義ID=1に登録されたカテゴリの一覧を取得するAPIです。
`/rcms-api/1/content/preview`	Topics::preview	コンテンツの保存前にプレビューを確認するためのAPIです。
`/rcms-api/1/content/update/{topics_id}`	Topics::update	コンテンツの更新をするAPIです。会員制サンプルサイトのフロントエンドでは使用していません。

メンバー

パス	モデル::オペレーション	説明
`/rcms-api/1/member/{member_id}`	Member::details	メンバー情報の詳細を取得するAPIです。取得できるメンバー情報はグループID=104(user)のものに限定され、ID=104(user)からのリクエストは制限されています。会員制サンプルサイトのフロントエンドではlistのAPIで代用しているため使用していません。
`/rcms-api/1/member/list`	Member::list	グループID=104(user)のメンバー一覧を取得するAPIです。取得する件数は1000件までとなっており、ID=104(user)からのリクエストは制限されています。
`/rcms-api/1/member/update`	Member::update	メンバー情報を更新するAPIです。自身の情報のみ更新できるように制限されています。
`/rcms-api/1/member/register`	Member::insert	メンバーの追加を行うAPIです。こちらのAPIで追加されたメンバーはグループID=104(user)のグループに所属した状態で登録されます。
`/rcms-api/1/member/settings`	MemberForm::details	登録できるメンバー情報の構造をレスポンスします。会員制サンプルサイトのフロントエンドでは使用していません。
`/rcms-api/1/member/me`	Member::details	自身のメンバー情報の詳細を取得するAPIです。自分以外のメンバー情報は取得できないように制限されています。

お気に入り

パス	モデル::オペレーション	説明
`/rcms-api/1/favorite/list`	Favorite::list	お気に入りのリストを取得するAPIです。 `module_id`, `module_type`をクエリパラメータに設定してリクエストを送ることで、対象メンバーがお気に入りにしたコンテンツを取得します。
`/rcms-api/1/favorite/register`	Favorite::insert	お気に入りを追加するAPIです。 `module_id`, `module_type`をPOSTすると[アクティビティ]->[お気に入り]にお気に入りが追加されます。
`/rcms-api/1/favorite/delete`	Favorite::delete	お気に入りを削除するAPIです。 `module_id`, `module_type`をPOSTすると[アクティビティ]->[お気に入り]からお気に入りが削除されます。

フォーム

パス	モデル::オペレーション	説明
`/rcms-api/1/inquiry/{inquiry_id}`	InquiryForm::details	フォームの詳細を取得するAPIです。フォームの項目表示に使用します。
`/rcms-api/1/inquiry/1`	InquiryMessage::send	フォームの回答を送付するAPIです。フォームの入力項目をPOSTすると[キャンペーン]->[フォーム]のフォームID=1に回答が追加されます。

ファイル

パス	モデル::オペレーション	説明
`/rcms-api/1/upload`	Files::upload	ファイルをアップロードし、Kurocoの一時領域にファイルを格納するAPIです。フォームからファイルをアップロードする際に使用します。

フロントエンドと動作の仕様について

全般

i18nで多言語対応しているため、テキストは{{ $t('top.latest_articles') }}のような記述で、/locales に設定されたテキストを取得・表示します。
処理の完了・エラーの際の表示はnuxt-snackbarのプラグインを利用しています。

TOPページ(/)

対象ファイル

https://github.com/diverta/front_nuxt_auth/blob/main/pages/index.vue

動作の説明

<Login v-if="!authUser.member_id" />の記述により、未ログイン状態の場合は /components/Login.vue を表示します。
/components/Login.vue でのログイン処理の際にsetSitekey()で、APIのリクエスト先変更しています。
これにより、フロントエンドを共通に、バックエンド(Kuroco管理画面)を各サイトキーで切り替える動作を実現します。
ログイン状態の場合はナビゲーション、コンテンツリスト、お気に入りリストを表示します。
スライダー部分はVuetifyのv-carouselを利用しています。
コンテンツのグリッド表示はコンポーネント化されており、<TopicsGrid :topics="topicsList" />で /components/topics/Grid.vue を呼び出し、表示しています。
お気に入りのリスト表示はコンポーネント化されており、<TopicsList :topics="favouriteList" />で /components/topics/List.vue を呼び出し、表示しています。

/topics_list

対象ファイル

https://github.com/diverta/front_nuxt_auth/blob/main/pages/topics_list.vue

動作の説明

カテゴリの一覧とコンテンツの一覧を取得して表示します。
コンテンツのグリッド表示はコンポーネント化されており、<TopicsGrid :topics="topics" />で /components/topics/Grid.vue を呼び出し、表示しています。
ページネーションはVuetifyのv-paginationを利用しています。

/topics_detail/{topics_id}

対象ファイル

https://github.com/diverta/front_nuxt_auth/blob/main/pages/topics_detail/[slug].vue

動作の説明

URLからコンテンツのIDを取得し、対応するKurocoのコンテンツを表示します。
星マークをクリックすると、/rcms-api/1/favorite/register のエンドポイントにmodule_id をpostし、お気に入り登録をします。
お気に利登録済みのコンテンツで星マークをクリックすると、/rcms-api/1/favorite/delete のエンドポイントにmodule_id をpostし、お気に入り登録を削除します。

/favourite

対象ファイル

https://github.com/diverta/front_nuxt_auth/blob/main/pages/favourite.vue

動作の説明

アクセスすると、/rcms-api/1/favorite/list のエンドポイントでお気に入りされたtopics_idのリストを取得します。
その後 /rcms-api/1/content/list のエンドポイントにtopics_idのリストをクエリパラメータで付与してリクエストを送り、お気に入りの一覧を取得しています。
お気に入りのリスト表示はコンポーネント化されており、<TopicsList :topics="topics" />で /components/topics/List.vue を呼び出し、表示しています。
フロントエンドのテーブルとページネーションは、Vuetifyのv-data-tableを利用しています。

/member

対象ファイル

https://github.com/diverta/front_nuxt_auth/blob/main/pages/member/index.vue

動作の説明

/rcms-api/1/member/list のエンドポイントで、メンバーのリストを取得して表示しています。
表示されるメンバーはUserのグループに所属するメンバーのみです。
メンバーの一覧を表示できるのはAdministratorもしくはEditorのメンバーのみです。
フロントから登録したメンバー(User)では表示できません。
画面上部にある絞込みの動作はVuetifyのv-autocompleteを使用して、フロントエンド側で対応しています。
ページネーションはVuetifyのv-paginationを利用しています。

/member/detail/{member_id}

対象ファイル

https://github.com/diverta/front_nuxt_auth/tree/main/pages/member/detail/[slug].vue

動作の説明

/rcms-api/1/member/list のエンドポイントに、URLから取得したメンバーIDをクエリパラメータで付与してメンバー詳細の情報を表示しています。

/profile

対象ファイル

https://github.com/diverta/front_nuxt_auth/blob/main/pages/profile/index.vue

動作の説明

/rcms-api/1/member/me のエンドポイントで取得した自身のprofile情報を表示します。

/profile/edit

対象ファイル

https://github.com/diverta/front_nuxt_auth/blob/main/pages/profile/edit/index.vue

動作の説明

/rcms-api/1/member/me のエンドポイントで取得した自身のprofile情報を表示します。
submitをクリックすると /rcms-api/1/member/update のエンドポイントに入力したデータをpostします。
フォームの表示は Formkit を利用しています。

/inquiry

対象ファイル

対象ファイル：https://github.com/diverta/front_nuxt_auth/blob/main/pages/inquiry.vue

動作の説明

/rcms-api/1/inquiry/1 のエンドポイントで取得したフォーム項目を表示します。
フォームの表示はFormkitを利用しています。
Submitをクリックすると、/rcms-api/1/inquiry/1 のエンドポイントにデータをPOSTします。
入力した内容はフォームID=1の回答に保存されます。

対象ファイル

対象ファイル：https://github.com/diverta/front_nuxt_auth/blob/main/pages/signup.vue

動作の説明

フォームの表示はFormkitを利用しています。
Submitをクリックすると、/rcms-api/1/member/register のエンドポイントにデータをPOSTし、会員登録が完了します。
ここから登録したメンバーはUserのグループに所属します。

/reminder

対象ファイル

対象ファイル：https://github.com/diverta/front_nuxt_auth/blob/main/pages/reminder.vue

動作の説明

Reset my passwordをクリックすると、/rcms-api/1/reminder にemailをpostし、パスワードリセットのメールを送付します。
パスワードリセットのメールにはlogin/reset_passwordのメールひな形が使用され、reminderのAPIが発行したトークン情報を含みます。
reminderのAPIが発行したトークン情報をクエリパラメータにセットした状態でアクセスすると、仮パスワードと新パスワードの入力欄を表示します。
SUBMITをクリックすると /rcms-api/1/reminder のエンドポイントにlogin_pwd、temp_pwd、tokenをpostし、パスワードの更新が完了します。

利用しているプラグインについて

会員制サンプルサイトでは、いくつかのプラグインを使用して、フロントエンドの構築をしてます。
主に使用しているプラグインを以下に紹介しますので、プラグイン部分の記述や仕様については各ドキュメントを参照してください。

プラグイン名	公式ドキュメント
nuxtjs/i18n	https://i18n.nuxtjs.org/
Vuetify	https://vuetifyjs.com/getting-started/installation/
Formkit	https://formkit.com/
Nuxt Snackbar	https://nuxt.com/modules/snackbar

サポート

お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。

フォームから問い合わせをする

Slackコミュニティに参加する

利用しているAPIについて​

認証​

コンテンツ​

メンバー​

お気に入り​

フォーム​

ファイル​

フロントエンドと動作の仕様について​

全般​

TOPページ(/)​

対象ファイル​

動作の説明​

/topics_list​

対象ファイル​

動作の説明​

/topics_detail/{topics_id}​

対象ファイル​

動作の説明​

/favourite​

対象ファイル​

動作の説明​

/member​

対象ファイル​

動作の説明​

/member/detail/{member_id}​

対象ファイル​

動作の説明​

/profile​

対象ファイル​

動作の説明​

/profile/edit​

対象ファイル​

動作の説明​

/inquiry​

対象ファイル​

動作の説明​

/signup​

対象ファイル​

動作の説明​

/reminder​

対象ファイル​

動作の説明​

利用しているプラグインについて​

関連ドキュメント​

サポート

利用しているAPIについて

認証

コンテンツ

メンバー

お気に入り

フォーム

ファイル

フロントエンドと動作の仕様について

全般

TOPページ(/)

対象ファイル

動作の説明

/topics_list

対象ファイル

動作の説明

/topics_detail/{topics_id}

対象ファイル

動作の説明

/favourite

対象ファイル

動作の説明

/member

対象ファイル

動作の説明

/member/detail/{member_id}

対象ファイル

動作の説明

/profile

対象ファイル

動作の説明

/profile/edit

対象ファイル

動作の説明

/inquiry

対象ファイル

動作の説明

/signup

対象ファイル

動作の説明

/reminder

対象ファイル

動作の説明

利用しているプラグインについて

関連ドキュメント