KurocoとNuxt.jsで、新規会員登録画面を構築する

Kurocoを利用したNuxt.jsプロジェクトで、新規会員登録画面の作成方法を紹介します。

前提条件

Nuxt.jsプロジェクトの作成について

このページは、KurocoとNuxt.jsでのプロジェクトが構築済みであることを前提としています。
まだNuxt.jsプロジェクトを構築していない場合、チュートリアル ->KurocoとNuxt.jsで、コンテンツ一覧ページを作成するを参照し、構築をお願いします。

APIセキュリティについて

Kurocoでは、APIのセキュリティ方法がいくつか用意されています。

Image (fetched from Gyazo)

新規会員登録は、APIのセキュリティ設定が「動的アクセストークン」または「Cookie」のみで動作します。そのため、APIセキュリティは「動的アクセストークン」もしくは「Cookie」にしてください。

セキュリティの種類については、管理画面マニュアル -> API Securityを参照してください。

セキュリティの種類の詳細な確認方法は、Swagger UIを利用して、APIのセキュリティを確認するをご確認ください。

推奨ブラウザについて

本チュートリアルは、動作確認のためGoogle Chromeの開発者ツールを利用しています。 そのため、ブラウザはGoogle Chromeを推奨いたします。

ダミーの新規会員登録フォーム実装

それでは新規会員登録フォームを実装していきます。
まずはAPIとの連携は省いた状態で、ダミーでの新規会員登録連携処理を実装します。

登録フォームの作成

新規会員登録画面用フォームを作成します。

pages/login/signup/index.vue ファイルを新規作成し、下記コードを記載してください。

pages/login/signup/index.vue
<template>
    <div>
        <div v-if="!signupDone">
            <form @submit.prevent="signup">
                <div>
                    <label>prop1</label>
                    <input v-model="user.prop1" name="prop1" type="" placeholder="prop1">
                </div>
                <div>
                    <label>prop2</label>
                    <input v-model="user.prop2" name="prop2" type="" placeholder="prop2">
                </div>

                <div>
                    <button type="submit">
                        サインアップ
                    </button>
                </div>
            </form>
        </div>
        <div v-if="signupDone">
            新規登録が完了しました。
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            signupDone: false,

            user: {}
        }
    },
    methods: {
        signup () {
            console.log(JSON.stringify(this.user, null, '\t'))
            this.signupDone = true
        }
    }
}
</script>

<style scoped>
form > div {
    margin: 8px;
    display: flex;
    flex-direction: row;
}
form > div > * {
    display: flex;
    flex-direction: row;
    flex-basis: 100px;
}
form > div > *:nth-child(1) {
    flex: 0 0 100px;
    padding-right: 8px;
}
form > div > *:nth-child(2) {
    min-width: 0;
    flex: 1 100 auto;
}
</style>

ファイル保存後npm run devを実行し、http://localhost:3000/login/signup/にアクセスします。
簡単な新規会員登録フォームが表示されるので、Chromeの開発者ツール:コンソールを開いた状態で、下記入力し[サインアップ]をクリックします。

  • prop1:text1
  • prop2:text2

すると、入力したprop1とprop2がログとしてコンソールに表示されます。 fetched from Gyazo

このログに出力する値を新規会員登録用APIに実際にリクエストすることになります。

登録処理の実装

ひとまずAPI連携部分は仮の実装とし、下記を実装するようにします。

  • 1秒間のリクエストをする、見せかけのダミー処理を追加作成
  • リクエストに成功した場合、画面上で「新規登録が完了しました。」と表示

pages/login/signup/index.vueを修正します。

pages/login/signup/index.vue
diff --git pages/login/signup/index.vue pages/login/signup/index.vue
index 2c93b73..c9aca24 100644
--- pages/login/signup/index.vue
+++ pages/login/signup/index.vue
@@ -1,64 +1,83 @@
 <template>
     <div>
         <div v-if="!signupDone">
             <form @submit.prevent="signup">
