极验

1. 人机交互验证介绍

什么是人机交互验证：

极验是一款人机交互页面效果系统，用户的行为没有满足要求，不给与下一步执行的机会，大致效果如下，用户如果没有把目标滑到指定区域就禁止下一步操作。

之前的传统网站，用户输入 用户名、密码、验证码 就可以登录系统了，这样的网站不安全，有网络爬虫技术，可以通过“后端程序代码” 模拟账号登录，进而获得网站的信息。

现在比较先进的网站，都使用“人机交互验证”功能，对登录者提出高要求，不让模拟登录得逞，只允许“实在的人”来登录系统并应用。

极验官网：https://www.geetest.com/

好处：防止账号暴力破解，不给模拟登录机会，增强系统的安全性。

2. 极验的使用

2.1. 获取并导入gt.js脚本

步骤：

获取好的gt.js文件放到 views/login/ 目录下
对不遵守eslint规范的代码稍加改动

说明：

eslint标准规范中有如下要求：

函数传递参数，不能直接传递boolean值，相反可以声明变量传递(gt.js文件中一共有4处，注意调整)
要通过 “===”恒等于方式判断两个字是否相等(上例为了使得数据类型是严格的字符串，额外调用了toString()方法，请注意)

不要设置空的回调函数实参，没有意义

2.2. 流程分析

人机交互验证执行流程:

人机交互验证步骤：

前端通过axios向后端服务器发起请求，后端服务器会返回极验请求的秘钥信息。
前端将极验秘钥信息 + 用户行为 一并提交给极验服务器做判断，查验行为是否正确。

2.3. 获取极验秘钥信息

步骤：

把账号真实校验和登录系统逻辑代码封装为独立的loginAct方法，方便开发。
axios根据接口发送请求，获得极验请求的秘钥信息 (4样)

// 登录系统
login () {// 表单要做校验this.$refs.loginFormRef.validate(valid => {if (!valid) { return false }// 1. 人机交互验证// axios获得极验的秘钥信息let pro = this.$http({url: '/mp/v1_0/captchas/' + this.loginForm.mobile,method: 'get'})pro.then(result => {console.log(result) // 极验的秘钥信息}).catch(err => {return this.$message.error('获取极验秘钥失败：' + err)})// 2. 验证账号，登录系统this.loginAct()})
}

// 账号真实性校验，并登录系统
loginAct () {// 服务器端账号真实校验let pro = this.$http({url: '/mp/v1_0/authorizations',method: 'POST',data: this.loginForm})pro.then(result => {// 客户端浏览器把服务器端返回的秘钥等相关信息通过 sessionStorage 做记录，表明是登录状态window.sessionStorage.setItem('userinfo', JSON.stringify(result.data.data))// 进入后台系统this.$router.push({ name: 'home' })}).catch(err => {this.$message.error('手机号码或验证码错误:' + err)})
}

2.4. 创建校验窗口并应用

绘制极验人机交互窗口，用户输入完毕账号等信息，单击登录按钮后要显示极验窗口并完成验证和登录系统。

步骤：

在login/index.vue中向引入gt.js文件
对返回的极验请求秘钥信息做接收处理(对象解构赋值)
调用initGeetest() 函数，生成极验窗口
1. 添加product:‘bind’ // 设置窗口样式
2. verify()等方法调用 // 生成校验窗口

具体代码(login/index.vue)：

