常见问题

产品QA

Q1: 验证码的生命周期是怎样的？

生命周期流程图如下：

整个流程中只需初始化一次验证码，无需再多次调用initAliyunCaptcha方法。阿里云验证码2.0不支持单个页面注册多个验证码实例，多次调用初始化方法会重复添加元素和注册事件，造成验证表现异常。

如果出现一次验证流程发出了多个验证请求，可以考虑为重复初始化的问题，需要排查触发调用初始化方法的按钮是否做了防抖处理。

Q2：一个页面有多处用到验证码怎么处理？

• 方法1：使用弹出式模式（popup），将传入initAliyunCaptcha方法的button元素设置为一个隐藏元素，然后在需要触发验证码的元素上绑定相关事件（一般为点击事件），在事件回调函数中用JavaScript触发上述button元素的点击事件，即可触发验证码弹窗，整个页面共享一个验证码实例。

• 方法2：将验证码封装为一个组件，在需要调用的地方使用，初始化相关参数可作为props传入，验证流程完毕后需要将验证码组件卸载（从dom中移除）。更多详情，请参见客户端接入Demo示例下载。

Q3：手机验证码发送场景怎么接入验证码？

详情请参见下载发送手机短信场景Demo示例（React）。

Q4：如何手动刷新/销毁验证码，或者手动弹出/关闭验证码弹窗？

调用验证码实例对应方法。其中，无痕模式首次验证不支持下列方法。

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里返回了验证结果信息，但是为什么验证码没有反应了？

可能的原因如下：

1. return语句是在如ajax的success回调函数中声明的，而外面的captchaVerifyCallback是没有return出去的，因此验证码SDK获取不到验证结果，造成验证流程阻塞。那么需要将返回体封装成一个promise，然后在回调中将结果resolve出去即可。

   正确示例

   async function captchaVerifyCallback(captchaVerifyParam) {
     return new Promise((resolve) => {
       $.ajax({
         Url: 'xxxx',
         data: 'xxxx',
         success: (result) => {
           resolve({
             captchaResult: true,
             bizResult: false,
           });
         },
       });
     });
   }

   错误示例

   async function captchaVerifyCallback(captchaVerifyParam) {
     $.ajax({
       Url: 'xxxx',
       data: 'xxxx',
       success: (result) => {
         return {
           captchaResult: true,
           bizResult: false,
         };
       },
     });
   }

2. 嵌入式下，如果需要滑动完成/图片点选完成后立即发送请求，则需要在初始化方法中添加immediate: true参数。