常见问题
本文汇总了使用验证码时的常见问题。
产品QA
Q1: 验证码的生命周期是怎样的?
生命周期流程图如下:
整个流程中只需初始化一次验证码,无需再多次调用initAliyunCaptcha
方法。阿里云验证码2.0不支持单个页面注册多个验证码实例,多次调用初始化方法会重复添加元素和注册事件,造成验证表现异常。
如果出现一次验证流程发出了多个验证请求,可以考虑为重复初始化的问题,需要排查触发调用初始化方法的按钮是否做了防抖处理。
Q2:一个页面有多处用到验证码怎么处理?
方法1:使用弹出式模式(popup),将传入
initAliyunCaptcha
方法的button
元素设置为一个隐藏元素,然后在需要触发验证码的元素上绑定相关事件(一般为点击事件),在事件回调函数中用JavaScript
触发上述button
元素的点击事件,即可触发验证码弹窗,整个页面共享一个验证码实例。方法2:将验证码封装为一个组件,在需要调用的地方使用,初始化相关参数可作为
props
传入,验证流程完毕后需要将验证码组件卸载(从dom中移除)。更多详情,请参见客户端接入Demo示例下载。
Q3:手机验证码发送场景怎么接入验证码?
详情请参见下载发送手机短信场景Demo示例(React)。
Q4:如何手动刷新/销毁验证码,或者手动弹出/关闭验证码弹窗?
调用验证码实例对应方法。其中,无痕模式首次验证不支持下列方法。
方法名 | 说明 | 示例 |
show | 显示验证码元素/蒙板 | captcha.show() |
hide | 隐藏验证码元素/蒙板 | captcha.hide() |
refresh | 刷新验证码(无痕形态不支持) | captcha.refresh() |
destroyCaptcha | 销毁验证码(实例及元素) | captcha.destroyCaptcha() |
Q5:APP端接入,如何在APP侧进行验证请求?
可以在captchaVerifyCallback
中调用自定义Java接口testJsInterface
(安卓)或通过WkScriptMessageHandler
协议实现JavaScript
与WKWebView
交互的方法(iOS),将captchaVerifyParam
透给APP侧,然后关闭验证码H5窗口并发起验证请求,获取到验证结果后APP侧自行提示验证是否通过,如不通过则再次弹出H5窗口重新验证即可。该场景下不建议使用无痕验证模式,因为每次验证均会重新初始化验证码(新的验证码周期),导致每次均为无痕验证,即使无痕不通过下次验证也不会进入二次验证形态,因此防护效果稍弱。
Q6:在触发验证码弹窗之前需要做自定义业务操作怎么处理?
可以将传入initAliyunCaptcha
的button
元素设置为一个隐藏元素,然后在需要触发验证码的元素上绑定相关事件(一般为点击事件), 在事件回调中做业务操作(如业务参数校验),通过之后再用JavaScript
触发上述button
元素的点击事件。
Q7:无痕模式的验证逻辑是怎样的?
无痕验证流程图如下:
captchaResult为false,必会自动弹出二次验证。
captchaResult为true,后续验证都会刷新成二次验证的模式,区别如下:
bizResult为false,嵌入式下会自动弹出二次验证,弹出式下不会自动弹出,需要修改业务参数后再点击登录弹出。
bizResult为true,执行onBizResultCallback,做业务提示、跳转等逻辑。
Q8:Uncaught TypeError: Cannot set properties of undefined (setting 'onclick') 报错如何解决?
没找到element或者button元素,这两个元素需要在DOM中存在,初始化参数需要传入正确的元素id。
Q9:设置了slideStyle参数,怎么拼图下的滑块没有生效?
slideStyle参数只对滑块验证码生效,拼图验证码不受该参数影响。拼图验证码的答案为固定的,前端不可以修改图片/滑块的长度和宽度,否则会造成验证异常。
Q10:captchaVerifyCallback里返回了验证结果信息,但是为什么验证码没有反应了?
可能的原因如下:
return语句是在如ajax的success回调函数中声明的,而外面的captchaVerifyCallback是没有return出去的,因此验证码SDK获取不到验证结果,造成验证流程阻塞。那么需要将返回体封装成一个promise,然后在回调中将结果resolve出去即可。
嵌入式下,如果需要滑动完成/图片点选完成后立即发送请求,则需要在初始化方法中添加
immediate: true
参数。