极验验证_验证码平台

极验验证_验证码平台发送验证码下面是具体实现步骤: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. 不出意外的话,你应该可以收到短信验证码了。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166916.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • ram和rom的区别_RAM和ROM各有什么特点

    ram和rom的区别_RAM和ROM各有什么特点RAM和ROM总结一、在解释之前先备注一些缩写的全称便于记忆:1、EPROM:(ElectricallyProgrammableRead-Only-Memory)电可编程序只读存储器2、EE

  • springboot框架的理解_谈谈你对springmvc的理解

    springboot框架的理解_谈谈你对springmvc的理解1.起源SpringBoot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置。用我的话来理解,就是SpringBoot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像Maven整合了所有的Jar包,SpringBoot整合了所有的框…

  • 常用的jquery鼠标事件_html5回到顶部

    常用的jquery鼠标事件_html5回到顶部jQuery-doubleTap是一款非常有用的鼠标双击事件或移动设备的触摸双击事件检测jQuery插件。该插件通过对“click”和“touch”的简单代码优化来实现鼠标双击或触摸双击事件的检测。使用方法要检测双击事件需要在页面中引入jQuery和jquery-doubleTap.js文件。初始化插件jquery-doubleTap.js的实现代码非常简单:首先判断是鼠标点击事件还是触摸点击事件…

  • 勤快的love枫[ZJOI2007]

    勤快的love枫[ZJOI2007]

  • dubbo原理详解_dubbo的作用

    dubbo原理详解_dubbo的作用alibaba有好几个分布式框架,主要有:进行远程调用(类似于RMI的这种远程调用)的(dubbo、hsf),jms消息服务(napoli、notify),KV数据库(tair)等。这个框架/工具/产品在实现的时候,都考虑到了容灾,扩展,负载均衡,于是出现一个配置中心(ConfigServer)的东西来解决这些问题。基本原理如图: 在我们的系统中,经常会有一些跨

    2022年10月29日
  • journalctl清空日志

    journalctl清空日志Howtoclearjournalctl步骤journalctl–flushjournalctl–rotatejournalctl–vacuum-time=1sjournalctl–vacuum-time=2djournalctl–vacuum-size=50M

发表回复

您的电子邮箱地址不会被公开。

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