快捷導(dǎo)航

Vue集成阿里云做滑塊驗(yàn)證的實(shí)踐

更新時(shí)間：2022年01月19日 14:54:44 作者：涼城a

滑塊驗(yàn)證是比較常見(jiàn)的人機(jī)鑒別的方法，本文主要介紹了Vue集成阿里云做滑塊驗(yàn)證，具有一定的參考價(jià)值，感興趣的可以了解一下

前言

滑塊驗(yàn)證是比較常見(jiàn)的人機(jī)鑒別手段，但是自己做一時(shí)半會(huì)還真搞不出來(lái)，想想這玩意還挺難琢磨，怎么識(shí)別是否是人機(jī)呢？本文介紹Vue+阿里云驗(yàn)證做出這個(gè)小功能。

集成阿里云驗(yàn)證

前端需要什么

appkey
scene
后端配合

引入阿里云驗(yàn)證

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',
? ? },
? }
}

封裝一個(gè)驗(yàn)證組件

思路其實(shí)很簡(jiǎn)單，功能也單一。

初始化加載阿里云驗(yàn)證控件
可刷新驗(yàn)證控件

下面說(shuō)兩個(gè)重點(diǎn)

1. 初始化放在mounted，是因?yàn)樯婕暗紻om加載問(wèn)題，created時(shí)Dom并未加載完成會(huì)報(bào)錯(cuò)。
2. Watch里面監(jiān)聽(tīng)是否刷新
3.. 記得樣式自定義下

下面開(kāi)始寫(xiě)組件
NoCaptcha.vue

<template>
? <div>
? ? <div id="nc">

? ? </div>
? </div>
</template>

