一、服務接入流程
二、無感驗證后端接入（業務應用集成）
- 訪問頂象官網，注冊賬號后登錄控制台，訪問“無感驗證”模塊，申請開通后系統會分配一個唯一的AppId、AppSecret。
- 當用戶滑動驗證碼通過后，驗證碼服務會生成一個
token，用戶的業務請求帶上這個驗證碼token，業務系統再調用后台 SDK 驗證token的有效性。
|
| 用戶業務請求 | ----> | 業務系統 | ----> | | 驗證碼服務
(請求帶上驗證碼token) | (獲取token，調用驗證碼接口) | | (校驗token有效性) |
頂象提供后端SDK來校驗token是否合法 ，目前支持JAVA版、PHP版、C#版、Python版。
token驗證api返回數據
| 字段名 | 數據類型 | 描述 |
|---|---|---|
| success | Boolean | 是否成功，true/false |
| msg | String | 錯誤信息 |
| ip | String | token產生時，客戶端的ip |
| code | String | 錯誤code |
錯誤code說明
| code | 描述 |
|---|---|
| 1001 | 錯誤的APPID |
| 1002 | 簽名錯誤，請核對APPID和APPSECRET是否正確 |
| 1003 | token不合法或者已經過期（token是一次性使用並且只有兩分鍾有效期） |
| 1004 | 參數錯誤，請核對后端使用的APPID是否和前端頁面一致 |
| 1005 | verifyToken傳入ip時，校驗不通過，即token產生的ip和業務請求ip不一致 |
三、后端實現
# CaptchaResponse.py (第三方)
class CaptchaResponse:
result = False
serverStatus = ""
def __init__(self, result, serverStatus):
self.result = result
self.serverStatus = serverStatus
def setResult(self, result):
self.result = result
def setServerStatus(self, serverStatus):
self.serverStatus = serverStatus
# CaptchaClient.py (第三方)
from urllib import request
import hashlib
import json
from new.CaptchaResponse import CaptchaResponse
class CaptchaClient:
requestUrl = "https://cap.dingxiang-inc.com/api/tokenVerify"
timeout = 2
response = None
def __init__(self, appId, appSecret):
self.appId = appId
self.appSecret = appSecret
def setTimeOut(self, timeOut):
self.timeout = timeOut
def setCaptchaUrl(self, url):
self.requestUrl = url
def checkToken(self, token):
print(len(token) > 1024)
captchaResponse = CaptchaResponse(False, "")
"""
if (self.appId == "" or (self.appId is None) or self.appSecret == ""
or (self.appSecret is None) or token == "" or (token is None)
or not (len(token) > 1024)):
"""
if (self.appId == "" or (self.appId is None) or self.appSecret == ""
or (self.appSecret is None) or token == "" or (token is None)
or not (len(token) > 205)):
captchaResponse.setServerStatus("參數錯誤")
return captchaResponse.__dict__
arr = token.split(":")
print(arr)
constId = ""
if len(arr) == 2:
constId = arr[1]
str_key = self.appSecret + arr[0] + self.appSecret
sign = hashlib.md5(str(str_key).encode("utf8")).hexdigest()
req_url = self.requestUrl + '?appKey=' + self.appId + '&token=' + arr[
0] + '&constId=' + constId + "&sign=" + sign
try:
# self.response = urllib2.urlopen(req_url, timeout=self.timeout)
self.response = request.urlopen(req_url, timeout=self.timeout)
# self.response = requests.get(req_url, timeout=self.timeout)
print(self.response.code)
if self.response.code == 200:
result = self.response.read()
result = json.loads(result)
captchaResponse.setServerStatus("SERVER_SUCCESS")
captchaResponse.setResult(result["success"])
else:
captchaResponse.setResult(True)
captchaResponse.setServerStatus("server error: status=" + str(self.response.code))
return captchaResponse.__dict__
except Exception as e:
captchaResponse.setResult(True)
captchaResponse.setServerStatus("server error:" + e)
return captchaResponse.__dict__
finally:
self.close(self.response)
def close(self, response):
try:
if response != None:
response.close()
del response
except Exception as e:
print("close response error:" + e.message)
# TokenDemo.py(自定義測試)
from new.CaptchaClient import CaptchaClient
APP_ID = '693d3ef199e411d0ed62cb2a87d8bdde'
APP_SECRET = '5eea7b131502eece01409d8bd358f0d5'
if __name__ == '__main__':
captchaClient = CaptchaClient(APP_ID, APP_SECRET)
captchaClient.setTimeOut(2)
# 設置超時時間，默認2秒
# captchaClient.setCaptchaUrl("http://cap.dingxiang-inc.com/api/tokenVerify")
# 特殊情況可以額外指定服務器，默認情況下不需要設置
# 只能使用一次
token = 'token:11159D5F8D540AA73D207C5FF53EAD7906F1A01D3D9D63E044F1DBE3CE6FB117ECB81B1038A6755D455A0059164BC0D61462F6D0E55910FA0E27B1BF7F8FDA610512217CBC50B81B3A3DDDD2F0F06CD8:5df10ea2jLv7WP9YbNEIfgn3xFpmnRAMb818FAu1'
print(len(token))
response = captchaClient.checkToken(token)
print(response)
# print("serverStatus", response['serverStatus'])
# 確保驗證狀態是SERVER_SUCCESS，SDK中有容錯機制，在網絡出現異常的情況會返回通過
# print(response['result'])
if response.get('result') and response.get('serverStatus') == 'SERVER_SUCCESS':
# token驗證通過，繼續其他流程
print('成功')
pass
else:
# token驗證失敗，業務系統可以直接阻斷該次請求或者繼續彈驗證碼
print("失敗")
pass
四、前端應用
常規參數
初始化時有若干參數，其中 appId 是必填的。
| 參數名 | 必填 | 類型 | 說明 |
|---|---|---|---|
| appId | 是 | String | 當前應用的唯一標識 |
| type | 否 | String | 類型，目前只有一個選項 basic，默認值為 basic。 |
| style | 否 | String | 樣式，可選項有 embed（默認）、inline、popup、oneclick 四種，具體效果可參見線上demo。 |
| inlineFloatPosition | 否 | String | 浮動層位置，僅當 style 的值為 inline 時有效，可選項有 up（默認）、down 兩種，具體效果可參見線上demo。 |
| oneClickFloatPosition | 否 | string | 浮動層位置，僅當 style 的值為 oneclick 時有效，可選項有 up，當style值為oneclick且不傳此參數，默認為彈出形式。 |
| width | 否 | Number | 控件（滑動條）寬度，單位為像素，默認為 300。 |
| language | 否 | String | 語言，可選項有 cn（默認，中文）、en（英文）。 |
| success | 否 | Function | 驗證成功時的回調函數，會傳入一個參數，值為本次驗證的 token:constId，接入方需在后續的驗證中傳回此項值。注：此回調函數包含無感驗證成功及滑動驗證成功。 |
| fail | 否 | Function | 驗證失敗時的回調函數，會傳入一個參數，值為出錯信息。 |
方法
驗證碼實例具備以下方法：
-
reload()重置當前驗證碼示例：
myCaptcha.reload() -
show()顯示當前驗證碼。style為popup的驗證碼默認是隱藏的，需要接入方根據頁面邏輯調用show()方法將其顯示。示例：
myCaptcha.show() -
hide()隱藏當前驗證碼示例：
myCaptcha.hide()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{# 驗證碼滑塊#}
<script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js"></script>
<style>
.f {
height: 500px;
}
.tan {
width: 600px;
margin: 0 auto;
line-height: 500px;
font: normal 60px 微軟雅黑;
text-align: center;
}
.tan:hover {
border-radius: 5px;
border: 1px black solid;
box-shadow: 4px 6px WindowFrame;
}
</style>
</head>
<body>
<div id="c1"></div>
<div class="f">
<div id="btn-popup" class="tan">彈出</div>
</div>
</body>
<script>
var myCaptcha = _dx.Captcha(document.getElementById('c1'), {
{#appId: 'appId', //appId，在控制台中“應用管理”或“應用配置”模塊獲取#}
appId: '693d3ef199e411d0ed62cb2a87d8bdde',
style: 'popup', // 類型
success: function (token) {
console.log('token:', token);
myCaptcha.hide();
setTimeout(function () {
myCaptcha.reload();
}, 1000);
},
fail: function (error) {
console.log(error);
myCaptcha.reload();
},
});
document.getElementById('btn-popup').onclick = function () {
myCaptcha.show();
}
</script>
</html>