KurocoとNuxt.jsで、会員登録画面に仮登録機能を実装する

概要

新規会員登録時、登録メールアドレスあてに認証用のメールを送付し、リンクをクリックしたら登録される仮登録機能を実装します。

学べること

仮登録機能は以下の手順で実装します。

• APIの設定
• Swagger UIで仮登録機能の動作を確認する
• メッセージひな形を調整する
• フロントエンドの実装をする

前提条件

このページは、KurocoとNuxt.jsでのプロジェクトが構築済みであることを前提としています。
まだ構築していない場合は、下記のチュートリアルを参照してください。
Kurocoビギナーズガイド
KurocoとNuxt.jsで、新規会員登録画面を構築する

APIの設定

まずは仮登録機能で使用するAPIを登録します。

API基本設定を行う

まずはAPIの登録をします。
Kurocoの管理画面から[API]->[Default]をクリックします。

[追加]をクリックします。

タイトル、版、ディスクリプションを入力して[追加する]をクリックします。

追加したAPIに遷移しますので、続いて、セキュリティの設定をします。
[セキュリティ]をクリックします。

[Cookie]を選択して[保存する]をクリックします。
注意)

• セキュリティについては何らかの設定を適用してください。本チュートリアルでは、Cookieを利用します。
• Cookieをセキュリティ用のトークンとして利用する場合、APIドメインとフロントエンドのドメインが違うとサードパティクッキーの問題があり、Safari等で認証が効きません。
  フロントエンドとAPIドメインをサブドメイン違いで設定をする必要があるので、独自ドメイン/TLS証明書でAPIドメインを設定し、アカウント設定からAPIドメインを変更ください。
  （Chromeでは正常に動作しますので、開発やテストの段階ではまずChromeで構築していただくことをお勧めします。）

CORS設定を行う

[CORSを設定する] をクリックします。

CORS_ALLOW_ORIGINSの [Add Origin] をクリックし、下記を追加します。

• http://localhost:3000/
• フロントエンドドメイン
• 管理画面URL

CORS_ALLOW_METHODSの [Add Method] をクリックし、下記を追加します。

• GET
• POST
• OPTIONS

CORS_ALLOW_REDENTIALSの[Allow Credentials]にチェックが入っていることを確認します。

問題なければ [保存する] をクリックします。

エンドポイントを設定する

次にエンドポイントを作成します。今回は下記エンドポイントを作成します。

• メンバー登録のエンドポイント
• 仮メンバー登録のエンドポイント

メンバー登録のエンドポイント

メンバー登録のエンドポイントを下記設定にて作成します。

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

設定完了後、「追加する」をクリックします。

仮メンバー登録のエンドポイント

仮メンバー登録のエンドポイントを下記設定にて作成します。

項目	設定内容
パス	member/invite
カテゴリー	メンバー
モデル	Member
オペレーション	invite

設定完了後、「追加する」をクリックします。

Swagger UIで仮登録機能の動作を確認する

APIの設定ができたらまずはSwagger UIで動作の確認をします。

Member::inviteのエンドポイントで招待メールを送る

[Swagger UI]をクリックします。

[/rcms-api/13/member/invite]をクリックします。

[Try it out]をクリックします。

Request bodyに以下のJSONデータを入力して[Execute]をクリックします。

{
  "email": "your_mail_address@example.com",
  "ext_info": {
    "name1": "Diverta",
    "name2": "Taro",
    "login_pwd": "PASSWORD"
  }
}

200のレスポンスと、メールの受信を確認します。

メールの本文は後ほど修正するので、今はデフォルトのままで問題ありません。
URL末尾のkeyの部分が必要になるのでメモしておきます。

keyを利用して、仮メンバーの情報を取得する

先ほどメンバー情報をpostしたMember::inviteのエンドポイントに、今度は発行されたkey情報をpostします。

Member::inviteのRequest bodyに以下のJSONデータを入力して[Execute]をクリックします。

{
  "email_hash": "c0d4e2f342837dea935435803e82cdbc"
}

email_hashの値はご自身のサイトで発行したkeyを利用してください。

すると、仮登録状態のメンバー情報がレスポンスされます。

こちらの情報を利用して会員登録をします。

Member::insertのエンドポイントで会員登録をする

最後に、取得した仮メンバーの情報で会員登録のエンドポイントにリクエストして完了です。

Swagger UIで[/rcms-api/13/member/regist]をクリックします。

[Try it out]をクリックします。

Request bodyに以下のJSONデータを入力して[Execute]をクリックします。

