網站驗證碼WEB前端接入例項
阿新 • • 發佈：2019-02-13
以網易雲易盾驗證碼為參考案例：
相容性
IE7+、Chrome、Firefox、Safari、Opera、主流手機瀏覽器、iOS 及 Android上的內嵌Webview
開始使用
引入初始化JS
<script src="//cstaticdun.126.net/load.min.js"></script>呼叫初始化函式
initNECaptcha(config, onload, onerror)// initNECaptcha為全域性函式，可直接呼叫 initNECaptcha({ // config物件，引數配置 captchaId: '從易盾申請的captchaId', element: '#captcha', mode: 'float', width: '320px' }, function (instance) { // 初始化成功後得到驗證例項instance，可以呼叫例項的方法 }, function (err) { // 初始化失敗後觸發該函式，err物件描述當前錯誤資訊 })
引數配置
這裡指初始化時傳入的config物件，即呼叫初始化函式initNECaptcha時傳入的第一個引數。智慧驗證碼設定引數有些不同，詳見表格下方特別說明。
| 引數 | 引數型別 | 必填 | 預設 | 說明 |
|---|---|---|---|---|
captchaId | string | 是 | 無 | 驗證碼id |
element | string | HTMLElement | * | 無 |
mode | string | 否 | PC端預設"float"，移動端預設"popup" | 驗證碼模式，三種模式可選："float"、"embed"、"popup"，即觸發式、嵌入式、彈出式。 |
protocol | string | 否 | 與使用者網站的網路協議一致 | 驗證碼傳輸資料使用的網路協議，可選："http"、"https" |
width | number | string | 否 | "auto" |
lang | string | 否 | "zh-CN" | 驗證碼語言選項。支援"zh-CN"、"en"，即簡體中文和英文 |
onReady | function | 否 | 無 | NECaptcha所有工作準備就緒，使用者可以使用驗證碼時觸發該回調。具體使用見完整示例 |
onVerify | function | 否 | 無 | 驗證碼驗證結束回撥函式。具體使用見完整示例 |
特別注意
對於智慧無感知驗證碼，引數mode和width的設定均無效。驗證按鈕寬度與容器寬度一致，容器寬度最小240px。
例項方法
這裡指initNECaptcha初始化成功，onload觸發時傳入的例項的方法。
refresh：重新整理驗證碼，獲取新的驗證資訊destroy：銷燬當前例項popUp：當驗證碼是常規驗證碼並且mode為"popup"時，可呼叫該例項方法彈出驗證碼進行驗證
示例：
initNECaptcha(config, function onload (instance) {
// 可在此處呼叫例項方法
}, onerror)完整示例
使用form表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>驗證碼示例</title>
</head>
<body>
<form action="/login" method="post">
<input type="text" name="username" placeholder="使用者名稱">
<input type="password" name="password" placeholder="密碼">
<input type="hidden" name="captchaId" value="從易盾申請的captchaId">
<div id="captcha"></div> <!-- 驗證碼容器元素 -->
<button type="submit">登入</button>
</form>
<script src="//cstaticdun.126.net/load.min.js"></script><!-- 初始化JS -->
<script>
initNECaptcha({
captchaId: '從易盾申請的captchaId',
element: '#captcha',
mode: 'float',
width: 320
}, function onload (instance) {
// 初始化成功後，使用者輸入對應使用者名稱和密碼，以及完成驗證後，直接點選登入按鈕即可
}, function onerror (err) {
// 驗證碼初始化失敗處理邏輯，例如：提示使用者點選按鈕重新初始化
})
</body>
</html>使用onVerify
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
驗證碼示例
</head>
<body>
<div class="form-container">
<input type="text" name="username" id="username" placeholder="使用者名稱">
<input type="password" name="password" id="password" placeholder="密碼">
<div id="captcha"></div> <!-- 驗證碼容器元素 -->
登入
</div>
<script src="//cstaticdun.126.net/load.min.js"></script><!-- 初始化JS -->
<script>
initNECaptcha({
captchaId: '從易盾申請的captchaId',
element: '#captcha',
mode: 'float',
width: 320,
onReady: function (instance) {
// 驗證碼一切準備就緒，此時可正常使用驗證碼的相關功能
},
onVerify: function (err, data) {
/**
* 第一個引數是err（Error的例項），驗證失敗才有err物件
* 第二個引數是data物件，驗證成功後的相關資訊，data資料結構為key-value，如下：
* {
* validate: 'xxxxx' // 二次驗證資訊
* }
*/
// 點選登入按鈕後可呼叫服務端介面，以下為虛擬碼，僅作示例用
ajax('/login', {
captchaId: '從易盾申請的captchaId',
username: $('#username').val(),
password: $('#password').val(),
validate: data.validate
}, function onsuccess (data) {
// 登入成功後，相關處理邏輯
})
}
}, function onload (instance) {
// 初始化成功
}, function onerror (err) {
// 驗證碼初始化失敗處理邏輯，例如：提示使用者點選按鈕重新初始化
})
</body>
</html>使用popup模式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>驗證碼示例-popup模式</title>
</head>
<body>
<button id="j-popup">點選彈出驗證碼</button>
<div id="captcha"></div>
<script charset="UTF-8" type="text/javascript" src="http://cstaticdun.126.net/load.min.js"></script>
<script>
var captchaIns;
initNECaptcha({
element: '#captcha',
captchaId: '從易盾申請的captchaId',
mode: 'popup',
width: '320px'
}, function (instance) {
// 初始化成功後得到驗證例項instance，可以呼叫例項的方法
captchaIns = instance
}, function (err) {
// 初始化失敗後觸發該函式，err物件描述當前錯誤資訊
})
// 監聽button的點選事件，彈出驗證碼
document.getElementById('j-popup').addEventListener('click', function () {
captchaIns.popUp()
})
</body>
</html>特別說明
onload和onReady的區別：onload和onReady觸發時，均會返回驗證碼的例項，即傳入的第一個引數。二者觸發時機有所不同，onload觸發時，初始化函式結束和完成例項的生成，注意這並不代表驗證碼是可用的（比如驗證碼相關背景圖片和資訊並沒有載入），此方法只觸發一次。onReady觸發時，說明驗證碼準備就緒（比如背景圖片等資訊均已載入），在popup模式下，每次彈出均會觸發onReady，其他模式下onReady只觸發一次。
文章來自：網易雲
相關導讀：
如何評價 12306 的圖片型驗證碼？