+                <p v-if="error" :style="{ color: 'red' }">
+                    {{ error }}
+                </p>
+
                 <div>
                     <label>prop1</label>
                     <input v-model="user.prop1" name="prop1" type="" placeholder="prop1">
                 </div>
                 <div>
                     <label>prop2</label>
                     <input v-model="user.prop2" name="prop2" type="" placeholder="prop2">
                 </div>
 
                 <div>
                     <button type="submit">
                         サインアップ
                     </button>
                 </div>
             </form>
         </div>
         <div v-if="signupDone">
             新規登録が完了しました。
         </div>
     </div>
 </template>
 
 <script>
 export default {
     data () {
         return {
             signupDone: false,
 
-            user: {}
+            user: {},
+            error: null
         }
     },
     methods: {
-        signup () {
-            console.log(JSON.stringify(this.user, null, '\t'))
-            this.signupDone = true
+        async signup () {
+            // ダミーリクエスト(1秒待機の後成功/失敗する)
+            const shouldSuccess = true
+            const request = new Promise((resolve, reject) =>
+                setTimeout(
+                    () => (shouldSuccess ? resolve() : reject(Error('login failure'))),
+                    1000
+                )
+            )
+
+            try {
+                await request
+                this.signupDone = true
+            } catch (e) {
+                console.error(e)
+                this.error = 'エラーが発生しました。'
+            }
         }
     }
 }
 </script>
 
 <style scoped>
 form > div {
     margin: 8px;
     display: flex;
     flex-direction: row;
 }
 form > div > * {
     display: flex;
     flex-direction: row;
     flex-basis: 100px;
 }
 form > div > *:nth-child(1) {
     flex: 0 0 100px;
     padding-right: 8px;
 }
 form > div > *:nth-child(2) {
     min-width: 0;
     flex: 1 100 auto;
 }
 </style>

ブラウザでサインアップすると、1秒の待機の後「新規会員登録が完了しました」と表示されます。

fetched from Gyazo

エラー処理の実装

次に、登録が失敗した場合の動作を確認します。

pages/login/signup/index.vue ファイルのshouldSuccess = trueshouldSuccess = falseへ変更します。

pages/login/signup/index.vue
diff --git pages/login/signup/index.vue pages/login/signup/index.vue
- const shouldSuccess = true
+ const shouldSuccess = false

ブラウザでサインアップすると、「エラーが発生しました」と表示されます。

fetched from Gyazo

確認後は、shouldSuccess = trueへ戻してください。

以上でダミーのフォームが完成です。

新規会員登録用エンドポイント作成と確認

次に新規会員登録をするためのAPIエンドポイントを作成します。

エンドポイントの作成

Kurocoの管理画面のエンドポイント一覧より[Configure Endpoint]をクリックします。

Image (fetched from Gyazo)

下記エンドポイントを作成します。

Image (fetched from Gyazo)

設定項目設定
パスmember/regist
有効/無効有効
モデルカテゴリーメンバー
モデルMember:v1
オペレーションinsert
認証None
Parametersdefault_group_id適用するメンバーグループのIDを入力してください。
グループIDはグループより確認できます。
login_ok_flg1

新規会員登録用エンドポイントのスキーマ確認

作成したエンドポイントのスキーマを確認します。

エンドポイント一覧画面より、「Swagger UI」をクリックします。

Image (fetched from Gyazo)

SwaggerUI画面から、先ほど作成したエンドポイントをクリックします。

Image (fetched from Gyazo)

「Request Body」の「Schema」を選択すると、このエンドポイントへ渡せるデータのスキーマが表示されます。

Image (fetched from Gyazo)

フロントエンドから新規会員登録のデータをPOSTリクエストする際には、記載されているスキーマに沿って設定したい項目をリクエストのボディに適用してリクエストを送信します。

以上でエンドポイントの作成完了です。

新規会員登録フォーム実装

それでは新規会員登録フォームを作成します。

今回は例として、下記項目をリクエスト送信対象にします。

  • 姓:name1
  • 名:name2
  • メールアドレス:email
  • ログインパスワード:login_pwd

ファイルの修正

先ほど作成した、新規会員登録フォーム(/pages/login/signup/index.vue)を修正します。

/pages/login/signup/index.vue
diff --git a/pages/login/signup/index.vue b/pages/login/signup/index.vue
index c9aca24..f2bee20 100644
--- a/pages/login/signup/index.vue
+++ b/pages/login/signup/index.vue
@@ -7,12 +7,20 @@
                 </p>
 
                 <div>
-                    <label>prop1</label>
-                    <input v-model="user.prop1" name="prop1" type="" placeholder="prop1">
+                    <label>name1</label>
+                    <input v-model="user.name1" name="name1" type="text" placeholder="name1">
                 </div>
                 <div>
-                    <label>prop2</label>
-                    <input v-model="user.prop2" name="prop2" type="" placeholder="prop2">
+                    <label>name2</label>
+                    <input v-model="user.name2" name="name2" type="text" placeholder="name2">
+                </div>
+                <div>
+                    <label>email</label>
+                    <input v-model="user.email" name="email" type="email" placeholder="email">
+                </div>
+                <div>
+                    <label>login_pwd</label>
+                    <input v-model="user.login_pwd" name="login_pwd" type="password" placeholder="login_pwd">
                 </div>
 
                 <div>

フィールドが修正されているのを確認します。

Image (fetched from Gyazo)

APIへのリクエスト/ハンドリング実装

次に、APIへのリクエストを実装します。

ここからは、APIのセキュリティの設定によって対応する内容が異なります。 ご自身のセキュリティ設定をご確認いただき、下記より該当するセキュリティ内容に沿って進んでください。

セキュリティ設定がCookieの場合

下記のように新規会員登録フォームを修正してください。

diff --git a/pages/login/signup/index.vue b/pages/login/signup/index.vue
index f2bee20..da12179 100644
--- a/pages/login/signup/index.vue
+++ b/pages/login/signup/index.vue
@@ -48,17 +48,13 @@ export default {
     },
     methods: {
         async signup () {
-            // ダミーリクエスト(1秒待機の後成功/失敗する)
-            const shouldSuccess = true
-            const request = new Promise((resolve, reject) =>
-                setTimeout(
-                    () => (shouldSuccess ? resolve() : reject(Error('login failure'))),
-                    1000
+            try {
+                // 新規会員登録のリクエスト
+                await this.$axios.$post(
+                    process.env.BASE_URL + '/rcms-api/1/member/regist',
+                    { ...this.user } // フォームの内容をリクエストボディとして適用
                 )
-            )
 
-            try {
-                await request
                 this.signupDone = true
             } catch (e) {
                 console.error(e)

「/rcms-api/1/member/regist」の「1」には、ご自身のAPIのidを記入してください。
APIのidは、エンドポイント一覧画面より確認できます。 Image (fetched from Gyazo)

実際に新規会員登録をします。

fetched from Gyazo

会員が登録されているか確認します。
管理画面から[キャンペーン] -> [メンバー]をクリックします。

Image (fetched from Gyazo)

メンバー一覧画面を開き、実際に会員が登録されているかを確認してください。

Image (fetched from Gyazo)

セキュリティ設定が動的アクセストークンの場合

動的アクセストークンにてセキュアなエンドポイントへアクセスするには、トークン値をリクエストヘッダに送信する必要があります。
今回のようなケース(AnonymousUserによるリクエスト)においても同様です。

従って、新規会員登録用エンドポイントへのリクエストには、事前に取得したAnonymousTokenをカスタムヘッダに適用する必要があります。

下記のように新規会員登録フォームを修正してください。

diff --git a/pages/login/signup/index.vue b/pages/login/signup/index.vue
index f2bee20..68670bc 100644
--- a/pages/login/signup/index.vue
+++ b/pages/login/signup/index.vue
@@ -48,17 +48,28 @@ export default {
     },
     methods: {
         async signup () {
-            // ダミーリクエスト(1秒待機の後成功/失敗する)
-            const shouldSuccess = true
-            const request = new Promise((resolve, reject) =>
-                setTimeout(
-                    () => (shouldSuccess ? resolve() : reject(Error('login failure'))),
-                    1000
+            try {
+                // AnonymousTokenの取得
+                const tokenRes = await this.$axios.$post(
+                    process.env.BASE_URL + '/rcms-api/1/token',
+                    {} // AnonymousUserでのトークン値取得要求のため、リクエストボディは空のオブジェクトを指定
+                )
+                const anonymousToken = tokenRes.access_token.value
+
+                // AnonymousTokenを適用したカスタムヘッダを作成
+                const customHeaderConfig = {
+                    headers: {
+                        'X-RCMS-API-ACCESS-TOKEN': anonymousToken
+                    }
+                }
+
+                // 新規会員登録のリクエスト
+                await this.$axios.$post(
+                    process.env.BASE_URL + '/rcms-api/1/member/regist',
+                    { ...this.user }, // フォームの内容をリクエストボディとして適用
+                    customHeaderConfig
                 )
-            )
 
-            try {
-                await request
                 this.signupDone = true
             } catch (e) {
                 console.error(e)

「/rcms-api/1/member/regist」の「1」には、ご自身のAPIのidを記入してください。
APIのidは、エンドポイント一覧画面より確認できます。 Image (fetched from Gyazo)

実際に新規会員登録をします。
fetched from Gyazo

会員が登録されているか確認します。
管理画面から[キャンペーン] -> [メンバー]をクリックします。

Image (fetched from Gyazo)

管理画面からメンバー一覧画面を開き、実際に会員が登録されているかを確認してください。
Image (fetched from Gyazo)

以上でKurocoを利用したNuxt.jsプロジェクトで、新規会員登録画面を構築する方法の紹介を終わります。

今回は基本的な説明のため、簡単に新規会員登録画面を作成して最低限の実装を実現しました。 実際に利用する際には、フォームのバリデーション処理やメール認証の実装をする必要性も考えられますが、基本的な会員登録の流れの理解としてご利用いただければ幸いです。

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