极验验证_验证码平台

极验验证_验证码平台发送验证码下面是具体实现步骤: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)


相关推荐

  • php短信接口代码

    php短信接口代码

  • Keil5新建STM32工程(详细图解)[通俗易懂]

    Keil5新建STM32工程(详细图解)[通俗易懂]一、下载ST官方库    首先注册账号登录,然后点击产品、微控制器;如图       接着右侧的工具与软件;嵌入式软件,并选择STM32,如图。 我的是STM32F1系列,选择如图这个   获取软件   然后下载即可。 二、安装keil   不介绍。相信都安装好了。三、准备工作       新建project文件夹,并在里面新建三个文件夹,CMSIS(存放内核函数及启动引导文件)…

  • android sqlite加密数据库,Android Sqlite数据库加密

    android sqlite加密数据库,Android Sqlite数据库加密Android使用的是开源的SQLite数据库,数据库本身没有加密,加密思路通常有两个:1.对几个关键的字段使用加密算法,再存入数据库2.对整个数据库进行加密SQLite数据库加密工具:收费工具:免费工具:SQLCipher使用:SQLCipher是完全开源的软件,提供256-bitAES加密源码编译:1.OpenSSL编译SQLCipher源码编译需要依赖OpenSSL提供的libcry…

  • Linux 下的make命令与Makefile

    Linux 下的make命令与Makefile概述博客内容包含linux下make命令的使用与makefile的书写规则等,希望通过本文档使读者对make命令makefile文件有进一步了解,由于鄙人经验学识有限文档中会有描述不准确以及理解偏差,欢迎读者指正。fythons@sina.com从一只猫说起hellokitty linux系统中的make命令与makefile文件make与makefile 在linux系统…

  • 程序猿生存定律–交换是职场里一切的根本

    程序猿生存定律–交换是职场里一切的根本

    2021年11月13日
  • leetcode-172. 阶乘后的零[通俗易懂]

    leetcode-172. 阶乘后的零[通俗易懂]给定一个整数 n,返回 n! 结果尾数中零的数量。示例 1:输入: 3输出: 0解释: 3! = 6, 尾数中没有零。示例 2:输入: 5输出: 1解释: 5! = 120, 尾数中有 1 个零.说明: 你算法的时间复杂度应为 O(log n) 。class Solution {public: int trailingZeroes(int n) { int ans = 0; for(int i = 5;i <= n;i += 5){

发表回复

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

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