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

vue 中引入阿里云的云盾防水墙_第1张图片
代码如下:

let that = this
    let 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: "恭喜您成功刮出盾牌
继续下一步操作吧", _ggk_loading: "加载中", _ggk_fail: ['呀,盾牌不见了
请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'], _ggk_action_timeout: ['我等得太久啦
请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'], _ggk_net_err: ['网络实在不给力
请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'], _ggk_too_fast: ['您刮得太快啦
请', "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 ElementTree

region_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)