阿里云滑块图形验证码2.0 vue对接和问题处理

阿里云滑块图形验证码2.0 vue对接

官方提供了相关对接方法和vue版的对接方案(官网地址)，
在这里插入图片描述
按照以上方式很快就能对接完成。

遇到的问题

这个滑块图形验证码，有一个很重要的额问题，就是和后端校验接口的时候会出现captchaKeyId: null的情况，经过分析，找到了原因。

方案一：问题1 如果在同一浏览器tab下，多次操作报错

或者阿里云的token过期之后(10分钟有效)，在此唤起图形验证码就会出现如上情况captchaKeyId: null，图形验证校验始终失败，即使刷新也无法解决，需要重新切换浏览器tab重新执行才可以。
导致以上问题的原因是：图形验证码会给我们浏览器注入cookie,为了安全，这个cookie会根据当前浏览器生成deviceToken来保证当前操作是唯一的。这样就出现captchaKeyId为空的情况。

方案二: 就是动态插入script的方法,多次操作问题较多。

可能有人感觉直接在html页面中引入这个https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js不优雅，可能采用dom动态插入script标签的做法去实现(新插入script时需要把之前的清除掉然会重复插入很多)，这个方法同样会出现上述问题，而且更严重，会导致即使强制刷新浏览器的情况下，校验失败。
(如何动态插入script，以及如何避免多次重复插入，就是每次插入之前，删除已经插入的相关script标签，因为AliyunCaptcha还会依赖插入其他js）

在这里插入图片描述

解决方案：

官方文档给出了验证码实例的一些方法，这个很有用。
过十分钟内刷新验证码。

captcha.destroyCaptcha(); // 销毁验证码
 pageInit();  // 重新再页面插入AliyunCaptcha，并初始化
 setTimeout(() => {
   captcha.show();  // 显示验证码
 }, 1000);

https://help.aliyun.com/zh/captcha/captcha2-0/user-guide/faq?spm=a2c6h.13066369.question.5.99302735ozMydz#acewk
验证码实例的方法
以上方法，我可自行控制验证码的销毁和显示隐藏等操作。
destroyCaptcha 方法很有用，当出现以上问题之后，我们可以尝试销毁验证码之后，重新刷新页面之后，调用show方法再次显示出验证码。
获取实例方法如下：

 getInstance: (getInstance) => {
   captcha = getInstance;  // 获取验证码实例
   showForm.value = true;
 },

captcha 就是验证码实例。

通过以上方法就可以可以很好的控制验证码了。

但是实际开发中，我遇到的问题是，验证码和后端校验时，参数都可以很好的传递。但是后端接口返回captchaKeyId经常为空。经过排查可能时接口延时造成的。通过查看文档因该captchaVerifyCallback 在校验回调里面，返回Promise.resove()去返回数据，看到这里说明确实有延迟问题。这里可能只是一个解决方案。
captchaKeyId 为 null的问题任然还是出现，经过我的排查，看到文档说：初始化方法中添加immediate: true。
经过修改配置，增加该配置，问题出现的频率小的多了。
初始化配置

综上所述，问题解决。

阿里云滑块图形验证码2.0 vue对接和问题处理