極驗驗證demo（django+vue）
在使用以前，曾經試過用阿里雲的人機驗證，不過在簽名部分比較複雜，下載sdk後須要本身寫不少，折騰了一下，仍是放棄。而騰訊雲的人機驗證python版本有demo，直接填寫keyhe1secret就可使用，可是demo使用的是web.py的框架，這個以前有了解過，比較好用，可是做者去世了，只有python2版本，沒有3的版本，想了一下即便修改爲3的版本，還要作改爲django的，有點麻煩。網易雲的宣傳上有vue版本的，並且效果看起來不錯，原本想試一下，可是註冊後還要官方經過驗證，等了1天還沒經過，就打算另找方法。javascript
偶然翻看博客，發現有人介紹geetest，看了一下感受上手比較容易，sui遂註冊使用。html
1、簡單註冊使用
geetest官網：https://www.geetest.com/vue
該公司主要是作驗證的。目前開放的是行爲驗證。身份驗證還未開放。java
註冊申請後，得到id和key。在其github項目上下載相應語言和版本，就可以使用。python
文檔看起來也比較清晰jquery
老版本python sdk下載：https://github.com/GeeTeam/gt-python-sdkios
新版本python sdk下載：https://github.com/GeeTeam/gt3-python-sdkgit
這兩個均可以使用python2.7以上的版本，區別在於驗證特性設置有些不一樣。須要注意的是django版本是1.8github
根據以前項目的django是1.11.3版本，修改了sdk中報錯的部分代碼。web
下載以後運行setup.py文件
在demo中發現python的三大主流框架都有，這真是太棒了呢
在django_demo文件夾中先安裝requirements.txt裏面須要的庫
注意：打開django_demo下的settings.py文件
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, "static"),
)
最後添加這部分，官方的內容給的是絕對路徑，咱們須要拼接相對路徑
demo中的文件替換本身項目中相應的文件
運行後便可看到驗證頁面
2、vue和python部分結合
分析：後端中validate和ajax_validate區別是：返回頁面與返回數據
鑑於咱們使用先後端分離的方式，在提交路徑上選擇ajax_validate
1.vue部分
（1）form-action屬性提交
python部分可用後，打開demo中的index.html，將html部分放置在vue驗證組件的template中，將style放在vue的style中。
在根頁面的head區域引入jquery
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
打開http://static.geetest.com/static/tools/gt.js複製所有內容到你的assets資源目錄下
在你的驗證組件頁面引入剛纔複製的資源
import '../assets/js/gt.js'
在methods裏新建一個方法
拷貝demo.html中script裏ajax獲取數據的方法，在vue裏改成axios獲取
getCaptchaData () {
this.$axios.get('/api/register?t=' + (new Date()).getTime())
.then((res) => {
console.log('res', res)
var handlerEmbed = function (captchaObj) {
$('#embed-submit').click(function (e) {
var validate = captchaObj.getValidate()
if (!validate) {
$('#notice')[0].className = 'show'
setTimeout(function () {
$('#notice')[0].className = 'hide'
}, 2000)
e.preventDefault()
}
})
// 將驗證碼加到id爲captcha的元素裏
captchaObj.appendTo('#embed-captcha')
captchaObj.onReady(function () {
$('#wait')[0].className = 'hide'
})
// 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html
}
// 使用initGeetest接口
// 參數1：配置參數
// 參數2：回調，回調的第一個參數驗證碼對象，以後可使用它作appendTo之類的事件
window.initGeetest({
gt: res.data.gt,
challenge: res.data.challenge,
product: 'embed', // 產品形式，包括：float，embed，popup。注意只對PC版驗證碼有效
offline: !res.data.success // 表示用戶後臺檢測極驗服務器是否宕機，通常不須要關注
}, handlerEmbed)
})
.catch(function (error) {
console.log(error)
})
}
在建立時啓動
this.getCaptchaData()
附件：slidingBlock1.vue
<!-- slidingBlock1:form-action部分 -->
<template>
<form class="popup" action="http://127.0.0.1:8000/api/ajax_validate" method="post">
<p>
<label for="user">用戶名：</label>
<input class="inp" id="user" type="text" value="極驗驗證">
</p>
<br>
<p>
<label for="password">密 碼：</label>
<input class="inp" id="password" type="password" value="123456">
</p>
<div id="embed-captcha"></div>
<p id="wait" class="show">正在加載驗證碼......</p>
<p id="notice" class="hide">請先拖動驗證碼到相應位置</p>
<br>
<input class="btn" id="embed-submit" type="submit" value="提交" >
</form>
</template>
<script>
import '../assets/js/gt.js'
export default {
name: 'slidingBlock1',
data () {
return {
}
},
mounted () {
this.getCaptchaData()
},
components: {
},
methods: {
login () {
let data = this.$qs.stringify(this.form)
let that = this
this.$axios.post('api/ajax_validate', data, {withCredentials: true
})
.then((res) => {
console.log(res)
})
.catch(function () {
that.$message.error('帳號名或密碼錯誤') // catch裏的this不是vue對象，須要外層設置
})
},
getCaptchaData () {
this.$axios.get('/api/register?t=' + (new Date()).getTime())
.then((res) => {
console.log('res', res)
var handlerEmbed = function (captchaObj) {
$('#embed-submit').click(function (e) {
var validate = captchaObj.getValidate()
if (!validate) {
$('#notice')[0].className = 'show'
setTimeout(function () {
$('#notice')[0].className = 'hide'
}, 2000)
e.preventDefault()
}
})
// 將驗證碼加到id爲captcha的元素裏
captchaObj.appendTo('#embed-captcha')
captchaObj.onReady(function () {
$('#wait')[0].className = 'hide'
})
// 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html
}
// 使用initGeetest接口
// 參數1：配置參數
// 參數2：回調，回調的第一個參數驗證碼對象，以後可使用它作appendTo之類的事件
window.initGeetest({
gt: res.data.gt,
challenge: res.data.challenge,
product: 'embed', // 產品形式，包括：float，embed，popup。注意只對PC版驗證碼有效
offline: !res.data.success // 表示用戶後臺檢測極驗服務器是否宕機，通常不須要關注
}, handlerEmbed)
})
.catch(function (error) {
console.log(error)
})
}
}
}
</script>
<style>
body {
margin: 50px 0;
text-align: center;
}
.inp {
border: 1px solid gray;
padding: 0 10px;
width: 200px;
height: 30px;
font-size: 18px;
}
.btn {
border: 1px solid gray;
width: 100px;
height: 30px;
font-size: 18px;
cursor: pointer;
}
#embed-captcha {
width: 300px;
margin: 0 auto;
}
.show {
display: block;
}
.hide {
display: none;
}
#notice {
color: red;
}
</style>
這裏axio得到數據使用代理的方式
打印獲取的數據
使用vuex的，能夠結合參考文檔1使用
（2）form-methods提交按鈕提交
爲了區別，將驗證碼卸載id爲captcha的容器裏
var handlerEmbed = function (captchaObj) {
captchaObj.appendTo('#captcha')
captchaObj.onReady(function () {
document.getElementById('wait').style.display = 'none'
})
captchaObj.onSuccess(function () {
_this.form.isDisabled = !_this.isDisabled
_this.form.writeCode = !_this.writeCode
_this.form.geetest_challenge = captchaObj.getValidate().geetest_challenge
_this.form.geetest_validate = captchaObj.getValidate().geetest_validate
_this.form.geetest_seccode = captchaObj.getValidate().geetest_seccode
console.log(_this.form)
})
captchaObj.onError(function () {
console.log('出錯啦，提示用戶稍後進行重試')
})
}
主要是在回調函數的initGeetest部分重寫handlerEmbed，將回調的部分數據加入post數據裏
注意：刪除提交按鈕類型
login () {
let data = this.$qs.stringify(this.form)
console.log(data)
let that = this
this.$axios.post('/api/ajax_validate/', data, {withCredentials: true
})
.then((res) => {
console.log(res)
if (res.data.status === 'fail') {
$('#notice')[0].className = 'show'
setTimeout(function () {
$('#notice')[0].className = 'hide'
}, 2000)
}
})
.catch(function () {
that.$message.error('帳號名或密碼錯誤') // catch裏的this不是vue對象，須要外層設置
})
},
添加登陸按鈕方法，對返回的結果進行判斷，經過隱藏/顯示來提示用戶驗證碼狀況
附件：slidingBlock2.vue
<!-- slidingBlock2:form-methods部分 -->
<template>
<form class="popup" method="post">
<p>
<label for="user">用戶名：</label>
<input class="inp" id="user" type="text" :value="form.username">
</p>
<br>
<p>
<label for="password">密 碼：</label>
<input class="inp" id="password" type="password" :value="form.password">
</p>
<div id="embed-captcha"></div>
<div id="captcha"></div>
<p id="wait" class="show">正在加載驗證碼......</p>
<p id="notice" class="hide">請先拖動驗證碼到相應位置</p>
<br>
<input class="btn" id="embed-submit" value="提交" v-on:click="login()">
</form>
</template>
<script>
import '../assets/js/gt.js'
export default {
name: 'slidingBlock2',
data () {
return {
form: {
username: '極驗驗證',
password: '123456',
isDisabled: true,
writeCode: true
}
}
},
mounted () {
this.getCaptchaData()
},
components: {
},
methods: {
login () {
let data = this.$qs.stringify(this.form)
console.log(data)
let that = this
this.$axios.post('/api/ajax_validate/', data, {withCredentials: true
})
.then((res) => {
console.log(res)
if (res.data.status === 'fail') {
$('#notice')[0].className = 'show'
setTimeout(function () {
$('#notice')[0].className = 'hide'
}, 2000)
}
})
.catch(function () {
that.$message.error('帳號名或密碼錯誤') // catch裏的this不是vue對象，須要外層設置
})
},
getCaptchaData () {
let _this = this
this.$axios.get('/api/register?t=' + (new Date()).getTime())
.then((res) => {
console.log('res', res)
var handlerEmbed = function (captchaObj) {
captchaObj.appendTo('#captcha')
captchaObj.onReady(function () {
document.getElementById('wait').style.display = 'none'
})
captchaObj.onSuccess(function () {
_this.form.isDisabled = !_this.isDisabled
_this.form.writeCode = !_this.writeCode
_this.form.geetest_challenge = captchaObj.getValidate().geetest_challenge
_this.form.geetest_validate = captchaObj.getValidate().geetest_validate
_this.form.geetest_seccode = captchaObj.getValidate().geetest_seccode
console.log(_this.form)
})
captchaObj.onError(function () {
console.log('出錯啦，提示用戶稍後進行重試')
})
}
// 使用initGeetest接口
// 參數1：配置參數
// 參數2：回調，回調的第一個參數驗證碼對象，以後可使用它作appendTo之類的事件
window.initGeetest({
gt: res.data.gt,
challenge: res.data.challenge,
product: 'embed', // 產品形式，包括：float，embed，popup。注意只對PC版驗證碼有效
offline: !res.data.success // 表示用戶後臺檢測極驗服務器是否宕機，通常不須要關注
}, handlerEmbed)
})
.catch(function (error) {
console.log(error)
})
}
}
}
</script>
<style>
body {
margin: 50px 0;
text-align: center;
}
.inp {
border: 1px solid gray;
padding: 0 10px;
width: 200px;
height: 30px;
font-size: 18px;
}
.btn {
border: 1px solid gray;
width: 100px;
height: 30px;
font-size: 18px;
cursor: pointer;
}
#embed-captcha {
width: 300px;
margin: 0 auto;
}
.show {
display: block;
}
.hide {
display: none;
}
#notice {
color: red;
}
</style>
能夠獲得返回成功的信息
後端結合使用框架的註冊、登陸部分修改代碼（略）
3、其餘
在查找的過程當中，網上有很多使用python和selenium庫破解極驗證的（B站就是），方法主要是使用庫對圖片進行灰度處理，識別圖片，找到拼圖範圍，滑動座標達到。因此這種驗證不是很是安全。有時間再看看有沒其餘更好用的人機驗證
參考文檔：
1.vue2.0 + 極驗驗證：https://blog.csdn.net/XiaoYi0215/article/details/79921967?utm_source=blogxgwz0
相關文章
- 1. vue2.0 + 極驗驗證
- 2. java springMVC 極致驗證 非demo版
- 3. selenium破解極驗驗證
- 4. 極驗滑動驗證碼
- 5. 極驗驗證碼破解
- 6. php 極驗驗證 geetest!
- 7. 極驗驗證碼使用
- 8. vue中使用極驗驗證碼（附demo）
- 9. 極驗驗證使用-滑動&選字驗證碼
- 10. python驗證碼識別(2)極驗滑動驗證碼識別
- 更多相關文章...
- • XML 驗證 - XML 教程
- • DTD 驗證 - DTD 教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue2.0 + 極驗驗證
- 2. java springMVC 極致驗證 非demo版
- 3. selenium破解極驗驗證
- 4. 極驗滑動驗證碼
- 5. 極驗驗證碼破解
- 6. php 極驗驗證 geetest!
- 7. 極驗驗證碼使用
- 8. vue中使用極驗驗證碼（附demo）
- 9. 極驗驗證使用-滑動&選字驗證碼
- 10. python驗證碼識別(2)極驗滑動驗證碼識別