メインコンテンツまでスキップ

KurocoとNuxt.jsで配信購読者の登録・停止フォームを作成する

概要​

Kurocoを利用したNuxt.jsプロジェクトで、配信機能の購読者を登録・解除するフォームを構築する方法について説明します。
配信の登録・解除を行う MagazineSubscriber::subscribe/unsubscribe のエンドポイントはemailをポストするだけで動作しますが、 エンドポイントのURLが分かれば、他人のメールアドレスを登録・解除できてしまいます。

そこで本チュートリアルでは、ログインを必須にする方法と、keyを使って配信解除をする方法の2つを紹介します。

学べること​

以下の2パターンで配信購読者の登録・解除をする動作を実装します。

前提条件​

このページはKurocoとNuxt.jsでのプロジェクトが構築済みであることを前提としています。
まだ構築していない場合は、Kurocoビギナーズガイドを参考に構築をお願いいたします。

ログイン必須の配信登録・解除を行う​

配信の登録・解除をログイン状態でのみ動作するように実装します。
ログイン必須(self_onlyの設定)にしたエンドポイントはemailをpostしても動作せず、ログイン状態で自身のmember_idをpostして配信の登録・解除を行います。

エンドポイントの登録​

[新しいエンドポイントの追加]をクリックし、配信登録のエンドポイントと、ログインのエンドポイントを作成します。

Image from Gyazo

配信登録のエンドポイント​

以下の内容を設定し、「追加」をクリックします。

項目設定内容
パスmagazine_subscribe
カテゴリー配信
モデルMagazineSubscriber
オペレーションsubscribe
allow_magazine_id1
self_onlyチェックを入れる

配信解除のエンドポイント​

以下の内容を設定し、「追加」をクリックします。

項目設定内容
パスmagazine_unsubscribe
カテゴリー配信
モデルMagazineSubscriber
オペレーションsubscribe
allow_magazine_id1
self_onlyチェックを入れる

ログインのエンドポイント​

ログインのエンドポイントはデフォルトで設定されているものを使用します。 無い場合は以下の内容でログインのエンドポイントを作成します。

項目設定内容
パスlogin
カテゴリー認証
モデルLogin
オペレーションlogin_challenge

profileのエンドポイント​

profileのエンドポイントはデフォルトで設定されているものを使用します。 無い場合は以下の内容でprofileのエンドポイントを作成します。

項目設定内容
パスprofile
カテゴリー認証
モデルLogin
オペレーションprofile

フロントエンドの実装​

次に、フロントエンドにマガジンの配信登録フォームを作成します。
subscribe_with_loginのフォルダを作成し、以下のindex.vueファイルを追加します。

postの処理のエラー時のレスポンスはerror.response.dataで受け取ることができます。下記のファイルではthis.resultMessage = error.response.data.errors[0].messageの記述でKurocoのメッセージを取得しています。

/pages/subscribe_with_login/index.vue
<template>
  <div>
    <form>
      <h1>Subscribe to Magazine</h1>
      <p v-if="resultMessage !== null">
        {{ resultMessage }}
      </p>
      <form @submit.prevent="login">
        <input v-model="email" name="email" type="email" placeholder="email" />
        <input v-model="password" name="password" type="password" placeholder="password" />
        <button type="submit">Login</button>
      </form>
      <button v-on:click.prevent="subscribeSubmit">Subscribe</button>
      <button v-on:click.prevent="unsubscribeSubmit">Unsubscribe</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      resultMessage: null,
    }
  },
  methods: {
    //Login
    async login() {
      try {
        const payload = {
          email: this.email,
          password: this.password,
        };
        await this.$axios.$post('/rcms-api/1/login', payload);
        this.resultMessage = 'Successful login';
      } catch (error) {
        this.resultMessage = error.response.data.errors[0].message
      }
    },
    //Subscribe
    async subscribeSubmit() {
      const profile = await this.$axios.$get('/rcms-api/1/profile');
      if (profile.member_id == null) {
        this.resultMessage = 'Please log in'
      }
      else {
        try {
          const payload = {
            member_id: profile.member_id
          }
          // post data
          const response = await this.$axios.$post(`/rcms-api/1/magazine_subscribe/1`, payload)
          this.resultMessage = response.messages[0]
        } catch (error) {
          this.resultMessage = error.response.data.errors[0].message
        }
      }
    },
    //Unsubscribe
    async unsubscribeSubmit() {
      const profile = await this.$axios.$get('/rcms-api/1/profile');
      if (profile.member_id == null) {
        this.resultMessage = 'Please log in'
      }
      else {
        try {
          const payload = {
            member_id: profile.member_id
          }
          // post data
          const response = await this.$axios.$post(`/rcms-api/1/magazine_unsubscribe/1`, payload)
          this.resultMessage = response.messages[0]
        } catch (error) {
          this.resultMessage = error.response.data.errors[0].message
        }
      }
    },
  }
}
</script>
注意

上記サンプルのサンプルは参考のため最低限のコードになっています。
実際に利用する際には、バリデーション処理や、ログイン機能のために @nuxt/auth などのライブラリもご利用ください。

動作の確認​

配信登録する​

npm run devを実行して動作の確認をします。
/subscribe_with_loginのURLでログイン実行後、[Subscribe]するをクリックすると、KurocoのエンドポイントにAPIリクエストが行われ、「登録しました。」の表示が確認できます。

Image from Gyazo

配信 購読者一覧のページを確認すると、配信購読者が登録されていることが分かります。

Image from Gyazo

配信解除する​

