h5&&小程序接入极验,防止恶意发送短信,提高安全

在日常业务开发中我们肯定经常遇到用户登录需求,尤其是运营活动之类的前端页面,不可绕开的是根据手机号发送验证码,为了避免发送验证码被强刷,故需要接入极验插件,个人总结了极验的真实使用场景,供大家参考,避免入坑
极验官方文档地址: https://docs.geetest.com/sens...

h5极验配置

  • 在官方文档中下载gt文件(此gt文件放在服务端的sdk中,自己clone下来从里面copy出来),放到自己的项目中,我是放在公共的文件下的,

h5&&小程序接入极验,防止恶意发送短信,提高安全_第1张图片


  • 然后某个页面使用的话直接引用注入,例如我是放在我的这个页面中,直接引用的,gt文件是个立即执行函数挂载在window上的h5&&小程序接入极验,防止恶意发送短信,提高安全_第2张图片

  • 准备工作已经做完,接下来该初始化极验的实例(极验的原理是,服务端获取官方的sdk去签名一次,然后接入接口api1,完成初始化)h5&&小程序接入极验,防止恶意发送短信,提高安全_第3张图片

  • 接下来我们封装下api1接口(由你们服务端提供,主要用来获取gtchallengesuccess字段初始化极验)h5&&小程序接入极验,防止恶意发送短信,提高安全_第4张图片

  • 然后在每次发送验证码(api2你们后端发送验证码接口必须是post,如果是get,转义掉)切记每次发送验证码按钮点击前都需要从新获取api1从新初始化极验证h5&&小程序接入极验,防止恶意发送短信,提高安全_第5张图片

  • 当极验初始化好ready后直接吊起极验弹框(这里我使用的是product模式)想配置其他模式可参考官方文档(float、popu、custom、bind),用户手动验证后极验会有返回,提供三个回调,success,error,close三个回调用来处理你的逻辑代码h5&&小程序接入极验,防止恶意发送短信,提高安全_第6张图片**注意这里只要操作过极就调用它的distory这样就ok了

小程序配置稍有不同(因为没有dom,无法插入极验dom,故需要预先注册组件),后续更新

你可能感兴趣的:(javascript,vue.js,小程序)