步骤
第一步:在你的项目中引入gt.js在官方 <a>http://static.geetest.com/static/tools/gt.js</a>
第二步:就是使用这个这个文件 得提前声明一下才可以用 decare let initGeetest:any;我是基于angular2的,如果不是可以用window.initGeetest调用这个方法
第三步:调用接口成功之后返回我想要的数据之后再调用这个方法
let _this = this;
let t1 = setInterval(function(){
if(_this.timeNum > 1){
_this.timeNum --;
_this.getCodeByText = "重新获取(" + _this.timeNum +'s)'
} else {
clearInterval(t1)
_this.timeNum = 60
_this.getCodeByText = "重新获取"
_this.disabledGetCode = false;
}
},1000)
initGeetest({
gt: res.data.gt,
challenge: res.data.challenge,
offline: !res.data.success, // 表示用户后台检测极验服务器是否宕机
new_captcha: res.data.new_captcha, // 用于宕机时表示是新验证码的宕机
product: 'bind', // 设置下一步验证的展现形式 这个就是模态框显示出来
}, function (captchaObj) {
//onReady方法
captchaObj.onReady(function () {
_this.indexImg++;
captchaObj.verify();
setTimeout(function () {
console.log('是否出现了弹窗+开始设置样式 第二次');
}, 500)
});
// onSuccess方法
captchaObj.onSuccess(function () {
console.log('回调函数onSuccess');
_this.gtResult = captchaObj.getValidate();
_this.paramLogin.geetest_challenge = _this.gtResult.geetest_challenge
_this.paramLogin.geetest_validate = _this.gtResult.geetest_validate
_this.paramLogin.geetest_seccode = _this.gtResult.geetest_seccode
console.log('回调函数onSuccess中的 ===result验证结果 ===');
if (!_this.gtResult) {
this.tipShow('请完成验证');
return;
}
});
// onError
captchaObj.onError(function () {
// 出错啦,可以提醒用户稍后进行重试
console.log('出错啦,onError方法');
});
// onClose方法
captchaObj.onClose(function () {
console.log('请完成验证')
// _this.inviteBtnDisabled = false;
});
})