Vue集成阿里云做滑塊驗證的實踐

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

滑塊驗證是比較常見的人機鑒別的方法，本文主要介紹了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里面監(jiān)聽是否刷新
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',
? ? ? ? ? // 您可以在該回調(diào)參數(shù)中將會話ID（sessionId）、簽名串（sig）、請求唯一標識（token）字段記錄下來，隨業(yè)務請求一同發(fā)送至您的服務端調(diào)用驗簽。
? ? ? ? ? success: function(data) {
? ? ? ? ? ? data.scene = 'nc_login'
? ? ? ? ? ? self.$emit('slideCallback', data);
? ? ? ? ? },
? ? ? ? ? // 滑動驗證失敗時觸發(fā)該回調(diào)參數(shù)。
? ? ? ? ? fail: function(failCode) {
? ? ? ? ? ? this.$message(`滑動驗證失敗,失敗編號${failCode}`);
? ? ? ? ? ? console.log(failCode);
? ? ? ? ? },
? ? ? ? ? // 驗證碼加載出現(xiàn)異常時觸發(fā)該回調(diào)參數(shù)。
? ? ? ? ? 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不支持）
運維人員不需要
有用戶名密碼，再去驗證自動調(diào)用登錄事件

很簡單驗證控件加載失敗會有個回調(diào)，讓后端加個參數(shù)，沒加載驗證組件，讓他知道予以通行就好

<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 || '該用戶無菜單權限，請聯(lián)系管理員'); // 錯誤提示
? ? });
? },
? // 完成滑動
? 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>