在现今的互联网时代，由于网络的发展和普及，越来越多的人和企业选择将业务从传统的线下转移到线上，这也让网络安全问题变得尤为重要。其中，网络攻击与网络欺诈是网络安全最为紧迫的问题之一。因此，在应用开发中加入网络验证就显得尤为必要。在本文中，我们将介绍如何在uniapp开发中加入网络验证，以保障企业和用户的网络安全。
一、在Uniapp中引用网络验证插件
uniapp插件市场中有很多网络验证插件，如极验验证、易盾验证等。本文以华盛达EasyDLips为例。首先，在HBuilderX中打开你的uniapp项目。接下来，打开插件市场，搜索"华盛达"，找到EasyDlips组件并安装：
安装完成后，在你的项目中创建一个与EasyDLips有关的js文件，命名为easyDlips.js并引入easy-verify，如下所示：
import easyVerify from "@/common/easyDlips/verify.js";
export default {
install(Vue) {
Vue.prototype.$easyVerify = easyVerify;
}
};二、EasyDLips验证接口文档与使用
EasyDLips验证的主要接口文档为verify-api文档。在文档中，提供了验证初始化接口verifyInit()，拼图验证接口verifySlide()，滑动验证接口verifyCaptcha()，验证结果查询接口verifyCheck()等接口。其中，最常用的是verifySlide()和verifyCaptcha()。
功能说明(部分): 1,后台控制；所有前台显示页面,都在后台加以控制，不需登陆FTP即可更改全部的页面显示信息。 2,可选择用户发表的信息是否要求验证，如果选择只有通过验证后的信息才能在网页上显示。 3,推荐好友支持；当浏览信息时，可以选择“推荐”好友，只要输入对方的E-mail地址即可将此条信息发送到对的邮箱中。 4,预订信息支持；当访问者看到感兴趣的信息后，可选择“我要预订”向对方发送
- 拼图验证
拼图验证码是由一张带有缺口的图片和一堆乱序的小图片组成的，用户需要将乱序的小图片拖动到正确的位置以还原图片，以证明自己的身份。代码如下：
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;
}
}
};- 滑动验证
滑动验证码相比于拼图验证码来说，验证的流畅度以及易用性更高。用户需要按住滑块并将其移动到正确位置，以证明自己的身份。代码如下：
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);
});
}
}
};三、总结
在今天的互联网时代，网络攻击和网络欺诈等问题日益严重。在应用开发中加入网络验证可以增强企业和用户的网络安全保障，为用户提供更好的使用体验。本文介绍了EasyDLips验证插件的使用流程和代码，希望能给您的应用开发过程带来帮助。
