切图网qietu.com提供专业的前端开发服务，当然也包括数据联调，api接口对接等，以下是应项目需要本地试运行并且跑通的比较复杂的阿里云验证码2.0接口的情况，附aliyun验证码2.0-一页面多用 popup模式+layer弹窗代码片段；

js代码

<script>
window.AliyunCaptchaConfig = {
// 必填，验证码示例所属地区，支持中国内地（cn）、新加坡（sgp）。
region: "cn",
// 必填，身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标。
prefix: "1jovvx",

};
</script>
<!-- 2.集成主JS -->
<script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>

<script type="text/javascript">
$('#btn').click(function(){
$('#yzm').click();
})

$(document).on('click','#login-btn',function(){
alert(3);
$('#yzm').click();
})

/*自定义一段阿里云调用代码，可以回调写一段自己的js代码
方法aliyunCodev2(function(){

alert(3);
})
* */
function aliyunCodev2(buttonId, callback){
var captcha;
// 嵌入式，除region和prefix以外的参数
window.initAliyunCaptcha({
// 场景ID。通过步骤一添加验证场景后，您可以在验证码场景列表，获取该场景的场景ID
SceneId: '1t6qjrc2',
// 验证码模式。embed表示要集成的验证码模式为嵌入式。无需修改
mode: 'popup',
// 页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
//element: '#captcha-element',
// 触发业务请求的元素。button表示单击登录按钮后，触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值
//button: '#yzm',
button:buttonId,
// 业务请求(带验证码校验)回调函数，无需修改
captchaVerifyCallback: captchaVerifyCallback,
// 业务请求结果回调函数，无需修改
onBizResultCallback: onBizResultCallback,
// 绑定验证码实例函数，无需修改
getInstance: getInstance,
// 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px
slideStyle: {
width: 360,
height: 40,
},
// 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
language: 'cn',
// 完成验证后，是否立即发送验证请求（调用captchaVerifyCallback函数）
immediate: false,
});
// 绑定验证码实例函数。该函数为固定写法，无需修改
function getInstance(instance) {
captcha = instance;
}

/**
* @name captchaVerifyCallback
* @function
* @param {String} captchaVerifyParam - 由验证码脚本回调的验证参数，不需要做任何处理，直接传给服务端即可
* @param {Function} callback - 回调函数，用于处理验证结果，ES5语法兼容
*/
function captchaVerifyCallback(captchaVerifyParam) {

//alert(3);
// 1.向后端发起业务请求，获取验证码验证结果和业务结果
// requestVerifyResult('http://您的业务请求地址', {
// captchaVerifyParam: captchaVerifyParam, // 验证码参数
// //yourBizParam... // 业务参数
// }, function(result) {
// // 2.构造标准返回参数
// var verifyResult = {
// captchaResult: result.captchaVerifyResult,
// bizResult: result.bizResult,
// };
// // 调用回调函数，传入验证结果
// callback(verifyResult);
// });
//callback(1);

// 2.构造标准返回参数
const verifyResult = {
// 验证码验证是否通过，boolean类型，必选。
captchaResult: true,
// 业务验证是否通过，boolean类型，可选；若为无业务验证结果的场景，bizResult可以为空。
//bizResult: 从result获取您的业务验证结果,

};
return verifyResult;

}

// 业务请求验证结果回调函数
function onBizResultCallback(bizResult) {
//alert('aaa');

if (bizResult === true) {
// 如果业务验证通过，跳转到对应页面。此处以跳转到https://www.aliyun.com/页面为例
//window.location.href = 'https://www.aliyun.com/';

/*
验证码通过，执行之定义js方法
* */
// 检查传入的参数是否为函数
if (typeof callback === 'function') {
// 执行传入的函数
callback();
} else {
console.error('传入的参数不是一个函数');
}
} else {
// 如果业务验证不通过，给出不通过提示。此处不通过提示为业务验证不通过！
alert('业务验证不通过！');
}
}

}

$('#open').click(function(){
layer.open({
type: 1,
title:false,
zIndex: 2000, // 设置z-index
skin: 'm-lay1 m-lay-loginnew m-layclose', //加上边框
area: ['540px', 'auto'], //宽高
//content:$('#login'),
//content:$('.embed-wrapper'),
content:'<div class="embed-wrapper">'+
'<div>'+
'<label>用户名：</label>'+
'<input id="username-embed" class="biz-input">'+
'</div>'+
'<div>'+
'<label>密码：</label>'+
'<input id="password-embed" type="password" class="biz-input">'+
'</div>'+
'<div id="captcha-element"></div><br/><br/><br/>'+
'<button id="login-btn" class="login-btn">登录</button><button style="display: ;" id="yzm">触发验证码弹窗</button>'+
'</div>',
btn: false,
btnAlign: 'c',
shade: [0.6],
shadeClose:true,
success:function(){

aliyunCodev2('#yzm',function(){
alert(333333333333);
})

}
});
})

$('#open2').click(function(){
layer.open({
type: 1,
title:false,
zIndex: 2000, // 设置z-index
skin: 'm-lay1 m-lay-loginnew m-layclose', //加上边框
area: ['540px', 'auto'], //宽高
//content:$('#login'),
//content:$('.embed-wrapper'),
content:'<div class="embed-wrapper">'+
'<div>'+
'<label>用户名：</label>'+
'<input id="username-embed" class="biz-input">'+
'</div>'+
'<div>'+
'<label>密码：</label>'+
'<input id="password-embed" type="password" class="biz-input">'+
'</div>'+
'<div id="captcha-element"></div><br/><br/><br/>'+
'<button id="login-btn" class="login-btn">登录</button><button style="display: ;" id="yzm2">触发验证码弹窗</button><button style="display: ;" id="yzm3">触发验证码弹窗3</button>'+
'</div>',
btn: false,
btnAlign: 'c',
shade: [0.6],
shadeClose:true,
success:function(){
aliyunCodev2('#yzm2',function(){
//根据值不同给不同方法
switch ($('body').data('yzmbtn')){
case 'aaa':
alert(3);
break;
}

})

//$('#yzm3').click(function(){
$(document).on('click','#yzm3',function(){

$('body').attr('data-yzmbtn','aaa'); //标记点击元素
$('#yzm2').click();
})

}
});
})

切图网qietu.com是国内较早提供专业前端开发服务的公司，为cctv7、腾讯、智联招聘等企业提供过服务，有需要的联系。

标签：阿里云, 验证码