Vue整合阿里雲做滑塊驗證的實踐
阿新 • • 發佈：2022-01-21
目錄
- 前言
- 整合阿里雲驗證
- 前端需要什麼
- 引入阿里雲驗證
- 封裝一個驗證元件
- 使用元件
- 思考
前言
滑塊驗證是比較常見的人機鑑別手段，但是自己做一時半會還真搞不出來，想想這玩意還挺難琢磨，怎麼識別是否是人機呢？本文介紹+阿里雲驗證做出這個小功能。
整合阿里雲驗證
前端需要什麼
- appkey
- scene
- 後端配合
引入阿里雲驗證
public/index.html
<head> <script src="https://g.alicdn.com/AWSC/AWSC/awsc."></script> </head>
vue.config.js
module.exports = {
configureWebpack: {
externals: {
AWSC: 'AWSC',},}
}封裝一個驗證元件
思路其實很簡單，功能也單一。
- 初始化載入阿里雲驗證控制元件
- 可重新整理驗證控制元件
下面說兩個重點
1. 初始化放在mounted，是因為涉及到Dom載入問題，created時Dom並未載入完成會報錯。
2. Wawww.cppcns.comtch裡面監聽是否重新整理
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});
www.cppcns.com 使用元件
需要考慮的問題
- 驗證控制元件沒加載出來的情況怎麼辦？（例如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>
思考
- 如果這個控制元件讓前端自己做或者後端自己做，能實現嗎？
- 這個滑動驗證機制明白嗎？
- 這個能實現絕對安全嗎？
P客棧S:我思考了一下，前端需要引入阿里雲的sdk，這個sdk會收集使用者資料。然後滑塊滑動完成後會將這些資料進行分析判斷是否為人機。當然這演算法是人家的機密，畢竟要賺錢的嘛。其實這個滑動演算法是可以模擬的，也不是絕對安全，只是增加了一個步驟而已。
到此這篇關於Vue整合阿里雲做滑塊驗證的實踐的文章就介紹到這了,更多相關Vue 滑塊驗證內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！