GeeTest 极验验证 相关使用和利用ajax动态刷新重置

GeeTest  

GeeTest 极验使用

  • 官方文档
    1. 详细的安装步骤官网都有原生案例,不要想的太复杂跟着一步步,配置到你的项目中,可以引入,或者使用命名空间,看个人喜好
  • 需求: 实现弹窗中的 geetest 在不刷新页面的情况下 动态刷新 官网上没有提供思路和详细教程,我的解决方案如下
    1. 1.首先采用ajax调用,并封装成方法
    2. //定义标识状态
    3. var geeTestStatus = '';
    4. function getGeeTest() {
    5. //置空标识
    6. geeTestStatus = '';
    7. $.ajax({
    8. url: "你的网址?type=pc&t=" + (new Date()).getTime(), // 加随机数防止缓存
    9. type: "get",
    10. dataType: "json",
    11. success: function (data) {
    12. // 使用initGeetest接口
    13. // 参数1:配置参数
    14. // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
    15. initGeetest({
    16. gt: data.gt,
    17. challenge: data.challenge,
    18. product: "popup", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
    19. offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注
    20. // 更多配置参数请参见:https://docs.geetest.com/install/apirefer/api/web
    21. }, function (captchaObj) {
    22. // $("#registerDivSubmit").closest('form').submit(function(e) {
    23. captchaObj.onSuccess(function () {
    24. var result = captchaObj.getValidate();
    25. //一级验证成功改变标识状态
    26. if (result) {
    27. geeTestStatus = 1;
    28. }
    29. });
    30. // });
    31. captchaObj.appendTo('#captcha');
    32. captchaObj.onReady(function () {
    33. // DOM 准备好后,隐藏 #loading-tip 元素
    34. // 仅作示例用,用您适合的方式隐藏即可
    35. document.getElementById('loading-tip').style.display = 'none';
    36. });
    37. });
    38. }
    39. });
    40. }
    41. 2. 自定义刷新按钮或者给某个事件后面增加触发刷新事件
    42. 需要注意的是,要将原有的 id="captcha" 元素置空,并移除所有绑定事件
    43. $('#captcha').empty();
    44. $('#captcha').unbind();
    45. 3.form表单 submit 提交验证时
    46. 判断状态标识阻止提交
    这样就很快速的完成一个弹窗 极验并动态刷新,对安全性要求高的可以做二次验证,二次验证我还没研究


评论 0

发表评论

Top