vue使用Geetest进行滑动验证

文档地址
参数配置


首先到官方的demo中去下载gt.js文件,
gt.js地址


main.js中引入gt.js文件,这样就能使用它的初始化api,挂在到了windows上

// 使用Geetest 滑动校验
import "@/assets/js/gt"

//在登录页面
<template>
	<section>
		<div id="test"></div>
	</section>
</template>
<script>
export default{
	mounted(){
		//1.先调用后端给的初始化接口,拿到initGeetest需要的 对应的配置参数 
		//这里换成自己对应的封装请求
		this.$api.init('初始化接口地址xxx').then(res=>{
			let {code,data}=res;
			initGeetest({
			 gt: data.gt,
          	 challenge: data.challenge,
          	 offline: !data.success,
          	 product: "popup"
          	 },(captchaObj)=>{
          	 	var validate = captchaObj.getValidate();
          	 	captchaObj.appendTo('#test');//把图形渲染到对应的dom元素中
          	 	captchaObj.onReady(()=>{})
          	 	captchaObj.onSuccess(()=>{
          	 		//这里是验证成功的回调,这里可以处理逻辑
          	 		 captchaObj.destroy();//这里是销毁实例,处理完逻辑最终销毁
          	 	})
          	 })
		})
		
	}
}
</script>
上一篇:SAP盘点:创建盘点凭证BAPI_MATPHYSINV_CREATE_MULT


下一篇:Android——GT使用教程(总)