極驗行為驗證的使用方法
阿新 • • 發佈：2018-12-13
1，官方文件
https://docs.geetest.com/install/deploy/server/python
2，使用方法（基於flask）
1，從Github: gt3-python-sdk下載.zip檔案，這個官方的壓縮檔案裡面有三個demo，分別是基於django、flask、tornado實現的，可以作為參考。
我們需要這裡面的 geetest.py 檔案、gt.js檔案。
2，在極驗官網註冊一個賬號，獲取公鑰（id）、私鑰（key），在後臺程式碼中會用到。
3，後臺程式碼
from flask import Blueprint,render_template,session,request
View Code
4，前端配置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sliding mode</title>
<style>
body {
margin: 50px 0;
text-align: center;
font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
}
.inp {
border: 1px solid #cccccc;
border-radius: 2px;
padding: 0 10px;
width: 278px;
height: 40px;
font-size: 18px;
}
.btn {
display: inline-block;
box-sizing: border-box;
border: 1px solid #cccccc;
border-radius: 2px;
width: 100px;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #666;
cursor: pointer;
background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
}
.btn:hover {
background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
}
#captcha {
width: 300px;
display: inline-block;
}
label {
vertical-align: top;
display: inline-block;
width: 180px;
text-align: right;
}
#text {
height: 42px;
width: 298px;
text-align: center;
border-radius: 2px;
background-color: #F3F3F3;
color: #BBBBBB;
font-size: 14px;
letter-spacing: 0.1px;
line-height: 42px;
}
#wait {
display: none;
height: 42px;
width: 298px;
text-align: center;
border-radius: 2px;
background-color: #F3F3F3;
}
.loading {
margin: auto;
width: 70px;
height: 20px;
}
.loading-dot {
float: left;
width: 8px;
height: 8px;
margin: 18px 4px;
background: #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
opacity: 0;
-webkit-box-shadow: 0 0 2px black;
-moz-box-shadow: 0 0 2px black;
-ms-box-shadow: 0 0 2px black;
-o-box-shadow: 0 0 2px black;
box-shadow: 0 0 2px black;
-webkit-animation: loadingFade 1s infinite;
-moz-animation: loadingFade 1s infinite;
animation: loadingFade 1s infinite;
}
.loading-dot:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
.loading-dot:nth-child(2) {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loading-dot:nth-child(3) {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-dot:nth-child(4) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@-webkit-keyframes loadingFade {
0% { opacity: 0; }
50% { opacity: 0.8; }
100% { opacity: 0; }
}
@-moz-keyframes loadingFade {
0% { opacity: 0; }
50% { opacity: 0.8; }
100% { opacity: 0; }
}
@keyframes loadingFade {
0% { opacity: 0; }
50% { opacity: 0.8; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<h1>Sliding mode</h1>
<form id="form">
<div>
<label for="username">username：</label>
<input class="inp" id="username" type="text" value="username">
</div>
<br>
<div>
<label for="password">password：</label>
<input class="inp" id="password" type="password" value="123456">
</div>
<br>
<div>
<label>Complete verification：</label>
<div id="captcha">
<div id="text">
行為驗證™ 安全元件載入中
</div>
<div id="wait" class="show">
<div class="loading">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
</div>
</div>
</div>
</div>
<br>
<div id="btn" class="btn">Submit</div>
</form>
<!-- 注意，驗證碼本身是不需要 jquery 庫，此處使用 jquery 僅為了在 demo 中使用，減少程式碼量 -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var handler = function (captchaObj) {
captchaObj.appendTo('#captcha');
captchaObj.onReady(function () {
$("#wait").hide();
});
$('#btn').click(function () {
var result = captchaObj.getValidate();
if (!result) {
return alert('Please complete verification');
}
$.ajax({
url: '/validate',
type: 'POST',
dataType: 'json',
data: {
username: $('#username2').val(),
password: $('#password2').val(),
geetest_challenge: result.geetest_challenge,
geetest_validate: result.geetest_validate,
geetest_seccode: result.geetest_seccode
},
success: function (data) {
if (data.status === 'success') {
alert('success');
} else if (data.status === 'fail') {
alert('fail, Please complete verification');
captchaObj.reset();
}
}
});
})
// 更多介面說明請參見：http://docs.geetest.com/install/client/web-front/
};
$.ajax({
url: "/getcaptcha?t=" + (new Date()).getTime(), // 加隨機數防止快取
type: "get",
dataType: "json",
success: function (data) {
$('#text').hide();
$('#wait').show();
// 呼叫 initGeetest 進行初始化
// 引數1：配置引數
// 引數2：回撥，回撥的第一個引數驗證碼物件，之後可以使用它呼叫相應的介面
initGeetest({
// 以下 4 個配置引數為必須，不能缺少
gt: data.gt,
challenge: data.challenge,
offline: !data.success, // 表示使用者後臺檢測極驗伺服器是否宕機
new_captcha: data.new_captcha, // 用於宕機時表示是新驗證碼的宕機
product: "popup", // 產品形式，包括：float，popup
lang: 'zh-cn',
width: "300px",
https: true
// 更多配置引數說明請參見：http://docs.geetest.com/install/client/web-front/
}, handler);
}
});
</script>
</body>
</html>
View Code