环境要求

兼容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>，则能够像上面这样初始化验证码：

// 类组件应用componentDidMountuseEffect(() => {    _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，高度为 200px
  • oneclick 触发式，这种款式占用面积较小，宽度默认为 300px，可通过初始化时的 width 参数调节，高度为 40px，高度不可调节

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

以上。