Creating a Subscription Form for Subscribers using Kuroco and Nuxt.js

Overview

This tutorial explains how to create a form to register and unsubscribe subscribers for a delivery feature in a Nuxt.js project using Kuroco.
The MagazineSubscriber::subscribe/unsubscribe endpoint for registering/unsubscribing from the delivery only requires posting the email, but if the URL of the endpoint is known, it is possible to register/unsubscribe someone else's email address.

Therefore, in this tutorial, we will introduce two methods: requiring login and using a key to unsubscribe from the delivery.

What you will learn

We will implement the following two operations to register and unsubscribe subscribers for the delivery:

• Require login to register and unsubscribe from the delivery
• Making subscription registration and cancellation without login required

Prerequisites

This page assumes that a project using Kuroco and Nuxt.js has already been set up.
If you have not set it up yet, please refer to the Kuroco Beginner's Guide for instructions on how to set it up.

Require login to register and unsubscribe from the delivery

We will implement the functionality for registering and unsubscribing from deliveries to work only when logged in.
The endpoint set to require login (self_only configuration) does not work when posting email, but it will be used to register and unsubscribe from deliveries by posting the user's own member_id while logged in.

Registering the endpoints

Click on [Add new endpoint] to create the endpoint for registering the delivery and the login endpoint.

Endpoint for registering the delivery

Set the following information and click [Add].

Field	Setting
Path	magazine_subscribe
Category	Delivery
Model	MagazineSubscriber
Operation	subscribe
allow_magazine_id	1
self_only	Check the box

Endpoint for unsubscribing from the delivery

Set the following information and click [Add].

Field	Setting
Path	magazine_unsubscribe
Category	Delivery
Model	MagazineSubscriber
Operation	subscribe
allow_magazine_id	1
self_only	Check the box

Login endpoint

Use the default login endpoint that is already set up. If it does not exist, create a login endpoint with the following information:

Field	Setting
Path	login
Category	Authentication
Model	Login
Operation	login_challenge

Profile endpoint

Use the default profile endpoint that is already set up. If it does not exist, create a profile endpoint with the following information:

Field	Setting
Path	profile
Category	Authentication
Model	Login
Operation	profile

Frontend implementation

Next, create a form for subscribing to the magazine delivery on the frontend.
Create a folder called subscribe_with_login and add the following index.vue file.

In the event of an error in the post processing, the response can be received using error.response.data. In the file below, the Kuroco message is obtained using the description this.resultMessage = error.response.data.errors[0].message.

/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() {
      try {
        const payload = {
          email: this.email
        }
        // 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() {
      try {
        // post data
        const response = await this.$axios.$post(`/rcms-api/1/magazine_unsubscribe/1`, {})
        this.resultMessage = response.messages[0]
      } catch (error) {
        this.resultMessage = error.response.data.errors[0].message
      }
    },
  }
}
</script>

caution

The above sample code is minimal for reference purposes.
When using it in practice, please also use libraries such as @nuxt/auth for validation processing and login functionality.

Confirming the operation

Subscribe

Run npm run dev to confirm the operation.
After logging in at the URL /subscribe_with_login, when you click [Subscribe], an API request is made to the Kuroco endpoint, and you can see the message "Registered".

When you check the Subscribers page, you can see that the subscriber has been registered.

Unsubscribe

Next, when you click [Unsubscribe], an API request is made to the Kuroco endpoint, and you can see the message "Resigned".

On the Subscribers page, you can see that the subscriber has been removed.

Making subscription registration and cancellation without login required

Modify the implementation so that subscription registration can be done with just an email, and subscription cancellation can be done by clicking the [Unsubscribe] link in the subscription message.
For unsubscribing without logging in, use the key assigned to each subscriber to prevent unauthorized cancellation of other people's subscriptions.

You can check the key on the Subscribers page in the management screen.

Registering Endpoints

Click on [Add New Endpoint] to create endpoints for subscription registration and login.

Subscription Registration Endpoint

Set the following information and click on "Add".

Field	Setting
Path	magazine_subscribe_with_key
Category	Subscription
Model	MagazineSubscriber
Operation	subscribe
allow_magazine_id	1

Subscription Unsubscribe Endpoint

Set the following information and click on "Add".

Field	Setting
Path	magazine_unsubscribe_with_key
Category	Subscription
Model	MagazineSubscriber
Operation	subscribe
allow_magazine_id	1
required_key	Check the box

Creating Custom Processing

The key for unsubscribing from the subscription is displayed in Subscribers page. Create a custom processing to make this key usable within the subscription message.

Click on [Operation] -> [Custom function].

Click on [Add].

Enter the following information:

Field	Setting
Title	Insertion of Magazine (to make key and email usable)
Identifier	substitution_key
Component using this	Trigger: Insertion of Subscription Value: 1
Processing	The following code

{assign_array var=substitutions values=''}
{assign var=substitutions.key   value=$member_info.key}
{assign var=substitutions.email value=$member_info.email}

Frontend Implementation

Create a page for subscription registration and a page for subscription unsubscribe in the frontend.

First, create a page for subscription registration.
Create a folder named subscribe_with_key and add the following index.vue file.

/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>

Next, create a page for subscription unsubscribe.
Add the following unsubscribe.vue file to the subscribe_with_key folder.

The page for subscription unsubscribe assumes that it will be accessed through a link specified in the subscription message.

/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>

```markdown
<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>

Confirmation of operation

Register for delivery

Run npm run dev to confirm the operation.
When you enter an email address in the URL /subscribe_with_key and click [Subscribe], an API request is made to Kuroco's endpoint, and you can see the message "Registered".

When you check the Subscribers page, you can see that the subscriber is registered.

Send a delivery message

Send the following email to the subscriber from Notification Message Editor.

<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>

You will receive a delivery message with a link to the unsubscribe page.

Unsubscribe using the link in the message

Accessing the link will send the email and key attached as query parameters to Kuroco's endpoint, completing the unsubscribe process.

This concludes the explanation of how to build a form to register and unsubscribe subscribers for the delivery function.

Related Documents

• List of triggers and variables available for custom functions - Notification substitution