共计 1492 个字符，预计需要花费 4 分钟才能阅读完成。
效果图
工具
- vue 2.x
- vue-cli 3
- 阿里云账号（后盾须要配好：appkey，scene）
index.html
<head>
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>vue.config.js
module.exports = {
configureWebpack: {
externals: {AWSC: 'AWSC',},
}
}组件 components/NoCaptch.vue
<template>
<div>
<div id="nc"></div>
</div>
</template>
<script>
import {errorMsg} from '@/utils/message'; // 谬误提醒，代码略
export default {data() {
return {nc: '', // noCaptcha 实例};
},
created() {this.init(); // 初始化办法
},
methods: {init() {
const self = this;
// 实例化 nc
AWSC.use('nc', function(state, module) {
// 初始化
self.nc = module.init({
// 您能够在阿里云验证码控制台的配置管理页签找到对应的 appkey 字段值，请务必正确填写。appkey: 'xx',
// 您能够在阿里云验证码控制台的配置管理页签找到对应的 scene 值，请务必正确填写。scene: 'xx',
// 滑块渲染的 DOM id。renderTo: 'nc',
// 您能够在该回调参数中将会话 ID（sessionId）、签名串（sig）、申请惟一标识（token）字段记录下来，随业务申请一起发送至您的服务端调用验签。success: function(data) {self.$emit('slideCallback', data);
},
// 滑动验证失败时触发该回调参数。fail: function(failCode) {errorMsg(` 滑动验证失败, 失败编号 ${failCode}`);
console.log(failCode);
},
// 验证码加载出现异常时触发该回调参数。error: function(errorCode) {errorMsg(` 验证码加载异样, 异样编号 ${errorCode}`);
console.log(errorCode);
},
});
});
},
},
};
</script>
<style lang="less" scoped>
/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>登录页援用组件 login.vue
template:
<NoCaptcha @slideCallback="finishSlide" />
<script>
import NoCaptcha from '@/components/NoCaptch.vue';
... 构造略
method: {
// 实现滑动
finishSlide(data) {
// 按需应用返回值
console.log('会话 ID', data.sessionId)
console.log('签名串', data.sig)
console.log('滑块申请的 token', data.token)
},
}
</script>
正文完
发表至： javascript
2021-04-25