// 对gt.js文件进行导入
// gt.js文件本身没有做导出动作，所以就直接导入即可，此时系统增加一个全局变量，名称为 initGeeTest
import './gt.js'
……
login () {// 表单要做校验this.$refs.loginFormRef.validate(valid => {if (!valid) { return false }// 1. 人机交互验证// axios获得极验的秘钥信息let pro = this.$http({url: '/mp/v1_0/captchas/' + this.loginForm.mobile,method: 'get'})pro.then(result => {// console.log(result) // 极验的秘钥信息// 从result里边解构下述的data对象出来(对象结构赋值)let { data } = result.data// 请检测data的数据结构， 保证data.gt, data.challenge, data.success有值window.initGeetest({// 以下配置参数来自服务端 SDKgt: data.gt,challenge: data.challenge,offline: !data.success,new_captcha: true,product: 'bind' // 设置验证窗口样式}, captchaObj => {// 这里可以调用验证实例 captchaObj 的实例方法captchaObj.onReady(() => {// 验证码ready之后才能调用verify方法显示验证码(可以显示窗口了)captchaObj.verify() // 显示验证码窗口}).onSuccess(() => {// 行为校验正确的处理// B. 验证账号，登录系统this.loginAct()}).onError(() => {// 行为校验错误的处理})})}).catch(err => {return this.$message.error('获取极验秘钥失败：' + err)})})
},

效果：

注意：

在login方法内部为了使得this仍然指引VueComponent组件实例对象，要把相关的function都变为箭头函数。

人机交互验证——极验的介绍和使用相关推荐

极验接入教程纯html,在AspNetCore中使用极验做行为认证的验证流程
极验验证极验验证是一种在计算机领域用于区分自然人和机器人的,通过简单集成的方式,为开发者提供安全.便捷的云端验证服务. 与以往传统验证码不同的是,极验通过分析用户完成拼图过程中的行为特征,通过数据分 ...
使用极验【行为验证】实现人机交互验证
官网:https://docs.geetest.com/sensebot/apirefer/api/web 流程与原理待补充-- 方法 1.引入极验js,调用初始化方法 require(" ...
乱序图片极验_极验验证吴渊：传统图片验证方式已经无效了！
吴渊,极意网络CEO 黑五月频发的宕机门告诉我们:数据安全,所有创业者都应该关注! 让我们来听听IDG资本的两位投资人大佬的深刻分析,以及5家创业公司CEO/CTO大拿的深切呼吁吧!--这里不止有干货 ...
极验验证简介(待续)
百度百科介绍: 极验验证是一种在计算机领域用于区分自然人和机器人的,通过简单集成的方式,为开发者提供安全.便捷的云端验证服务. 与以往传统验证码不同的是,极验通过分析用户完成拼图过程中的行为特征,通过 ...
iOS实现简书的登录验证方式(极验验证)
开篇我们登录简书的时候就会看到如下类似的验证方式,个人还是很喜欢这种验证方式的,想着如果把它自如自己设计的软件中还是不错的,但是我们要怎么实现这种验证效果呢,今天就来介绍一下. 图形验证码.gif ...
破解极验三代滑动验证，成功率百分之百（三）：构造参数，发起请求
声明原创文章,请勿转载! 本文内容仅限于安全研究,不公开具体源码.维护网络安全,人人有责. 环节概述首先我们还是需要使用请求转发工具,把目标代码替换为我们处理过的代码. 观察验证过程中触发了哪些请 ...
极验验证滑块破解，canvas
前言请勿用于商务用途哦,仅限于学习,否则后果自负哦有两篇关于极验验证滑块破解的文章,在此分享一下: https://www.jianshu.com/p/c8df1194b514 https://w ...
Android极验验证集成【滑块+文字验证】
前言: 先复制一段官网介绍产品介绍极验「行为验证」是一项可以帮助你的网站与APP识别与拦截机器程序批量自动化操作的SaaS应用.它是由极验开发的新一代人机验证产品,它不基于传统"问题-答 ...
极验行为验证的使用方法
1,官方文档 https://docs.geetest.com/install/deploy/server/python 2,使用方法(基于flask) 1,从Github: gt3-python-s ...

人机交互验证——极验的介绍和使用

极验

1. 人机交互验证介绍

2. 极验的使用

2.1. 获取并导入gt.js脚本

2.2. 流程分析

2.3. 获取极验秘钥信息

2.4. 创建校验窗口并应用

人机交互验证——极验的介绍和使用相关推荐

最新文章

热门文章