次に[Subscribe]するをクリックすると、KurocoのエンドポイントにAPIリクエストが行われ、「退会しました。」の表示が確認できます。

Image from Gyazo

購読者一覧のページでも配信購読者が削除されていることが分かります。

Image from Gyazo

ログイン不要の配信登録・解除を行う​

配信登録はemailだけで登録できるようにし、配信解除は配信メッセージの[配信解除する]のリンクをクリックすることで解除するように実装します。
未ログインでの配信解除では、他人の購読を勝手に解除できないよう購読者ごとに割り当てられたkeyを使用します。

keyは管理画面の配信 購読者一覧で確認できます。

Image from Gyazo

エンドポイントの登録​

[新しいエンドポイントの追加]をクリックし、配信登録のエンドポイントと、ログインのエンドポイントを作成します。

Image from Gyazo

配信登録のエンドポイント​

以下の内容を設定し、「追加」をクリックします。

項目設定内容
パスmagazine_subscribe_with_key
カテゴリー配信
モデルMagazineSubscriber
オペレーションsubscribe
allow_magazine_id1

配信解除のエンドポイント​

以下の内容を設定し、「追加」をクリックします。

項目設定内容
パスmagazine_unsubscribe_with_key
カテゴリー配信
モデルMagazineSubscriber
オペレーションsubscribe
allow_magazine_id1
required_keyチェックを入れる

カスタム処理の作成​

配信解除を行うためのkeyは配信 購読者一覧に表示されています。 このkeyを配信メッセージ内で使えるようにするためのカスタム処理を作成します。

[オペレーション] -> [カスタム処理]をクリックします。

Image from Gyazo

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

Image from Gyazo

以下のように入力します。

項目設定
タイトルマガジンの差し込み(key,emailを使えるようにする)
識別子substitution_key
これを使ったコンポーネントトリガー: 配信の差し込み
値：1
処理以下のコード
{assign_array var=substitutions values=''}
{assign var=substitutions.key   value=$member_info.key}
{assign var=substitutions.email value=$member_info.email}

フロントエンドの実装​

フロントエンドは配信登録用のページと、配信解除用のページを作成します。

まずは配信登録用のページを作成します。
subscribe_with_keyのフォルダを作成し、以下のindex.vueファイルを追加します。

/pages/subscribe_with_key/index.vue
<template>
  <div>
    <form>
      <h1>Subscribe to Magazine</h1>
      <p v-if="resultMessage !== null">
        {{ resultMessage }}
      </p>
      <input v-model="emailEntered" name="email" type="email" placeholder="email">
      <button v-on:click.prevent="subscribeSubmit">Subscribe</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emailEntered: '',
      resultMessage: null,
    }
  },
  methods: {
    //Subscribe
    async subscribeSubmit() {
      try {
        const payload = {
          email: this.emailEntered
        }
        // post data
        const response = await this.$axios.$post(`/rcms-api/1/magazine_subscribe_with_key/1`, payload)
        this.resultMessage = response.messages[0]
      } catch (error) {
        this.resultMessage = error.response.data.errors[0].message
      }
    }
  }
}
</script>

次に配信解除用のページを作成します。
subscribe_with_keyのフォルダに以下のunsubscribe.vueファイルを追加します。

配信解除用のページは配信メッセージに記載したリンクからアクセスすることを前提としています。

/pages/subscribe_with_key/unsubscribe.vue
<template>
  <div>
    <h1>Unsubscribe to Magazine</h1>
    <div>
      Email: {{$route.query.email}}
    </div>
    <p v-if="resultMessage !== null">
      {{ resultMessage }}
    </p>
  </div>
</template>

<script>
export default {
  validate({ query }) {
    return /[!-~]{32}/.test(query.key)
  },
  data() {
    return {
      error: null,
      resultMessage: null,
    }
  },
  methods: {
    async unsubscribeSubmit() {
      try {
        const payload = {
          email: this.$route.query.email,
          key: this.$route.query.key
        }
        const response = await this.$axios.$post(`/rcms-api/1/magazine_unsubscribe_with_key/1`, payload)
        this.resultMessage = response.messages[0]
      } catch (error) {
        this.resultMessage = error.response.data.errors[0].message
      }
    }
  },
  mounted($route) {
    this.unsubscribeSubmit();
  }
}
</script>

動作の確認​

配信登録する​

npm run devを実行して動作の確認をします。
/subscribe_with_keyのURLでemailを入力し[Subscribe]をクリックすると、KurocoのエンドポイントにAPIリクエストが行われ、「登録しました。」の表示が確認できます。

Image from Gyazo

配信 購読者一覧のページを確認すると、配信購読者が登録されていることが分かります。

Image from Gyazo

配信メッセージを送付する​

配信 メッセージ作成から購読者宛に以下のメールを送付します。

<p>Thank you for trying our service!</p>
<p>This email is sent from Kuroco. If you wish to unsubscribe, please click <a href="http://localhost:3000/subscribe_with_key/unsubscribe?email=%email%&key=%key%">here</a>.</p>
<p>Best regards,<br>Kuroco Team</p>

Image from Gyazo

購読解除ページへのリンクが付いた配信メッセージが届きます。
Image from Gyazo

メッセージに記載のリンクから購読解除する​

リンクにアクセスすると、クエリパラメータに付与されたemailとkeyをKurocoのエンドポイントにAPIリクエストし、購読解除の処理が完了します。

Image from Gyazo

以上で、配信機能の購読者を登録・解除するフォームを構築する方法についての説明を終了します。

関連ドキュメント​

サポート

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

フォームから問い合わせをする
Slackコミュニティに参加する