Hi, everyone, I am Xu Xiaoxi, the New Year, you learned again?

Today, I would like to share with you the implementation of NODEJS SMS verification code login scheme, through the implementation of this scheme you can have a deeper understanding of NodeJS and its related ecology.

Well, without further ado, let’s implement.

Implementation scheme

In order to develop NodeJS application more efficiently, I choose Nest. js as the server framework and use Tencent Cloud’s SMS service:

The specific implementation process is as follows:

The detailed process is as follows:

  1. When a user accesses the website login page, he or she enters a mobile phone number to trigger a verification code
  2. After receiving the request, the Node server combines the required parameters (detailed in the following sections) and requests the third-party SMS service platform
  3. Verify the third-party SMS service platform and send corresponding SMS messages after passing the verification
  4. The user enters the received verification code on the website and requests the login interface to complete the login

I’m sure you have no problem with the first step, but I’ll go through some of the core implementation processes in detail.

1. Procedure for configuring the SMS service

Since I use the SHORT message service of Tencent Cloud, I need to complete the following configuration as agreed:

  • Creating an SMS Signature

You must sign your name when sending SMS messages.

  • Create an SMS template

SMS templates allow you to create custom SMS content, as well as dynamic content, which you can explore if you are interested.

  • Create an application (generally use the default)

2. The NodeJS server invokes SMS messages to the SMS platform

Once the above configuration is complete and approved, we can use NodeJS to happily send SMS messages. Here we need to install the SDK of Tencent Cloud:

# Nest project
npm install tencentcloud-sdk-nodejs --save
Copy the code

Then store the obtained from the previous step on the Nest server:

  • User’s Mobile phone Number
  • SmsSdkAppId (id)
  • TemplateId (id)
  • SignName(Signature content)
  • TemplateParamSet(Verification code to send)

The core code is as follows:

/** * Send mobile verification code *@param Params request body */
   async registerCode(params: any): Promise<any> {
    const { phone } = params;
    if(! phone) {return {
        code: 400.msg: 'Mobile phone number is empty'}; }const code = `${rand(1000.9999)}`;
    phoneCodeList[phone] = code;

    const smsParams = {
      "PhoneNumberSet": [
        ` + 86${phone}`]."SmsSdkAppId": "xxxxx"."TemplateId": "12 * * * * *"."SignName": "Dooring services"."TemplateParamSet": [code]
    };

    try {
      const result = await client.SendSms(smsParams);
      if(result? .SendStatusSet.Code ==='Ok') {
        return {
          code: 200.msg: 'Success'}; }else {
        return {
          code: 500.msg: `Service error: ${result? .SendStatusSet.Message}`}; }}catch(err) {
      return {
        code: 500.msg: `Service error: ${err}`}; }}Copy the code

The above is a simple service logic written with Nest. The main function is to send the user’s mobile phone number and signature parameters to the third-party SMS platform and send SMS messages. The TemplateParamSet field is an array, the length of which depends on the configuration of dynamic variables in our SMS template, as follows:

If we configure two variables in the template content, then the array of the TemplateParamSet field is two items.

3. Nodejs implements SMS verification code verification

The last step is easy. We just need to compare the verification code filled in by the user with the verification code generated by our server. We can use Redis to cache the verification code.

The final result is as follows:

You can use any nodeJS framework you’re familiar with (koA, Egg).

More recommended

  • How to build building blocks to quickly develop H5 pages?
  • React loading animation library developed from scratch
  • Develop a lightweight sliding verification code plug-in from scratch
  • How to design a visual platform component store?
  • Build engine from zero design visualization large screen
  • Build desktop visual editor Dooring from zero using Electron
  • (low code) Visual construction platform data source design analysis
  • Build a PC page editor pc-dooring from scratch