效果圖
準(zhǔn)備
- 訪問(wèn)KgCaptcha網(wǎng)站艺普，注冊(cè)賬號(hào)后登錄控制臺(tái)簸州，訪問(wèn)“無(wú)感驗(yàn)證”模塊鉴竭，申請(qǐng)開通后系統(tǒng)會(huì)分配給應(yīng)用一個(gè)唯一的AppId、AppSecret岸浑。
- 提供后端SDK來(lái)校驗(yàn)token(即安全憑據(jù))是否合法 搏存，目前支持PHP版、Python版矢洲、Java/JSP版璧眠、.Net C#版。
- 訪問(wèn)Node.js官網(wǎng)读虏，下載Node.js運(yùn)行環(huán)境责静，訪問(wèn)Vue.js中文官網(wǎng)，安裝下載Vue.js盖桥，創(chuàng)建一個(gè)Vue項(xiàng)目灾螃，具體操作請(qǐng)查看Vue.js中文官網(wǎng)。
具體實(shí)現(xiàn)
項(xiàng)目目錄
index.html
項(xiàng)目根目錄index.html文件揩徊，頭部引用KgCaptcha的js腰鬼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--引入凱格行為驗(yàn)證碼js-->
<script id="KgCaptcha" src="captcha.js?appid=XXX"></script>
<!--引入凱格行為驗(yàn)證碼js-->
</head>
<body>
<!--Vue主體-->
<div id="app"></div>
<!--Vue主體-->
</body>
</html>
main.js
src/main.js文件中，配置路由塑荒。
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 配置全局路由熄赡、組件
new Vue({
el: '#app',
router,
components: { App },
template: ''
})
App.vue
src/App.vue文件中，定義html齿税。
<template>
<div id="app">
<!--自定義組件彼硫、內(nèi)容-->
<form id="form">
token: <input name="token" _cke_saved_name="token" _cke_saved_name="token" _cke_saved_name="token" id="token">
<!--凱格行為驗(yàn)證碼組件-->
<div id="captchaBox"></div>
<!--凱格行為驗(yàn)證碼組件-->
<button type="submit">提交</button>
</form>
<!--自定義組件、內(nèi)容-->
</div>
</template>
<script>
export default {
name: 'App',
}
//初始化凱格行為驗(yàn)證碼
kg.captcha({
// 綁定元素凌箕，驗(yàn)證框顯示區(qū)域
bind: "#captchaBox",
// 驗(yàn)證成功事務(wù)處理
success: function(e) {
console.log(e);
kg.$('#token').value = e['token']
},
// 驗(yàn)證失敗事務(wù)處理
failure: function(e) {
console.log(e);
},
// 點(diǎn)擊刷新按鈕時(shí)觸發(fā)
refresh: function(e) {
console.log(e);
}
});
</script>
總結(jié)
SDK開源地址：https://github.com/KgCaptcha拧篮，順便做了一個(gè)演示：https://www.kgcaptcha.com/demo/