<script>
export default {
? // 驗(yàn)證成功后，服務(wù)端報(bào)錯(cuò)（如賬號(hào)/密碼等錯(cuò)誤），需要重置滑塊
? props: {
? ? reload: {
? ? ? type: Boolean,
? ? ? default: false,
? ? },
? },
? data() {
? ? return {
? ? ? ic: '', // noCaptcha實(shí)例
? ? };
? },
? watch: {
? ? reload: {
? ? ? handler(newV) {
? ? ? ? console.log(newV);
? ? ? ? if (newV) {
? ? ? ? ? this.nc.reset(); ?// 重置滑塊
? ? ? ? }
? ? ? },
? ? },
? },
? mounted() {
? ? this.init(); // 初始化方法
? },
? methods: {
? ? init() {
? ? ? const self = this;
? ? ? // 實(shí)例化nc
? ? ? // eslint-disable-next-line no-undef
? ? ? AWSC.use('nc', function(state, module) {
? ? ? ? // 初始化
? ? ? ? self.nc = module.init({
? ? ? ? ? // 您可以在阿里云驗(yàn)證碼控制臺(tái)的配置管理頁(yè)簽找到對(duì)應(yīng)的appkey字段值，請(qǐng)務(wù)必正確填寫(xiě)。
? ? ? ? ? appkey: 'FFFF0N00000000005CE9',
? ? ? ? ? // 您可以在阿里云驗(yàn)證碼控制臺(tái)的配置管理頁(yè)簽找到對(duì)應(yīng)的scene值，請(qǐng)務(wù)必正確填寫(xiě)。
? ? ? ? ? scene: 'nc_login',
? ? ? ? ? // 滑塊渲染的DOM id。
? ? ? ? ? renderTo: 'nc',
? ? ? ? ? // 您可以在該回調(diào)參數(shù)中將會(huì)話(huà)ID（sessionId）、簽名串（sig）、請(qǐng)求唯一標(biāo)識(shí)（token）字段記錄下來(lái)，隨業(yè)務(wù)請(qǐng)求一同發(fā)送至您的服務(wù)端調(diào)用驗(yàn)簽。
? ? ? ? ? success: function(data) {
? ? ? ? ? ? data.scene = 'nc_login'
? ? ? ? ? ? self.$emit('slideCallback', data);
? ? ? ? ? },
? ? ? ? ? // 滑動(dòng)驗(yàn)證失敗時(shí)觸發(fā)該回調(diào)參數(shù)。
? ? ? ? ? fail: function(failCode) {
? ? ? ? ? ? this.$message(`滑動(dòng)驗(yàn)證失敗,失敗編號(hào)${failCode}`);
? ? ? ? ? ? console.log(failCode);
? ? ? ? ? },
? ? ? ? ? // 驗(yàn)證碼加載出現(xiàn)異常時(shí)觸發(fā)該回調(diào)參數(shù)。
? ? ? ? ? error: function(errorCode) {
? ? ? ? ? ? this.$message(`驗(yàn)證碼加載異常,異常編號(hào)${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>

使用組件

需要考慮的問(wèn)題

驗(yàn)證控件沒(méi)加載出來(lái)的情況怎么辦？（例如IE不支持）
運(yùn)維人員不需要
有用戶(hù)名密碼，再去驗(yàn)證自動(dòng)調(diào)用登錄事件

很簡(jiǎn)單驗(yàn)證控件加載失敗會(huì)有個(gè)回調(diào)，讓后端加個(gè)參數(shù)，沒(méi)加載驗(yàn)證組件，讓他知道予以通行就好

<template>
? // 其他代碼略
? <NoCaptcha @slideCallback="finishSlide" :reload="reload" />
</template>

<script>
// 其他代碼略
import NoCaptcha from '@/components/NoCaptch.vue';

data() {
? return {
? ? reload: false,
? }
},
method: {
? // 點(diǎn)擊登錄
? login() {
? ? // 驗(yàn)證略
? ? this.reload = false; // 驗(yàn)證通過(guò)后，重置滑塊設(shè)置為false
? ? // 后端登錄接口
? ? xx()
? ? .then(() => {
? ? ? ?// 登錄成功代碼略
? ? })
? ? .catch((err) => {
? ? ? ?// 其他代碼略
? ? ? ?this.reload = true; // 需要重置滑塊
? ? ? ?console.log(err || '該用戶(hù)無(wú)菜單權(quán)限，請(qǐng)聯(lián)系管理員'); // 錯(cuò)誤提示
? ? });
? },
? // 完成滑動(dòng)
? finishSlide(data) {
? ? // 按需使用返回值
? ? console.log('會(huì)話(huà)ID', data.sessionId)
? ? console.log('簽名串', data.sig)
? ? console.log('滑塊請(qǐng)求的token', data.token)
? ??
? ? ?if (data.cls === false) {//驗(yàn)證加載失敗
? ? ? ? this.loginForm.cls = false
? ? ? }

? ? ? if (data.sessionId) {//非人機(jī)操作
? ? ? ? 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) {//填過(guò)用戶(hù)名密碼
? ? ? ? this.login()
? ? ? }
? },
}
</script>

思考

如果這個(gè)控件讓前端自己做或者后端自己做，能實(shí)現(xiàn)嗎？
這個(gè)滑動(dòng)驗(yàn)證機(jī)制明白嗎？
這個(gè)能實(shí)現(xiàn)絕對(duì)安全嗎？

PS:我思考了一下，前端需要引入阿里云的sdk，這個(gè)sdk會(huì)收集用戶(hù)數(shù)據(jù)。然后滑塊滑動(dòng)完成后會(huì)將這些數(shù)據(jù)進(jìn)行分析判斷是否為人機(jī)。當(dāng)然這算法是人家的機(jī)密，畢竟要賺錢(qián)的嘛。其實(shí)這個(gè)滑動(dòng)算法是可以模擬的，也不是絕對(duì)安全，只是增加了一個(gè)步驟而已。

到此這篇關(guān)于Vue集成阿里云做滑塊驗(yàn)證的實(shí)踐的文章就介紹到這了,更多相關(guān)Vue 滑塊驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: