乐趣区

关于安全:WebH5-滑动验证码配置

jiezi

环境要求

兼容 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，高度为 200px
  • oneclick 触发式，这种款式占用面积较小，宽度默认为 300px，可通过初始化时的 width 参数调节，高度为 40px，高度不可调节

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

以上。

退出移动版