验证码验证模式分为无感验证和强校验模式。用户可在无感验证管理控制台->安全配置页面按需设置。
验证码渲染的宽度大小为330px。
答:可以同一设备打开这个网址排查加载验证码的耗时情况 https://www.dingxiang-inc.com/detector/
需要重新实例化 DXCaptchaView 初始化后,调用startToload
一般业务开发,只需要关注两个事件:验证成功DXCAPTCHA_SUCCESS
,验证失败DXCAPTCHA_FAIL
,其他事件根据不同需求进行接入。
验证成功后,会返回事件DXCAPTCHA_SUCCESS
,通过map.get("token")
方式获取。
验证码结合了设备指纹、行为特征、访问频率、地理位置等多项技术,能识别风险行为,并进行拦截。如您是在测试 短时间高频访问验证码,或者设备多开、挂代理等都会命中验证码的风险检测。
滑块验证码一共有四种样式(style),embed 嵌入式(默认)、inline 内联式、popup 弹出式以及oneclick 触发式。 详细demo体验地址:https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/demo/
请前端同学查看是否传入了height选项,目前验证码不支持自定义高度。传入height会影响样式布局。
降级是针对网络异常,加载不到正常图片,故提供降级图片不影响用户感知,也可以通过开发者工具(或者通过wireshark、fiddler等抓包工具)确认api/a
接口请求是否正常。
请联系客服开通自定义Logo权限,权限开通后可在调用验证码SDK的初始化配置选项中开启_noLogo
选项,例如:
_dx.Captcha(document.getElementById('demo', {
appId: 'xxxx',
_nologo: true
})
可能是z-index设置问题,因为层级太高了,覆盖了验证码,我们的层级大概在1000左右,要么可以其他层级调低一点,要么把验证码调高,验证码层级调高的话就在初始化的时候加一个zIndex的配置, zIndex: 11000
可以通过在初始化选项中配置scale
参数来解决,例如:
var demo = _dx.Captcha(el, {
// appId 等配置项
scale: Math.floor(document.body.clientWidth / 300) // 根据屏幕宽度适配
});
_dx undefined
报错如何处理?_dx undefined
的原因是captcha-ui/index.js
脚本没有加载完成就使用了_dx
变量。所以请确保在captcha-ui/index.js
加载完成之后再调用_dx.Captcha
相关逻辑。
推荐的最佳实践:
<script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js" crossorigin="anonymous"></script>
放到<head></head>
标签内引用。window.onload = function() { /* _dx.Captcha() */}
中调用验证码初始化逻辑。style
等于inline
时样式问题原因定位,请确认下_dx.Captcha(el ,options)
中el
的样式,例如使用了margin: 0 auto
会导致发生上面的定位偏移。
在uniapp官方插件市场可以直接搜索“顶象图形移动验证码”,点击查看详情。
可点击此验证码配置检查工具,输入配置项后进行检查。若正常可正常展示验证码,否则会提示对应异常。
检查assets文件是否集成,混淆配置是否正确。 如日志显示:I/libjdi sdk init cache failed,如有请检查 SDK的assets文件是否集成。
Map<String, Object> customLanguage = new HashMap<String, Object>();
customLanguage.put("verify_success", "验证成功");
config.put("customLanguage", customLanguage);
dxCaptcha.initConfig(config);
Map<String, Object> customLanguage = new HashMap<String, Object>();
customLanguage.put("smart_checking", "智能检测中");
config.put("customLanguage", customLanguage);
dxCaptcha.initConfig(config);
验证码版本1.7.2以上的可以如下设置
config.put("DXKeyRiskEnable", false);
dxCaptcha.initConfig(config);
请在AndroidManifest的Application中新加一句:
<application
...
android:usesCleartextTraffic="true"
...
/>
我们提供了各种架构的so,具体使用还是要看您原来项目lib用了哪些架构。比如原项目中有v7a和x86目录,那您只需要选择这两个对应的so就行。
Android: https://cdn.dingxiang-inc.com/files/10062/DXCaptcha-SDK-for-Android-RN.pdf
麻烦确认下是不是配置了proguard,如果配置了需要看下有没有将captcha sdk相关的类排除了。
NSMutableDictionary *config = [NSMutableDictionary dictionary];
[config setObject:@{@"verify_success": @"验证成功",@"xxx": @"xxx"} forKey:@"customLanguage"];
NSMutableDictionary *config = [NSMutableDictionary dictionary];
[config setObject:@{@"smart_checking": @"智能检测中",@"xxx": @"xxx"} forKey:@"customLanguage"];
[config setObject:@"false" forKey:@"DXKeyRiskEnable"];
答:若接入微信小程序插件版本号是v1.2.13 之前的,则首次验证码类型只支持滑块验证,二次验证方式只支持图文点选验证。 若接入微信小程序插件版本号为 v1.2.13,则首次验证码类型支持滑块验证和图文点选验证,二次验证只支持图文点选验证。 如有权限,请确认小程序的配置验证方式正确,可在 控制台->无感验证->场景管理页面 ,选择对应的场景(你所接入的小程序名)来编辑验证方式。 如没有权限可联系售后确认。
答:小程序ConstIDServer地址以 /udid/ w1 结尾,如https://host/udid/w1。
答:是传入的Appid 错误,应填写在顶象控制台创建的产品Appid。 可以登录控制台,在系统管理菜单下进入产品管理页面,查看对应产品的Appid。
答:可以在开发者工具关闭域名校验,或者添加下域名白名单。
答:在app.json中声明插件时,修改版本号即可
{
"plugins": {
"captcha": {
"version": "1.3.4",
"provider": "wxbf8483dfc5ac6817"
}
}
}
答:新版插件对captchaShow这个参数做了判断,当captchaShow=true,才支持回调。
答:支付宝小程序不支持开启二次验证,需要在控制台选择对应的支付宝小程序接入的appId,关闭二次验证。
答:请参考Demo示例:https://cdn.dingxiang-inc.com/files/15284/demo.tgz
<script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js" crossorigin="anonymous"></script>
注意:由于验证码 JS 会不定期升级更新,请直接引用顶象 CDN 上的资源,以便及时获得最新安全防护。不要将 JS 文件下载到自己服务器使用
假设页面上有一个 <div id="demo"></div>
,则可以像下面这样初始化验证码:
// 类组件使用componentDidMount
useEffect(() => {
(_dx || window._dx).Captcha(document.getElementById('demo'), {
// appId, 在控制台应用管理或应用配置模块获取
appId: "12610a3853150e888ccd0c6d4c415626",
success: token => {
// 获取验证码token,用于后端校验,注意获取token若是sl开头的字符串,则是前端网络不通生成的降级token,请检查前端网络及apiServer地址。
console.log(token);
}
});
}, [])
// 类组件方式
class App extends React.Component {
componentDidMount() {
(_dx || window._dx).Captcha(document.getElementById('demo'), {
// appId, 在控制台应用管理或应用配置模块获取
appId: "12610a3853150e888ccd0c6d4c415626",
success: token => {
// 获取验证码token,用于后端校验,注意获取token若是sl开头的字符串,则是前端网络不通生成的降级token,请检查前端网络及apiServer地址。
console.log(token);
}
});
}
}
初始化完成后,验证码组件会被插入到 <div id="demo"</div>
中。
完整实例演示地址 包含类组件和函数式组件写法
<script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js" crossorigin="anonymous"></script>
注意:由于验证码 JS 会不定期升级更新,请直接引用顶象 CDN 上的资源,以便及时获得最新安全防护。不要将 JS 文件下载到自己服务器使用
假设页面上有一个 <div ref="demo"></div>
,则可以像下面这样初始化验证码:
mounted() {
_dx.Captcha(this.$refs.demo, {
// appId, 在控制台应用管理或应用配置模块获取
appId: "appId",
apiServer: 'https://xxx.dingxiang-inc.com',
success: token => {
// 获取验证码token,用于后端校验,注意获取token若是sl开头的字符串,则是前端网络不通生成的降级token,请检查前端网络及apiServer地址。
console.log(token);
}
});
}
初始化完成后,验证码组件会被插入到 <div ref="demo"</div>
中。
完整演示项目地址:https://gitee.com/noscripter/vue-captcha
文档版本: 3e5bf23e