Vue集成阿裡雲做滑塊驗證的實踐
前言
滑塊驗證是比較常見的人機鑒別手段,但是自己做一時半會還真搞不出來,想想這玩意還挺難琢磨,怎麼識別是否是人機呢?本文介紹Vue+阿裡雲驗證做出這個小功能。
集成阿裡雲驗證
前端需要什麼
- appkey
- scene
- 後端配合
引入阿裡雲驗證
public/index.html
<head> <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script> </head>
vue.config.js
module.exports = { configureWebpack: { externals: { AWSC: 'AWSC', }, } }
封裝一個驗證組件
思路其實很簡單,功能也單一。
- 初始化加載阿裡雲驗證控件
- 可刷新驗證控件
下面說兩個重點
1. 初始化放在mounted,是因為涉及到Dom加載問題,created時Dom並未加載完成會報錯。
2. Watch裡面監聽是否刷新
3.. 記得樣式自定義下
下面開始寫組件
NoCaptcha.vue
<template> <div> <div id="nc"> </div> </div> </template> <script> export default { // 驗證成功後,服務端報錯(如賬號/密碼等錯誤),需要重置滑塊 props: { reload: { type: Boolean, default: false, }, }, data() { return { ic: '', // noCaptcha實例 }; }, watch: { reload: { handler(newV) { console.log(newV); if (newV) { this.nc.reset(); // 重置滑塊 } }, }, }, mounted() { this.init(); // 初始化方法 }, methods: { init() { const self = this; // 實例化nc // eslint-disable-next-line no-undef AWSC.use('nc', function(state, module) { // 初始化 self.nc = module.init({ // 您可以在阿裡雲驗證碼控制臺的配置管理頁簽找到對應的appkey字段值,請務必正確填寫。 appkey: 'FFFF0N00000000005CE9', // 您可以在阿裡雲驗證碼控制臺的配置管理頁簽找到對應的scene值,請務必正確填寫。 scene: 'nc_login', // 滑塊渲染的DOM id。 renderTo: 'nc', // 您可以在該回調參數中將會話ID(sessionId)、簽名串(sig)、請求唯一標識(token)字段記錄下來,隨業務請求一同發送至您的服務端調用驗簽。 success: function(data) { data.scene = 'nc_login' self.$emit('slideCallback', data); }, // 滑動驗證失敗時觸發該回調參數。 fail: function(failCode) { this.$message(`滑動驗證失敗,失敗編號${failCode}`); console.log(failCode); }, // 驗證碼加載出現異常時觸發該回調參數。 error: function(errorCode) { this.$message(`驗證碼加載異常,異常編號${errorCode}`); console.log(errorCode); self.$emit('slideCallback', {cls:false}); }, }); }); }, }, }; </script> <style lang="scss" scoped> #nc { width: 100%; display: contents; } /deep/.nc-container #nc_1_wrapper { width: 100%; height: 36px; line-height: 36px; #nc_1_n1t, #nc_1__bg, #nc_1_n1z, #nc_1__scale_text, .nc-lang-cnt { height: 36px; line-height: 36px; } } </style>
使用組件
需要考慮的問題
- 驗證控件沒加載出來的情況怎麼辦?(例如IE不支持)
- 運維人員不需要
- 有用戶名密碼,再去驗證自動調用登錄事件
很簡單驗證控件加載失敗會有個回調,讓後端加個參數,沒加載驗證組件,讓他知道予以通行就好
<template> // 其他代碼略 <NoCaptcha @slideCallback="finishSlide" :reload="reload" /> </template> <script> // 其他代碼略 import NoCaptcha from '@/components/NoCaptch.vue'; data() { return { reload: false, } }, method: { // 點擊登錄 login() { // 驗證略 this.reload = false; // 驗證通過後,重置滑塊設置為false // 後端登錄接口 xx() .then(() => { // 登錄成功代碼略 }) .catch((err) => { // 其他代碼略 this.reload = true; // 需要重置滑塊 console.log(err || '該用戶無菜單權限,請聯系管理員'); // 錯誤提示 }); }, // 完成滑動 finishSlide(data) { // 按需使用返回值 console.log('會話ID', data.sessionId) console.log('簽名串', data.sig) console.log('滑塊請求的token', data.token) if (data.cls === false) {//驗證加載失敗 this.loginForm.cls = false } if (data.sessionId) {//非人機操作 this.loginForm.scene = data.scene this.loginForm.ncToken = data.token this.loginForm.sig = data.sig this.loginForm.sessionId = data.sessionId delete this.loginForm.cls } if (this.loginForm.username && this.loginForm.password) {//填過用戶名密碼 this.login() } }, } </script>
思考
- 如果這個控件讓前端自己做或者後端自己做,能實現嗎?
- 這個滑動驗證機制明白嗎?
- 這個能實現絕對安全嗎?
PS:我思考瞭一下,前端需要引入阿裡雲的sdk,這個sdk會收集用戶數據。然後滑塊滑動完成後會將這些數據進行分析判斷是否為人機。當然這算法是人傢的機密,畢竟要賺錢的嘛。其實這個滑動算法是可以模擬的,也不是絕對安全,隻是增加瞭一個步驟而已。
到此這篇關於Vue集成阿裡雲做滑塊驗證的實踐的文章就介紹到這瞭,更多相關Vue 滑塊驗證內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!