效果图
工具
- 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>
发表回复