环境要求

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

获取appId

请先进入顶象控制台（link: https://user.dingxiang-inc.com/user/register?from=guozaoke#/）中的“应用管理”或“应用配置”模块，并下图指引位置找到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完整示例代码（https://codesandbox.io/s/sweet-paper-qdflf7?file=/src/App.js），初始化完成后，验证码组件会被插入到 <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完整示例代码(https://codesandbox.io/s/crazy-williams-195gl?file=/src/components/HelloWorld.vue) ，初始化完成后，验证码组件会被插入到 <div ref="demo"></div>中。

外观和尺寸

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

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

更多细节，可见 参数（https://www.dingxiang-inc.com/docs/detail/captcha#params） 章节。

以上。