Vue之集成阿里云滑块验证

采用阿里云的滑块验证，首先注册并申请appKey。

public > index.html中引入js

<head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"><!-- 国内使用 --><script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script><!-- 若您的主要用户来源于海外，请替换使用下面的js资源 --><!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script> -->
</head>

新建文件no-captcha.vue

<template><div id="__nc" style="width:100%;margin-bottom:20px;"><div id="nc"></div></div>
</template>
<script>
export default {name: "machineCheck",data() {return {platform: '',isWeChat: false,}},mounted() {// this.platformFunC() //h5移动端机型系统判断this.check()},props: {logVal: Number},methods: {// 机型系统判断platformFunC() {const u = navigator.userAgent;const ua = navigator.userAgent.toLowerCase();let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端let weChat = ua.match(/MicroMessenger/i) == "micromessenger";if (isiOS) {this.platform = 'ios';} else if (isAndroid) {this.platform = 'android';}this.isWeChat = weChat;},check(){let _that = this// 实例化ncconst nc_token = ["你申请的appKey", (new Date()).getTime(), Math.random()].join(':');const nc = NoCaptcha.init({renderTo: '#nc',appkey: '你申请的appKey',scene: 'nc_message_h5',token: nc_token,trans: {"key1": "code200"},elementID: ["usernameID"],is_Opt: 0,language: "cn",timeout: 10000,retryTimes: 5,errorTimes: 5,inline: false,apimap: {// 'analyze': '//a.com/nocaptcha/analyze.jsonp',// 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',},bannerHidden: false,initHidden: false,callback: function (data) {data.nc_token = nc_tokendata.scene = 'nc_message_h5'let dataArr = data_that.$emit('ncData', dataArr)if (_that.logVal === 1) {_that.childMethod()}if (_that.platform === 'ios') {window.webkit.messageHandlers.getNcData.postMessage(JSON.stringify(dataArr));} else if (_that.platform === 'android') {window.js.getNcData(JSON.stringify(dataArr));}// console.log(data)// window.console && console.log('nc_token：' + nc_token)// window.console && console.log('csessionid：' + data.csessionid)// window.console && console.log('sig：' + data.sig)},error: function (s) {}});NoCaptcha.setEnabled(true);nc.reset();//请务必确保这里调用一次reset()方法NoCaptcha.upLang('cn', {'LOADING':"加载中...",//加载'SLIDER_LABEL': "请向右滑动验证",//等待滑动'CHECK_Y':"验证通过",//通过'ERROR_TITLE':"非常抱歉，这出错了...",//拦截'CHECK_N':"验证未通过", //准备唤醒二次验证'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示});},childMethod() {// console.log(this.$parent.$parent)this.$parent.$parent.reSendCode();}}
}
</script><style scoped></style>

在需要滑块验证的页面中引入上面的组件

<template><div><section class="four_container"><div class="form_section"><el-form><el-form-item label="姓名" style="padding-left: 14px"><el-inputv-model="search_form.userName"placeholder="请填写您的证件姓名"></el-input></el-form-item><el-form-item label="证件号"><el-inputv-model="search_form.cardNo"placeholder="请填写您的证件号码"></el-input></el-form-item><el-form-item label="手机号"><div class="getCodeBox"><el-inputv-model="search_form.userPhone"placeholder="请填写您的手机号"maxlength="11"></el-input><p:class="isSendCode ? 'sendCode' : 'sendCode_no'"@click="isSendCode ? sendCode() : ''">{{ codeText }}</p></div></el-form-item><machineCheckv-on:ncData="ncData":logVal="1"v-if="ncShow"></machineCheck><el-form-item label="验证码"><el-inputv-model="search_form.captcha"placeholder="请输入手机验证码"maxlength="6"></el-input></el-form-item></el-form><p:class="isSearchData ? 'search_button_op' : 'search_button'"@click="isSearchData ? submit_search() : ''">查询</p></div></section></div>
</template><script>
import axiosApi from "../../../network/dataRequest/DataRequest.js";
import machineCheck from "../../../components/comMon/no-captcha.vue";
import axios from "axios";export default {name: "",data() {return {isSendCode: false, //发送验证码 按钮是否能点击isSearchData: false, //查询 按钮是否能点击codeText: "获取验证码", //短信验证码codeStatus: 0, //发送验证码的状态totalTime: 60, //倒计时总时间interverTime: null, //定时器ncShow: false, //人机校验显示隐藏nc_DataArr: {},code_form: {captchaType: "scoreOffline",nc_token: "",phoneNumber: "",scene: "",sessionId: "",sig: "",},search_form: {captcha: "",cardNo: "",userName: "",userPhone: "",},};},watch: {},props: {},components: { machineCheck },mounted() {},methods: {ncData(ncData) {this.nc_DataArr = ncData;},// 点击发送验证码sendCode() {// 防止用户重复点击if (!this.interverTime) {if (this.search_form.userPhone) {// 判断用户手机号是否正确if (!/^1[3456789]\d{9}$/.test(this.search_form.userPhone.trim())) {this.ncShow = false;this.$message({showClose: true,message: "手机号格式错误",type: "error",});return false;} else {this.nc_DataArr = {};if (this.nc_DataArr.code !== 0) {this.ncShow = true;return false;}this.reSendCode();}} else {this.ncShow = false;this.$message({showClose: true,message: "手机号不能为空",type: "error",});}}},//发送验证码重复部分reSendCode() {this.startTime();this.code_form = {captchaType: "scoreOffline",nc_token: this.nc_DataArr.nc_token,phoneNumber: this.search_form.userPhone,scene: "nc_message_h5",sessionId: this.nc_DataArr.csessionid,sig: this.nc_DataArr.sig,};let that = this;axiosApi.captchaUserMachineSendApi(this.code_form).then((res) => {console.log(res);if (res.data.code == 0) {that.ncShow = false;} else {this.$message({showClose: true,message: res.data.msg,type: "error",});}that.ncShow = false;});},//开启定时器startTime() {this.codeStatus = 1;this.isSendCode = false;this.interverTime = setInterval(() => {this.totalTime--;this.codeText = this.totalTime + "秒后重新获取";if (this.totalTime <= 0) {this.clearTime();}}, 1000);},// 清除计时器并初始化数据clearTime() {clearInterval(this.interverTime);this.totalTime = 60;this.codeText = "获取验证码";this.codeStatus = 0;this.interverTime = null;this.isSendCode = true;},},
};
</script><style scoped lang="scss" rel="stylesheet/scss"></style>

Vue之集成阿里云滑块验证相关推荐

阿里python认证_集成阿里云滑动验证(python)
阿里云的服务数据风控下面有项滑动验证, 适合有人机验证场景的应用接入. 所谓滑动验证, 是在需要进行人机识别时, 前端出现验证滑块, 通过拖动滑块到末尾, 实现验证. 如果阿里云认为此次验证风险稍高 ...
vue项目集成腾讯滑块验证
项目中需要用到滑块验证,比如说本博客中的留言评论功能,可以使用腾讯的滑块验证,接下来看操作! 首先需要获取腾讯云的CaptchaAppId 可以参考腾讯云图形验证的使用文档. 第一步:登录腾讯云,打开 ...
阿里云滑块验证漏洞太大。
真难想象像阿里这样的公司,竟然做出这么差的滑块验证产品阿里滑块有漏洞阿里的滑块漏洞可以直接提前获取,包过,跟他们客服反应,没有人回应,真不知道这样的产品是如何上线还出售的. 不相信的,直接验证.站 ...
vue项目接入阿里云智能验证
首先是官方链接 https://help.aliyun.com/document_detail/122767.html?spm=5176.2020520162.0.0.5ca95fb04qNiKh 有 ...
vue项目中引入阿里云滑动验证
注册阿里云账号参照滑动验证demo 滑动验证在vue中使用步骤 1.在vue-cli安装的项目中,index.html页面引入js <html><head><meta ...
vue调用阿里云无痕验证
vue调用阿里云无痕验证在调用阿里云无痕验证时有个先决条件需要全局变量先定义才能去加载js set_ALY_config () {var _this = thisreturn new Promise ...
Spring Boot集成阿里云视频点播服务的过程记录
阿里云视频点播效果预览视频点播视频点播概述功能优势流程环境准备开通视频点播创建RAM用户并授权上传SDK 上传流程下载上传SDK 安装上传SDK 集成Java上传SDK 异常说明 ...
阿里云人机验证(无痕)完整流程以及注意事项
阿里云人机验证(无痕)完整流程及注意事项 1.文档链接:阿里云人机验证文档 2.无痕验证流程图: 3.开发注意事项前端注意事项: 1.前端代码在购买服务后可以直接获取,或者参考官方文档内代码 2.前 ...
Springboot2.0集成阿里云RocketMQ
介绍 RocketMQ是出自阿里巴巴的一款开源消息中间件,在设计上借鉴了Kafka,2017年成为Apache顶级项目,虽然目前社区无法和Kafka比肩,但其历经多次天猫双十一的考验,其性能和稳定是毋 ...

Vue之集成阿里云滑块验证

Vue之集成阿里云滑块验证相关推荐

最新文章

热门文章