极验校验 web端使用

矫情吗；* 2024-04-18 10:55 43阅读 0赞

思路：  
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>