极验校验 web端使用

思路：
1.引入极验校验的 gt.js
2.向后台请求数据，拿到 初始化必传参数 challenge geetestId success
3.初始化极验
4.处理校验成功或者失败情况所需要的状况
5.二次校验 不成功则重置极验校验
6.gt文件在极验官网上下载demo网页可获得

下面代码也是思路，比较具象话的

<template>
  <div>
  		<!-- 追加数据的盒子 -->
	    <div id="captcha-box"> </div>
  </div>
</template>
<script>
import gt from '../../config/gt.js'
	export default {
		 data() {
		    return {
		      name: "",
		      pass: "",
		      type: 0 ,
		      checkCode:{
		          challenge:'',
		          geetestId:'',
		          success: '',
		      }
		    };
		  },
		 mounted(){
			this.init()
		},
		methods:{
			//向后台请求 初始化数据
			init(){
				ajax.get(   _   ).then( （）=> {
					this.checkCode = res.data.checkCode
					this.initGeetestBehover()
				} ）
			},
			//初始化
			initGeetestBehover(){
			  let _this = this
		      initGeetest({
		        // 以下配置参数来自服务端
		        gt: _this.checkCode.geetestId,
		        challenge: _this.checkCode.challenge,
		        offline: !_this.checkCode.success,
		        new_captcha: true,
		        width:'286px',
		        product:'float',
		        lang:'zh-cn'
		      }, function (captchaObj) {
		          // 这里可以调用验证实例 captchaObj 的实例方法
		          captchaObj.appendTo('#captcha-box');
		          _this.captchaObj = captchaObj
		          captchaObj.onSuccess(()=>{
		            // console.log('成功')
		          })
		          captchaObj.onError(()=>{
		              // console.log('失败')
		              captchaObj.reset(); // 调用该接口进行重置
		          })
		          captchaObj.onClose(()=>{
		            // console.log('关闭')
		          })
		      })
			},
			//二次校验
			doubleVerify(){
				ajax.get(   _   ).then( （）=> {
					if(成功){
						console.log('该干嘛干嘛')
					}else{
						this.init()
					}
				} ）
			},


		}
	}

</script>