二维码验证码

三维身份验证是基于公用云的云原生、AI模型、防Bots、多维度风控、威胁情报、溯源定位能力的创新型身份验证服务，可以在身份验证场景、活动场景、爬虫场景等用户身份交互场景处部署。可以通过轻量级的部署来有效解决撞库攻击、爬虫、弱口令、实时代理IP、小号注册、人机识别等多种身份验证威胁，同时是传统字符验证码、行为验证码、身份验证解决方案的升级替换解决方案，任何场景的威胁都可以通过三维的身份进行识别、防御和深度溯源关联。

1. 前端接入文档

1.1 SDK接入：

http示例： http://sdk.tj.wuthreat.com/QRCodeSdk.js

https示例： https://sdk.tj.wuthreat.com/QRCodeSdk.js

1.2.1 调用初始化函数---下一代验证码定制按钮

弹出式：


    Window.VerifyBtn_qrcode('element', 'appKey',{
        //按钮参数配置
        width:'320px'//宽度
        height:'40px'//高度
        text: '立即点击验证'//按钮文案
        color:'rgb(10,81,217)'//初始文字颜色
        borderColor:'#0053F0'//按钮初始边框颜色
        backgroundColor:'rgb(221,233,255)'//按钮初始背景颜色
        type:2//按钮类型
    , ready :function (instance) {
        验证按钮初始化加载完成
    }, success:function(passtoken，utoken) {
        // 验证成功后触发该函数，进行二次验证
    }
    })

*注：如调用二次验证后，再次使用时，须手动初始化验证码方法。

参数配置：

参数名 类型 必填 默认项 描述
element HTMLElement 是 无 容器元素或容器元素选择器。
appKey String 是 无 无胁安全平台创建验证码后得到的AppKey
width String 是 310px 验证按钮宽度，推荐使用宽度260px-400px，后缀为px
height String 是 40px 验证按钮的高度，推荐使用高度40px-80px，后缀为px
text String 是 立即验证 按钮上的文案
color * 是 rgb(10,81,217) 按钮上的文字颜色
borderColor * 是 rgb(221,233,255) 按钮初始边框颜色
backgroundColor * 是 rgb(255,255,255) 按钮初始背景颜色
type Number 是 无 按钮类型：自有按为1，下一代验证码定制按钮为2
ready function 是 无 所有工作准备就绪，用户可以使用验证码并成功显示验证按钮时触发该回调
success function 是 无 验证码验证成功后触发回调函数，用户可以执行后续逻辑，如：直接登录或进行二次验证
1.2.2 调用初始化函数---自有按钮

弹出式：

      
        Window.VerifyBtn_qrcode('element', 'appKey',{
            //按钮参数配置
            width:'320px'//宽度
            height:'320px'//高度
            type:1//按钮类型
        , ready :function (instance) {
            验证按钮初始化加载完成
        }, success:function(passtoken，utoken) {
            // 验证成功后触发该函数，进行二次验证
        }, 
        })

注：参数配置请参照上方文档，只需配置width，height，type，其中width，height需与实际自定义按钮的数据一致且为必填项，否则不生效，详情请看下方代码示例

1.3 相关代码示例

自有按钮-弹出式（#captcha_1），下一代验证码定制按钮-弹出式（#captcha_2）：

    


    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta  charset="UTF-8">
    <meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta  http-equiv="X-UA-Compatible" content="ie=edge">
    <title>智能验证码示例</title>
    <script  charset="UTF-8" type="text/javascript" src="https://sdk.tj.wuthreat.com/QRCodeSdk.js"></script>
    </head>
    <body>
    <div id="captcha_1"></div>
    <div id="captcha_2"></div>
    
    <style>
        #captcha_1{
            width:320px;
            height:40px;
            ....
        }
    </style>
     </body>
    </html>

    <script>
        
        Window.VerifyBtn_qrcode('#captcha_1', 'appKey',{
            width: '320px',
            height: '40px',
            type: 1,
            encryption: false,
            ready: function () {
                // 初始化成功后触发该函数
            },
            success: function (passtoken，utoken) {
                // 验证成功后触发该函数
            },
        },

    Window.VerifyBtn_qrcode('#captcha_2', 'appKey',{
        width: '320px',
        height: '40px',
        text: 立即验证,
        color: rgb(10,81,217),
        borderColor: #0053F0,
        backgroundColor: rgb(255,255,255),
        type: 2,
        encryption: false,
        ready: function () {
            // 初始化成功后触发该函数
        },
        success: function (passtoken，utoken) {
            // 验证成功后触发该函数，进行二次验证
        },
    },
    </script>