How to add network verification to uniapp development

In today's Internet era, due to the development and popularization of the Internet, more and more people and companies choose to transfer their business from traditional offline to online, which also makes network security issues particularly important. Among them, network attacks and network fraud are one of the most pressing issues in network security. Therefore, it is particularly necessary to add network verification to application development. In this article, we will introduce how to add network verification in uniapp development to ensure the network security of enterprises and users.

1. Quoting network verification plug-ins in Uniapp

There are many network verification plug-ins in the uniapp plug-in market, such as Jiexian verification, Yidun verification, etc. This article takes Huashengda EasyDLips as an example. First, open your uniapp project in HBuilderX. Next, open the plug-in market, search for "Huashengda", find the EasyDlips component and install it:

After the installation is complete, create a js file related to EasyDLips in your project, name it easyDlips.js and Introduce easy-verify, as shown below:

import easyVerify from "@/common/easyDlips/verify.js";

export default {
  install(Vue) {
    Vue.prototype.$easyVerify = easyVerify;
  }
};

2. EasyDLips verification interface document and use

The main interface document for EasyDLips verification is the verify-api document. In the document, the verification initialization interface verifyInit(), the puzzle verification interface verifySlide(), the sliding verification interface verifyCaptcha(), the verification result query interface verifyCheck() and other interfaces are provided. Among them, the most commonly used are verifySlide() and verifyCaptcha().

1. Puzzle verification

The puzzle verification code is composed of a picture with a gap and a bunch of disordered small pictures. The user needs to put the disordered small pictures into Drag the picture to the correct location to restore the picture to prove your identity. The code is as follows:

import easyVerify from "@/common/easyDlips/verify.js";

export default {
  methods: {
    // 初始化验证
    initVerify() {
      const appId = '**********'; // EasyDLips系统中的appId
      const time = Date.now().toString(); // 当前系统时间毫秒数
      const sig = this.getSignature(); // 签名
      const userId = '**********'; // 用户ID
      const verifyType = '2'; // 验证类型为拼图验证

      easyVerify.verifyInit(appId, time, sig, userId, verifyType, (data) => {
        // 验证初始化成功
        console.log('verify init success:',data);
      }, (err) => {
        // 验证初始化失败
        console.log('verify init fail:',err);
      });
    },

    // 拼图验证
    slideVerify() {
      const appId = '**********'; // EasyDLips系统中的appId
      const time = Date.now().toString(); // 当前系统时间毫秒数
      const sig = this.getSignature(); // 签名
      const userId = '**********'; // 用户ID
      const verifyType = '2'; // 验证类型为拼图验证

      easyVerify.verifySlide(appId, time, sig, userId, verifyType, (data) => {
        // 验证成功
        console.log('verify slide success:',data);
      }, (err) => {
        // 验证失败
        console.log('verify slide fail:',err);
      });
    },

    // 获取签名
    getSignature() {
      const appId = '**********'; // EasyDLips系统中的appId
      const appSecret = '**********'; // EasyDLips系统中的appSecret

      // 计算md5签名
      const md5 = require('blueimp-md5');
      const str = `${appId}${Date.now().toString()}${appSecret}`;
      const sig = md5(str);

      return sig;
    }
  }
};

2. Sliding verification

Compared with the puzzle verification code, the sliding verification code has higher verification fluency and ease of use. Users need to hold down the slider and move it to the correct position to prove their identity. The code is as follows:

import easyVerify from "@/common/easyDlips/verify.js";

export default {
  methods: {
    // 滑块验证
    captchaVerify() {
      const appId = '**********'; // EasyDLips系统中的appId
      const time = Date.now().toString(); // 当前系统时间毫秒数
      const sig = this.getSignature(); // 签名
      const userId = '**********'; // 用户ID
      const verifyType = '3'; // 验证类型为滑块验证

      easyVerify.verifyCaptcha(appId, time, sig, userId, verifyType, (data) => {
        // 验证成功
        console.log('verify captcha success:',data);
      }, (err) => {
        // 验证失败
        console.log('verify captcha fail:',err);
      });
    }
  }
};

3. Summary

In today’s Internet era, problems such as network attacks and network fraud are becoming increasingly serious. Including network verification in application development can enhance the network security of enterprises and users, and provide users with a better user experience. This article introduces the usage process and code of the EasyDLips verification plug-in, hoping to help you in the application development process.

The above is the detailed content of How to add network verification to uniapp development. For more information, please follow other related articles on the PHP Chinese website!