极验验证_验证码平台

2022-09-20 19:20:52 浏览数 (1)

大家好，又见面了，我是你们的朋友全栈君。

发送验证码

  1. 点击获取验证码，发送请求 获取人机验证码（极验 API1），获取用来初始化验证码的参数
  2. 调用极验的 JavaScript SDK 提供的 API，通过上一步得到的数据初始化验证码
  3. 用户通过人机交互验证之后，极验会给你返回一些验证的结果数据，然后调用你的 获取短信验证码 (极验 API2） 接口，如果正确，短信就可以发出去了
  4. 按钮倒计时效果

下面是具体实现步骤：

  1. 点击获取验证码按钮，发送请求，获取用来初始化验证码的参数
代码语言：javascript复制
handleSendCode () { const { mobile } = this.form axios({ method: 'GET', url: `http://ttapi.research.itcast.cn/mp/v1_0/captchas/${mobile}` }).then(res => { const { data } = res.data }) }

请求结果数据如下：

代码语言：javascript复制
{ "message": "xxx", "data": { "success": "xxx", "gt": "xxx", "challenge": "xxx", new_captcha: "xxx" } }
  1. 加载极验提供的 JavaScript SDK 到项目中
  • 极验 JavaScript SDK 文件地址

将 gt.js 文件下载到项目的 src/vendor 目录中，然后在 src/views/login/index.vue 中加载该文件。

小提示：我们建议把没有提供 npm 包的第三方内容都放到项目的 src/vendor 目录中

代码语言：javascript复制
... # gt.js 会提供一个全局函数 initGeetest import '@/vendor/gt.js' ...

一个小插曲：当你在项目中引入 gt.js 模块之后你会发现在终端中输出很多（400 ）语法格式错误，这是因为 ESLint 也把 gt.js 当作我们自己写的 JavaScript 文件去进行代码格式检查了。

极验虽然是一个第三方文件，但是该文件是我们手动下载到项目中（非npm模块）去加载使用的，所以 ESLint 也会检查该文件的代码规则，在这里是没有必要的，代码格式检查应该主要针对我们的代码文件，解决方法就是在项目的根目录创建一个文件 .eslintignore并写入以下内容：

代码语言：javascript复制
src/vendor/gt.js

.eslintignore 文件类似于 .gitignore，它的作用是手动配置 ESLint 不需要校验的代码文件。

配置好以后，重启服务就好了。

  1. 查看极验文档，体验官方demo
  2. 根据文档中的说明，调用 initGeetest 函数初始化极验验证码
代码语言：javascript复制
handleSendCode () { const { mobile } = this.form axios({ method: 'GET', url: `http://ttapi.research.itcast.cn/mp/v1_0/captchas/${mobile}` }).then(res => { const { data } = res.data window.initGeetest({ // 以下配置参数来自服务端 SDK gt: data.gt, challenge: data.challenge, offline: !data.success, new_captcha: data.new_captcha, product: 'bind' // 隐藏，直接弹出式 }, (captchaObj) => { this.captchaObj = captchaObj captchaObj.onReady(function () { // 验证码ready之后才能调用verify方法显示验证码 captchaObj.verify() }).onSuccess(function () { // 人机交互验证通过 console.log(captchaObj.getValidate()) }).onError(function () { // your code }) }) }) }
  1. 在极验的 onSuccess 回调函数中，将调用 captchaObj.getValidate() 获取到的结果参数作为发送短信验证码接口的请求参数发出获取短信验证码请求
代码语言：javascript复制
handleSendCode () { const { mobile } = this.form axios({ method: 'GET', url: `http://ttapi.research.itcast.cn/mp/v1_0/captchas/${mobile}` }).then(res => { const { data } = res.data window.initGeetest({ // 以下配置参数来自服务端 SDK gt: data.gt, challenge: data.challenge, offline: !data.success, new_captcha: data.new_captcha, product: 'bind' // 隐藏，直接弹出式 }, (captchaObj) => { captchaObj.onReady(function () { // 验证码ready之后才能调用verify方法显示验证码 captchaObj.verify() }).onSuccess(function () { // 人机交互验证通过 const { geetest_challenge: challenge, geetest_seccode: seccode, geetest_validate: validate } = captchaObj.getValidate() axios({ method: 'GET', url: `http://ttapi.research.itcast.cn/mp/v1_0/sms/codes/${mobile}`, params: { challenge, validate, seccode } }).then(res => { console.log(res.data) // 开启倒计时效果 }) }).onError(function () { // your code }) }) }) }
  1. 不出意外的话，你应该可以收到短信验证码了。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/166916.html原文链接：https://javaforall.cn

短信 验证码 api eslint sdk

0 人点赞