Skip to main content

How to implement member registration with authentication function using Kuroco and Nuxt.js

Overview

We will implement a registration with authentication function that sends an authentication email to the registered email address during new member registration. The link in the authentication email is used to access the registration screen, where the password is set to complete the registration process.

What you will learn

The registration with authentication function is implemented by the following the steps below.

Before you start

This page assumes that you have already built a project with Kuroco and Nuxt.js.
If you haven't built one yet, see the tutorial below.

API settings

First, we will create the API used by the registration function.

Set API basic settings

First, create a new API.
From the Kuroco admin panel, click [API]->[Default].
Image from Gyazo

Click [Add].
Image from Gyazo

Enter title, version, and description and click [Add].
Image from Gyazo

You will be redirected to the new API page.
Next, you will need to configure the security settings.
Click [Security].
Image from Gyazo

Select [Cookie] and click [Save].
Image from Gyazo

info
  • Configure the security settings according to your needs. "Cookies" is used for this tutorial.
  • When using cookies as security tokens, different API domain and frontend domains may cause authentication to not work on browsers such as Safari due to third-party cookies.
    It is necessary to set the frontend and API domain with different subdomains, set up the API domain on Original domain/TLS certificate and change the API domain on Account Settings.
    (It works fine in Chrome, so we recommend that you build in Chrome first during the development and testing phase).

Configure CORS

Click on [Operation CORS].

Image from Gyazo

Click [Add Origin] of CORS_ALLOW_ORIGINS and enter the following:

  • http://localhost:3000
  • Frontend domain
  • Admin panel URL

Click [Add Method] of CORS_ALLOW_METHODS and enter the following:

  • GET
  • POST
  • OPTIONS

Confirm that [Allow Credentials] of CORS_ALLOW_CREDENTIALS is checked.

Image from Gyazo

After finishing the configurations, click [Save].

Create endpoints

Next, we create following endpoints.

  • Member registration endpoint
  • Pending member registration endpoint

Member registration endpoint

Create an endpoint for member registration with the following settings.

ItemSettings
Pathmember/regist
CategoryMember
ModelMember
Operationinsert
default_group_idEnter the member group ID to assign the user to when they register.
You can check the group ID(s) on Group.
login_ok_flgEnabled

Image from Gyazo

Click [Add] after finishing the above configuration.

Pending member registration endpoint

Create an endpoint for pending member registration as follows:

ItemSettings
Pathmember/invite
Categorymember
ModelMember
Operationinvite

Image from Gyazo

Click [Add] after finishing the above configuration.

Test the registration function with Swagger UI

After configuring API, we will test the registration function with Swagger UI.

Send invitation email with Member::invite endpoint

Click [Swagger UI].
Image from Gyazo

Click [/rcms-api/10/member/invite].
Image from Gyazo

Click [Try it out].
Image from Gyazo

Enter the following data in the "Request body" and click [Execute].

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

Image from Gyazo

Verify that the response is returning the HTTP 200 OK code and a message saying the invitation email has been sent to the user.
Image from Gyazo

Image from Gyazo

We will modify the email body later, so we will leave it as default for now.
Copy the "key" at the end of the URL as we will need it later.

Get pending member information using key

Now post the issued key information to the Member::invite endpoint that you used to post the member information earlier.

Enter the following JSON data in the Request body of Member::invite and click [Execute].

{
"email_hash": "YOUR_EMAIL_HASH"
}

Image from Gyazo

caution

Replace YOUR_EMAIL_HASH with your own key which you saved in the previous step.

Then, you get the response of the member information of temporary registration status. Image from Gyazo

We will register the member using the above information.

Register a member using Member::insert endpoint

Finally, we make a request to the member registration endpoint with the obtained pending member information.

Click [/rcms-api/10/member/regist] on Swagger UI.
Image from Gyazo

Click [Try it out].
Image from Gyazo

Enter the following JSON data in the Request body and click [Execute].

The login password is intended to be entered on the registration page.

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

Image from Gyazo

A new member should be created.
Image from Gyazo

The above is the flow of the registration with authentication function. Next, we will implement this flow on the frontend.

Adjust message template

Before implementing the frontend, we will adjust the content of the email sent when the Member::invite endpoint is called.

Click [Operation]->[Message template]. Image from Gyazo

Search for the template with identifier member/pre_regist_thanks.
Image from Gyazo

The message template editor page will be displayed, enter the following and click [Update].

RCMS-X-SUBJECT:Thank you for signing up for {$smarty.const.SITE_TITLE}
Dear {$ext_info.name1} {$ext_info.name2}

Thank you for signing up for {$smarty.const.SITE_TITLE}.

Click the URL below and complete the member registration.

■Signup page
{$smarty.const.ROOT_URL}/login/signup_pre_regist/done/{$preregist_key}/

We are looking forward to working with you.

Image from Gyazo

Implement the front end

Finally, we will implement a frontend that completes the feature setup above.

Create page for pre-registration

Create a file index.vue in the /login/signup_pre_regist/ directory.

/login/signup_pre_regist/index.vue
loading...
caution

Replace /rcms-api/33/member_invite with your own endpoint URL.

Create the main registration page

Create a _key.vue file in the /login/signup_pre_regist/done/ directory.

  • In the validate({ params }) section, a 404 page will be displayed if there is no key or if the number of digits of the key is does not match the expected value.
  • In the async asyncData() section, we retrieve information for pending members.
  • In the async registUser()section, we combine the information for pending members with the login password and send it to the endpoint ofMember::insert`.
/login/signup_pre_regist/done/_key.vue
loading...
caution

Replace /rcms-api/33/member_invite with your own endpoint URL.

Testing

Test and confirm that the member has been registered as expected.

Sending pending registration e-mail

Image from Gyazo

Check the content of pending registration e-mail

Image from Gyazo

Member registration

Image from Gyazo

The implementation of member pending registration function is now complete.


Support

If you have any other questions, please contact us or check out Our Slack Community.