Web/H5 滑动验证码配置

小飞象小飞象 - 2023-03-17 09:28:51

---

环境要求

兼容IE8+，Chrome，Firefox，360浏览器，QQ浏览器等主流浏览器。

获取appId

请先进入顶象控制台中的“应用管理”或“应用配置”模块，并下图指引位置找到appId。

获取apiServer

在菜单栏无感验证->应用管理页面左上角显示“接入域名”即为前端接入apiServer，如下图所示：

引入 JS

<script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/v5/index.js" crossorigin="anonymous" id="dx-captcha-script"></script>

注意：由于验证码 JS 会不定期升级更新，请直接引用顶象 CDN 上的资源，以便及时获得最新安全防护，不要将 JS 文件下载到自己服务器使用。

初始化

以下分别列举Javascript、React、Vue的初始化接入示例代码：

Javascript 示例
假设页面上有一个 <div id="c1"></div>，则可以像下面这样初始化验证码。

var myCaptcha = _dx.Captcha(document.getElementById('c1'), {
    appId: 'appId', //appId，在控制台应用管理或应用配置模块获取
    apiServer: 'https://xxx.dingxiang-inc.com',
   // apiServer域名地址在控制台页面->无感验证->应用管页面左上角获取，必须填写完整包括https://。
    success: function (token) {
      // console.log('token:', token)
      // 获取验证码token，用于后端校验，注意获取token若是sl开头的字符串，则是前端网络不通生成的降级token,请检查前端网络及apiServer地址。
    }
})

初始化完成后，验证码组件会被插入到<div id="c1"></div> 中。

React 示例

假设页面上有一个 <div id="demo"></div>，则可以像下面这样初始化验证码：

// 类组件使用componentDidMount
useEffect(() => {
    _dx.Captcha(document.getElementById('demo'), {
      appId: 'appId', //appId，在控制台应用管理或应用配置模块获取
      apiServer: 'https://xxx.dingxiang-inc.com',
      // apiServer域名地址在控制台页面->无感验证->应用管页面左上角获取，必须填写完整包括https://。
      success: token => {
        // 获取验证码token，用于后端校验，注意获取token若是sl开头的字符串，则是前端网络不通生成的降级token,请检查前端网络及apiServer地址。
        console.log(token);
      }
    });
}, [])

可点击查看 React完整示例代码，初始化完成后，验证码组件会被插入到 <div id="demo"></div>中。

Vue 示例

假设页面上有一个 <div ref="demo"></div>，则可以像下面这样初始化验证码：

mounted() {
    _dx.Captcha(this.$refs.demo, {
      // appId, 在控制台应用管理或应用配置模块获取
      appId: "appId",
      apiServer: 'https://xxx.dingxiang-inc.com',
      // apiServer域名地址在控制台页面->无感验证->应用管页面左上角获取，必须填写完整包括https://。
      success: token => {
        // 获取验证码token，用于后端校验，注意获取token若是sl开头的字符串，则是前端网络不通生成的降级token,请检查前端网络及apiServer地址。
        console.log(token);
      }
    });
  }

可点击查看 Vue完整示例代码 ，初始化完成后，验证码组件会被插入到 <div ref="demo"></div>中。

外观和尺寸

滑动验证码一共有四种样式（style），分别为：

embed 嵌入式（默认），这种样式下宽度默认为 300px，可通过初始化时的 width 参数调节，高度为 200px，高度不可调节inline 内联式，这种样式占用面积较小，宽度默认为 300px，可通过初始化时的 width 参数调节，高度为 40px，高度不可调节popup 弹出式，这种样式验证码默认不可见，调用 .show() 方法后将以浮层的形式展现，宽度为 300px，高度为 200pxoneclick 触发式，这种样式占用面积较小，宽度默认为 300px，可通过初始化时的 width 参数调节，高度为 40px，高度不可调节

更多细节，可见 参数 章节。

以上。

Tags 标签

安全webhtml5插件验证码

扩展阅读