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 ファイルを新規作成し、下記コードを記載してください。

<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を修正します。

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 = trueを shouldSuccess = falseへ変更します。

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の管理画面のエンドポイント一覧より[新しいエンドポイントの追加]をクリックします。

Image from Gyazo

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

Image from Gyazo

設定項目	設定
パス		member/regist
	有効/無効	有効
モデル	カテゴリー	メンバー
	モデル	Member：v1
	オペレーション	insert
APIリクエスト制限		None
基本設定	default_group_id	適用するメンバーグループのIDを入力してください。グループIDはグループより確認できます。
	login_ok_flg	チェックを入れる

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

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

エンドポイント一覧画面より、「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)を修正します。

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の場合
セキュリティ設定が動的アクセストークンの場合

セキュリティ設定が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(
+                    '/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 from Gyazo

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

Image 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(
+                    '/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(
+                    '/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 from Gyazo

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

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

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

サポート

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

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

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

前提条件​

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

APIセキュリティについて​

推奨ブラウザについて​

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

登録フォームの作成​

登録処理の実装​

エラー処理の実装​

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

エンドポイントの作成​

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

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

ファイルの修正​

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

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

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

サポート

前提条件

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

APIセキュリティについて

推奨ブラウザについて

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

登録フォームの作成

登録処理の実装

エラー処理の実装

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

エンドポイントの作成

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

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

ファイルの修正

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

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

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