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>

标签：初始化,gt,api,Geetest,js,vue,滑动,captchaObj,data
来源： https://blog.csdn.net/sxs7970/article/details/120363819