{
  "email": "your_mail_address@example.com",
  "name1": "Diverta",
  "name2": "Taro",
  "login_pwd": "PASSWORD"
}

メンバーの新規追加ができました。

以上が仮登録機能の動作の流れになります。
この一覧の流れをフロントエンドで実装します。

メッセージひな形を調整する

フロントエンドの実装の前に、Member::inviteのエンドポイントを叩いた際に送付されるメールの内容を調整しておきます。

[オペレーション]->[メッセージひな形]をクリックします。

識別子がmember/pre_regist_thanksのテンプレートを探して、テンプレート名をクリックします。

メッセージひな形編集画面が開くので、以下のように修正して、[更新する]をクリックします。

RCMS-X-SUBJECT:{$smarty.const.SITE_TITLE}登録のご案内
{$ext_info.name1} {$ext_info.name2}様

弊社サイト{$smarty.const.SITE_TITLE} にご登録いただきありがとうございます。

以下のURLをクリックして登録を完了してください。  

■本登録用ページ
{$smarty.const.ROOT_URL}/login/signup_pre_regist/done/{$preregist_key}/

よろしくお願い申し上げます。

フロントエンドの実装をする

最後に、以上の動作をするフロントエンドを作成します。

仮登録用のページ作成

/login/signup_pre_regist/のディレクトリにindex.vue のファイルを作成します。

<template>
    <div>
        <div v-if="!presignupDone">
            <form @submit.prevent="signup">
                <p v-if="error" :style="{ color: 'red' }">
                    {{ error }}
                </p>

                <div>
                    <label>name1</label>
                    <input v-model="user.name1" name="name1" type="text" placeholder="name1">
                </div>
                <div>
                    <label>name2</label>
                    <input v-model="user.name2" name="name2" type="text" placeholder="name2">
                </div>
                <div>
                    <label>email</label>
                    <input v-model="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>
                    <button type="submit">
                        サインアップ
                    </button>
                </div>
            </form>
        </div>
        <div v-else-if="presignupDone">
            仮登録が完了しました。メールをご確認ください。
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            presignupDone: false,
            email: null,
            user: {},
            error: null
        }
    },
    methods: {
        async signup() {
            try {
                const payload = {
                    email: this.email,
                    ext_info: {
                        ...this.user
                    },
                }
                // post data
                // 新規会員登録のリクエスト
                await this.$axios.$post('/rcms-api/13/member/invite', payload)
                this.presignupDone = 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>

注意

/rcms-api/33/member_inviteの部分はご自身のエンドポイントのURLに変更してください。
以下同様に、ソースコード内のエンドポイントURLはご自身のエンドポイントURLに変更をお願いします。

本登録用のページ作成

/login/signup_pre_regist/done/ のディレクトリに_key.vue のファイルを作成します。

• validate({ params })部分の記述で、keyがない場合や、keyの桁数が想定と異なる場合に404のページを表示します。
• mounted($route)部分の記述で、URLにアクセス後自動でregisterUser()を呼び出します。
• async registerUser()部分の記述でMember::inviteのエンドポイントからの情報取得と、Member::insertのエンドポイントへのリクエスト送付をします。

<template>
    <div>
        <div v-if="signupDone">
            登録が完了しました。
        </div>
        <p v-if="error" :style="{ color: 'red' }">
            {{ error }}
        </p>
    </div>
</template>

<script>
export default {
    validate({ params }) {
        return /[!-~]{32}/.test(params.key)
    },
    data() {
        return {
            signupDone: false,
            error: null
        }
    },
    methods: {
        async registerUser() {
            // obtain POSTed form values
            const invitationRes = await this.$axios.post(
                '/rcms-api/13/member/invite',
                {
                    email_hash: this.$route.params.key
                }
            );
            try {
                const payload = {
                    email: invitationRes.data.data.email,
                    ...invitationRes.data.data.ext_info
                }
                // request registration to an API endpoint using custom function
                await this.$axios.post('/rcms-api/13/member/regist', payload);
                this.signupDone = true
            } catch (error) {
                this.error = error.response.data.errors[0].message
            }
        }
    },
    mounted($route) {
        this.registerUser();
    }
}
</script>

動作確認

動作の確認をして、想定通りの動作でメンバーが登録できていることを確認します。

仮登録メール送信

仮登録メールの内容確認

本登録

以上で、仮登録機能の実装が完了です。

関連ドキュメント

• KurocoとNuxt.jsで、新規会員登録画面を構築する
• メッセージひな形
• お礼メールをカスタマイズできますか？