最近公司的项目中需要有人机识别的功能，然后就去看了阿里智能识别人机功能的处理，将三种人机验证的案例都给产品看了，被告知要求用的是这种人机验证。虽然官网上给了demo，却是基于html，vue中使用的话却是需要进行其他的处理的。
一：引入阿里云关于人机验证的js
首先在vue项目中public文件下的html页面先引入以下关于阿里云人机验证需要的js。
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
<script src="//g.alicdn.com/sd/smartCaptcha/0.0.4/index.js"></script>
<script src="//g.alicdn.com/sd/quizCaptcha/0.0.1/index.js"></script>
二：创建vue文件 SlideCaptcha.vue
在components文件下创建一个文件 SlideCaptcha.vue 然后将官网给的案例里html代码先放到vue文件中。
<template>
<div>
<div id="captcha"></div>
</div>
</template>
三：处理js代码
处理js代码是比较重用的，因为这里有个比较重要的点就是window.NVC_Opt的声明必须在引入guide.js之前，否则在guide.js里面会报错 NVC_Opt is not defined ，而且在官网中也有说明了这一点的， 所以要想实现功能就需要动态去引入guide.js文件了。
首先在SlideCaptcha.vue中的created中先声明window.NVC_Opt。这一点比较重要。
created() {
window.NVC_Opt = {
appkey:'appkey',//需要使用的appkey
scene:'scene',//需要使用的scene
renderTo:'#captcha',
trans: {"key1": "code0", "nvcCode":200},
}
},
其次，实例化ic对象
initCaptcha() {
// console.log(AWSC)
// 实例化ic对象
let _this=this
AWSC.use("ic", function (state, module) {
// 初始化
window.ic = module.init({
// 应用类型标识。它和使用场景标识（scene字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
appkey: "appkey",
// 使用场景标识。它和应用类型标识（appkey字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
scene: "scene",
// 声明智能验证需要渲染的目标元素ID。
renderTo: '#captcha',
width: 362,
height: 42,
// 验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
success: function (data) {
window.console && console.log(data.sessionId)
window.console && console.log(data.sig)
window.console && console.log(data.token)
const params={
sessionId:data.sessionId,
sig:data.sig,
token:data.token
}
_this.$emit('callbackData',params)
console.log(_this)
},
// 验证失败时触发该回调参数
fail: function (failCode) {
console.log(failCode)
},
// 验证码加载异常时触发该回调参数
error: function (errorCode) {
console.log(errorCode)
}
});
})
},
然后写个方法，将需动态加载的js文件添加上。
// 动态加载js文件
get_ALY_file () {
try {
var stamp = new Date().getTime();
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'https://g.alicdn.com/sd/nvc/1.1.112/guide.js?t=' + stamp);
document.documentElement.appendChild(script);
} catch (e) {
console.log(e)
}
}
最后在methods中实例化动态加载js文件的方法，调用实例和动态添加的js文件的方法
mounted() {
this.initCaptcha()
this.get_ALY_file()
// console.log(window.NVC_Opt)
},
四：完整的SlideCaptcha.vue 代码
<template>
<div>
<div id="captcha"></div>
</div>
</template>
<script>
export default {
name: "AiCaptcha",
data() {
return {
ic: null
}
},
created() {
window.NVC_Opt = {
appkey:'appkey',//需要使用的appkey
scene:'scene',//需要使用的scene
renderTo:'#captcha',
trans: {"key1": "code0", "nvcCode":200},
}
},
methods: {
initCaptcha() {
// console.log(AWSC)
// 实例化ic对象
let _this=this
AWSC.use("ic", function (state, module) {
// 初始化
window.ic = module.init({
// 应用类型标识。它和使用场景标识（scene字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
appkey: "appkey",
// 使用场景标识。它和应用类型标识（appkey字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
scene: "scene",
// 声明智能验证需要渲染的目标元素ID。
renderTo: '#captcha',
width: 362,
height: 42,
// 验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
success: function (data) {
window.console && console.log(data.sessionId)
window.console && console.log(data.sig)
window.console && console.log(data.token)
const params={
sessionId:data.sessionId,
sig:data.sig,
token:data.token
}
_this.$emit('callbackData',params)
console.log(_this)
},
// 验证失败时触发该回调参数
fail: function (failCode) {
console.log(failCode)
},
// 验证码加载异常时触发该回调参数
error: function (errorCode) {
console.log(errorCode)
}
});
})
},
// 动态加载js文件
get_ALY_file () {
try {
var stamp = new Date().getTime();
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'https://g.alicdn.com/sd/nvc/1.1.112/guide.js?t=' + stamp);
document.documentElement.appendChild(script);
} catch (e) {
console.log(e)
}
}
},
mounted() {
this.initCaptcha()
this.get_ALY_file()
// console.log(window.NVC_Opt)
},
}
</script>
这样一个完整的人机验证的功能就实现啦。其实官网上给的代码还是比较完整的，使用时候只要注意官网提示到需要注意的地方的话，功能还是很好写的，先前一开始并没有注意到，所以出现了一些问题，后来学习了文档后发现了问题，及时做了处理，功能就实现了。
