vue 中引入阿里云的云盾防水墙

代码如下：

let that = thislet arr = ['//g.alicdn.com/sd/smartCaptcha/0.0.4/index.js', '//g.alicdn.com/sd/quizCaptcha/0.0.1/index.js', '//g.alicdn.com/sd/nvc/1.1.112/guide.js']for (var i in arr) {let script = document.createElement('script')let head = document.getElementsByTagName('head')[0]script.type = 'text/javascript'script.src = arr[i]head.appendChild(script)}window.NVC_Opt = {//应用类型标识。它和使用场景标识（scene字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。appkey:'CF_APP_1',//使用场景标识。它和应用类型标识（appkey字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。scene:'nvc_register_h5',//声明二次验证需要渲染的目标元素ID。renderTo:'#captcha',//业务键字段，可为空。该参数可用于上线前测试，请按照代码集成后测试部分中的方法配置该字段值。trans: {"key1": "code0","nvcCode":200},//当唤醒刮刮卡验证作为二次验证时，配置需要刮出的两个elements的图片资源。elements: ['//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png','//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'], //当唤醒刮刮卡验证作为二次验证时，配置刮动时的背景图像（自动应用平铺填充的方式）。bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',//当唤醒刮刮卡验证作为二次验证时，配置刮动时的前景图像（仅支持base64数据流）。bg_front: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC',//当唤醒刮刮卡验证作为二次验证时，配置验证通过时显示的图标资源。obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',//当唤醒刮刮卡验证作为二次验证时，配置验证通过时显示的背景图像（自动应用平铺填充的方式）。bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',//当唤醒刮刮卡验证作为二次验证时，配置验证失败或异常时显示的图标资源。obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',//当唤醒刮刮卡验证作为二次验证时，配置验证失败或异常时显示的背景图像（自动应用平铺填充的方式）。bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',//当唤醒刮刮卡验证作为二次验证时，用于自定义文案。详细配置方法请参见自定义文案文档。upLang:{"cn":{_ggk_guide: "请摁住鼠标左键，刮出两面盾牌",_ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",_ggk_loading: "加载中",_ggk_fail: ['呀，盾牌不见了<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],_ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],_ggk_net_err: ['网络实在不给力<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],_ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']}}}window.onload = function(){var ic = new smartCaptcha({//声明智能验证需要渲染的目标元素ID。renderTo: '#sc',//智能验证组件的宽度。width: 300,//智能验证组件的高度。height: 42,//智能验证组件初始状态文案。default_txt: '点击按钮开始智能验证',//智能验证组件验证通过状态文案。success_txt: '验证成功',//智能验证组件验证失败（拦截）状态文案。fail_txt: '验证失败，请在此点击按钮刷新',//智能验证组件验证中状态文案。scaning_txt: '智能检测中',//前端智能验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。success: function(data) {console.log(NVC_Opt.token)console.log(data.sessionId);console.log(data.sig);},});ic.init();}

python后端配置：

from . import user
from aliyunsdkcore import client
from flask import *
from application.aliyunsdkafs.request.v20180112 import AuthenticateSigRequest
from aliyunsdkcore.profile import region_provider
from xml.etree import ElementTreeregion_provider.add_endpoint('afs', 'cn-hangzhou', 'afs.aliyuncs.com')
# YOUR ACCESS_KEY、YOUR ACCESS_SECRET请替换成您的阿里云accesskey id和secret
clt = client.AcsClient('XXXXXXXX', 'xxxxxxxxxxxxxxxx', 'cn-hangzhou')@user.route("/verify", methods=['POST'])
def index():sessionId = request.values.get('sessionId')token = request.values.get('token')sig = request.values.get('sig')requests = AuthenticateSigRequest.AuthenticateSigRequest()# 必填参数：从前端获取，不可更改，android和ios只传这个参数即可requests.set_SessionId(sessionId)# 必填参数：从前端获取，不可更改requests.set_Sig(sig)# 必填参数：从前端获取，不可更改requests.set_Token(token)# 必填参数：从前端获取，不可更改requests.set_Scene('ic_other')# 必填参数：后端填写requests.set_AppKey('FFFF0N000000000073D0')# 必填参数：后端填写requests.set_RemoteIp(request.remote_addr)result = clt.do_action(requests)  # 返回code 100表示验签通过，900表示验签失败print(result.decode('utf-8'))data = ElementTree.XML(result.decode('utf-8'))return data.find('Code').text

vue 中引入阿里云的云盾防水墙相关推荐

vue 中引入阿里图标库，封装iconPicker组件
一.引入阿里图标库 1.vue项目引入阿里图标库二.封装iconPicker组件 1.子组件 <template><el-popoverplacement="bottom ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
Vue中引入使用 D3.js
Vue中引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-[看云] d3.layout (布局)-[ ...
如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Vue中引入并使用动态图标
Vue中引入并使用动态图标 1.安装依赖 2.在Vue项main.js中引入 3.经过以上操作,已经实现全局引入,在任何地方直接使用即可. 本次选用Font-awesome-animation 1.安 ...
vue中引入高德js
项目概述: 通过在vue中引入高德js,实现地图的加载呈现,以及在地图中实现设备坐标定位,并在设备列表点击的同时进行定位点的切换和地图视图的切换,在点击坐标点的时候可以弹出相关介绍信息. 第一步:在i ...
在vue中引入外部的css文件
在vue中引入外部的css文件在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...

vue 中引入阿里云的云盾防水墙

vue 中引入阿里云的云盾防水墙相关推荐

最新文章

热门文章