极验 基础使用 vue项

项目要求要用B站那种滑块验证，为了方便我就找到了极验，其实也不方便，反正不管咋说人家就是搞安全验证啥的，咋也比我这种搬砖的要有含量吧，反正现在也有时间，就搞搞。

1 安装 PHP SDK

使用命令从Github导入完整项目

git clone https://github.com/GeeTeam/gt3-php-sdk.git

从极验管理后台获取您的公钥（id）和私钥（key）, 并在代码中配置。配置文件路径如下：/config/config.php

导入class.geetestlib.php文件到你的项目中

如果选择PC端部署，则将CAPTCHA_ID和PRIVATE_KEY后面的字符串替换成自己在后台注册的ID和Key。
如果在移动端部署，则将MOBILE_CAPTCHA_ID和MOBILE_PRIVATE_KEY后面的字符串替换成自己在后台注册的ID和Key。

以上是后端干的活，我就照猫画虎。

2 客户端安装使用

引入初始化函数 gt.js文件存放于服务端SDK中
注： 行为验证要求初始化在业务页面加载时同时初始化，否则验证无法读取用户在业务页面操作的行为数据，会导致验证策略失效。
01 gt.js 下载地址
02 将gt.js放到vue项目中src - vendor -gt.js目录中
03 然后再我们使用的页面中引用gt.js

import '@/vendor /gt.js'

ajax({
    url: "API1接口 后端给的接口 ",
    type: "get",
    dataType: "json",
    success: function (data) {
        //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
        initGeetest({
            // 以下配置参数来自服务端 SDK
            gt: data.gt,
            challenge: data.challenge,
            offline: !data.success,
            new_captcha: true
             product: "bind" //弹出方式 
        }, function (captchaObj) {
            // 这里可以调用验证实例 captchaObj 的实例方法
            captchaObj
              .onReady(function() {
                //验证码ready之后才能调用verify方法显示验证码
                  captchaObj.verify(); //显示验证码
              })
              .onSuccess(function() {
                //成功操作，这个就看我们的项目需求，
                比如我们验证成功，就根据手机号，进行验证码验证，就可以直接进行验证
              })
              .onError(function() {
                //那这个就是我们更正常了，
              });
        })
    }
})

弹出框就这样OK了，来吧让我们快乐的搬砖吧。