阿里云验证码2.0同一个页面用两个或多个验证码,页面初始化后第一个会失效。控制台创建了两个场景,第一个依然失效?
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
生命周期流程图如下:可以看到整个流程中只需初始化一次验证码,无需再多次调用initAliyunCaptcha方法。阿里云验证码2.0不支持单个页面注册多个验证码实例,多次调用初始化方法会重复添加元素和注册事件,造成验证表现异常。Q2:一个页面有多处用到验证码怎么处理?A2:方法1:使用弹出式模式(popup),将传入initAliyunCaptcha方法的button元素设置为一个隐藏元素,然后在需要触发验证码的元素上绑定相关事件(一般为点击事件),在事件回调函数中用JavaScript触发上述button元素的点击事件,即可触发验证码弹窗,整个页面共享一个验证码实例。方法2:将验证码封装为一个组件,在需要调用的地方使用,初始化相关参数可作为props传入,验证流程完毕后需要将验证码组件卸载(从dom中移除)。参考官方文档最下方demo。https://help.aliyun.com/zh/captcha/captcha2-0/user-guide/add-a-web-or-html5-client-to-alibaba-cloud-captcha-2#3f4fb80115qkn
,此回答整理自钉群“【客】验证码2.0接入咨询”