极验验证_验证码平台

极验验证_验证码平台发送验证码下面是具体实现步骤:handleSendCode(){const{mobile}=this.formaxios({method:'GET',url

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

发送验证码

1674837-9b3f19bfc595a766

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

下面是具体实现步骤:

  1. 点击获取验证码按钮,发送请求,获取用来初始化验证码的参数
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 }) }

请求结果数据如下:

{ "message": "xxx", "data": { "success": "xxx", "gt": "xxx", "challenge": "xxx", new_captcha: "xxx" } } 
 
  1. 加载极验提供的 JavaScript SDK 到项目中

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

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

... # gt.js 会提供一个全局函数 initGeetest import '@/vendor/gt.js' ... 
 

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

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

src/vendor/gt.js
 

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

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

  1. 查看极验文档,体验官方demo
  2. 根据文档中的说明,调用 initGeetest 函数初始化极验验证码

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() 获取到的结果参数作为发送短信验证码接口的请求参数发出获取短信验证码请求
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.net/166916.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 手机号码归属地数据库下载

    手机号码归属地数据库下载一份手机号归属地数据,共有174495条数据,包括中国移动,中国联通,中国电信的(包含152、186、188、189开头的手机号)。其中cardtype字段基本上没有什么用。因为可以通过办理某些业务就可以把如全球通卡转成神州行卡。对于这样的一份数据,你想要怎么利用?如果你只是想做一个手机号归属地查询的功能,那就浪费了。这个收数据库的主要功能就是通过手机号的前7位数字判断出手机号的归属城…

    2022年7月22日
    46
  • 关于jdbc的一些疑问[通俗易懂]

    关于jdbc的一些疑问

    2022年1月26日
    40
  • JavaScript 判断元素是否在数组中

    JavaScript 判断元素是否在数组中

    2021年11月22日
    37
  • 风讯.NET与NETCMS的选择—开源.NET内容管理系统

    风讯.NET与NETCMS的选择—开源.NET内容管理系统最近想要学习做一个网站,本来在某公司实习的时候,boss就要求快速的建立一个非盈利性的门户站点,当时用的是动易的SiteFactory3.0版本,感觉用起来也是很不错的,尤其是后台的可视化编缉做得是相当的到位,内容的采集部分也是很好使,初学者只要是不太笨的基本上就可以快速建立起一个功能比较好的站点了,不过令人没想到的是,建立好站点好以后才真的是恶梦的开始,boss提出要求,对它进行二次的开发,基…

    2022年9月30日
    0
  • github 网络安全_黑客编程语言

    github 网络安全_黑客编程语言这个开源项目是黑客的多合一工具包,包含了各种黑客工具,比如逆向工程、老鼠工具、SQL注入工具等等。声明:该开源项目仅限学习使用,勿用与从事违法活动。开源地址:https://github.com/Z4nzu/hackingtool这个开源项目是教程序员如何优雅地挣零花钱,本开源项目是一本电子书,从副业的重要性、到程序员可能得副业路径,以及知识付费、课程录制等实战案例为基础,打磨的一本程序员副业指南。开源地址:https://github.com/easychen/lean-side-bussiness“Aw

    2022年9月2日
    2
  • RPC协议了解

    RPC协议了解1.RPC概述RPC(RemoteProcedureCallProtocol)远程过程调用协议。通俗的描述是:客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个过程或函数,就像调用本地应用程序中的一样。正确的描述是:一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议。2.RPC特点:2.1)RPC是协议:协议意味着规范。目前典型的RPC实现包括Dubbo、Thrift、Herrty等。但这些实现往往都会附加其他重要功能,例如Dubbo还包括服务管理、访问权限

    2022年5月19日
    58

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号