会員制サンプルサイトの解説
本ページでは弊社がオープンソースで提供している会員制サンプルサイトを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') }}のような記述で、/src/locales に設定されたテキストを取得・表示します。 - 処理の完了・エラーの際の表示はVuetifyのSnackbar を利用しています。
- Snackbar は、/src/layouts/default.vue で記述し、各ページで発生したメッセージは/src/store/snackbar.jsを通して、default.vue に渡されます。
TOPページ(/)
対象ファイル
https://github.com/diverta/front_nuxt_auth/blob/main/src/pages/index.vue
動作の説明
<Login v-if="!$auth.loggedIn" />の記述により、未ログイン状態の場合は /src/components/Login.vue を表示します。/src/components/Login.vue でのログイン処理の際に
$axios.defaults.baseURLを書き換えることで、APIのリクエスト先変更しています。
これにより、フロントエンドを共通に、バックエンド(Kuroco管理画面)を各サイトキーで切り替える動作を実現します。ログイン状態の場合はナビゲーション、コンテンツリスト、お気に入りリストを表示します。
スライダー部分はVuetifyのv-carouselを利用しています。
コンテンツのグリッド表示はコンポーネント化されており、
<TopicsGrid :topics="topics" />で /src/components/topics/Grid.vue を呼び出し、表示しています。お気に入りのリスト表示はコンポーネント化されており、
<TopicsList :topics="favourite" />で /src/components/topics/List.vue を呼び出し、表示しています。
/topics_list
対象ファイル
https://github.com/diverta/front_nuxt_auth/blob/main/src/pages/topics_list.vue
動作の説明
- カテゴリの一覧とコンテンツの一覧を取得して表示します。
- コンテンツのグリッド表示はコンポーネント化されており、
<TopicsGrid :topics="topics" />で /src/components/topics/Grid.vue を呼び出し、表示しています。 - ページネーションはVuetifyのv-paginationを利用しています。
/topics_detail/{topics_id}
対象ファイル
https://github.com/diverta/front_nuxt_auth/blob/main/src/pages/topics_detail/_id.vue
動作の説明
- URLからコンテンツのIDを取得し、対応するKurocoのコンテンツを表示します。
- URLが/topics_detail/preview/ の場合はpreviewエンドポイントにリクエストを送り、公開前のコンテンツ情報を表示します。
- 星マークをクリックすると、/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/src/pages/favourite.vue
動作の説明
- アクセスすると、/rcms-api/1/favorite/list のエンドポイントでお気に入りされた
topics_idのリストを取得します。 - その後 /rcms-api/1/content/list のエンドポイントに
topics_idのリストをクエリパラメータで付与してリクエストを送り、お気に入りの一覧を取得しています。 - お気に入りのリスト表示はコンポーネント化されており、
<TopicsList :topics="favourite" />で /src/components/topics/List.vue を呼び出し、表示しています。 - ページネーションはVuetifyのv-paginationを利用しています。
/member
対象ファイル
https://github.com/diverta/front_nuxt_auth/blob/main/src/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/src/pages/member/detail/_id.vue
動作の説明
- /rcms-api/1/member/list のエンドポイントに、URLから取得したメンバーIDをクエリパラメータで付与してメンバー詳細の情報を表示しています。
/profile
対象ファイル
https://github.com/diverta/front_nuxt_auth/blob/main/src/pages/profile/index.vue
動作の説明
- /rcms-api/1/member/me のエンドポイントで取得した自身のprofile情報を表示します。
/profile/edit
対象ファイル
https://github.com/diverta/front_nuxt_auth/blob/main/src/pages/profile/edit/index.vue
動作の説明
- /rcms-api/1/member/me のエンドポイントで取得した自身のprofile情報を表示します。
- submitをクリックすると /rcms-api/1/member/update のエンドポイントに入力したデータをpostします。
- フォームの表示は FormulateForm を利用しています。
/inquiry
対象ファイル
対象ファイル：https://github.com/diverta/front_nuxt_auth/blob/main/src/pages/inquiry.vue
動作の説明
- /rcms-api/1/inquiry/1 のエンドポイントで取得したフォーム項目を表示します。
- フォームの表示はFormulateFormを利用しています。
- Submitをクリックすると、/rcms-api/1/inquiry/1 のエンドポイントにデータをPOSTします。
- 入力した内容はフォームID=1の回答に保存されます。
/signup
対象ファイル
対象ファイル：https://github.com/diverta/front_nuxt_auth/blob/main/src/pages/signup.vue
動作の説明
- フォームの表示はFormulateFormを利用しています。
- Submitをクリックすると、/rcms-api/1/member/register のエンドポイントにデータをPOSTし、会員登録が完了します。
- ここから登録したメンバーはUserのグループに所属します。
/reminder
対象ファイル
対象ファイル：https://github.com/diverta/front_nuxt_auth/blob/main/src/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/axios | https://axios.nuxtjs.org/ |
| nuxtjs/auth | https://auth.nuxtjs.org/ |
| nuxtjs/pwa | https://pwa.nuxtjs.org/ |
| nuxtjs/i18n | https://i18n.nuxtjs.org/ |
| Vuetify | https://vuetifyjs.com/getting-started/installation/ |
| VueFormulate | https://vueformulate.com/guide/ |
関連ドキュメント
各機能の実装方法については各チュートリアルを準備しています。
チュートリアルではシンプルなコードで機能の実装方法を紹介していますので是非ご確認ください。
サポート
お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。