vue3中封装极验组件进行行为验证

1.引入初始化函数(gt4.js下载地址: https://static.geetest.com/v4/gt4.js)

<script src="gt4.js"></script>

注： 行为验证要求初始化在业务页面加载时同时初始化，否则验证无法读取用户在业务页面操作的行为数据，会导致验证策略失效。

2.封装验证组件

<template>
    <div class="captcha"></div>
  </template>
  
  <script setup>
  const props = defineProps({
    captchaConfig:Object
  });
  if(props.captchaConfig){
    window.initGeetest4(
        props.captchaConfig.config,
        props.captchaConfig.handler
    );
  }
  </script>

3.页面中去使用

<template>
    <a-form ref="formRef" :model="form" :rules="rules">
        <a-form-item name="username">
            <a-input allow-clear size="large" style="border-bottom: 1px solid #d9d9d9;" :bordered="false"
                v-model:value="form.username" :placeholder="t('login.username')">
                <template #prefix>
                    <user-outlined />
                </template>
            </a-input>
        </a-form-item>
        <a-form-item name="password">
            <a-input-password size="large" style="border-bottom: 1px solid #d9d9d9;" :bordered="false"
                v-model:value="form.password" :placeholder="t('login.password')">
                <template #prefix>
                    <lock-outlined />
                </template>
            </a-input-password>
        </a-form-item>
        <div id="captcha" :class="captchaConfig.config.product === 'bind' ? 'hideHeight' : ''">
                <GeetestCaptcha :captcha-config="captchaConfig" />
        </div>
        <a-form-item style="margin-bottom: 0;">
            <a-button block size="large" type="primary" :loading="loading" @click="showPopup">
                登录
            </a-button>
        </a-form-item>
        
    </a-form>
</template>
  
<script setup>
import GeetestCaptcha from '@/components/Geetest/GeetestCaptcha.vue'
import { ref, reactive, computed, unref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue/es';
import {
    UserOutlined,
    LockOutlined,
    SafetyCertificateOutlined,
    QqOutlined,
    WechatOutlined,
    WeiboOutlined
} from '@ant-design/icons-vue';
import I18nIcon from '@/layout/components/i18n-icon.vue';
import { getToken } from '@/utils/token-util';
import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
import { login} from '@/api/login';
const { currentRoute } = useRouter();
const { t } = useI18n();
const formRef = ref(null);

// 加载状态
const loading = ref(false);
const captchaHandler = (captchaObj) => {
    window.captchaObj = captchaObj;
    captchaObj
        .appendTo("#captcha")
        .onReady(function () {
            console.log("ready");
        })
        .onNextReady(function () {
            console.log("nextReady");
        })
        .onBoxShow(function () {
            console.log("boxShow");
        })
        .onError(function (e) {
            console.log(e);
        })
        .onSuccess(function () {
            if (captchaConfig.config.product === "bind") {
                submit()
            }
        });
};
//配置极验验证参数
const captchaConfig = reactive({
    config: {
        captchaId: "********************",//实际你申请的captchaId
        product: "bind",
        // nativeButton: {
        //     height: '40px',
        //     width: '100%'
        // }
    },
    handler: captchaHandler,
});

// 表单数据
const form = reactive({
    username: 'admin',
    password: '123456',
});



// 表单验证规则
const rules = computed(() => {
    return {
        username: [
            {
                required: true,
                message: t('login.username'),
                type: 'string',
                trigger: 'blur'
            }
        ],
        password: [
            {
                required: true,
                message: t('login.password'),
                type: 'string',
                trigger: 'blur'
            }
        ]
    };
});
const showPopup =()=>{
    if (captchaConfig.config.product === "bind") {
        if (window.captchaObj) {
          window.captchaObj.showCaptcha();
        } else {
          alert("请等待验证初始化完成");
          return false;
        }
    }
}
/* 跳转到首页 */
const goHome = () => {
    const { query } = unref(currentRoute);
    goHomeRoute(query.from);
};
/* 提交 */
const submit = () => {
    if (!formRef.value) {
        return;
    }
    formRef.value.validate().then(() => {
        loading.value = true;
        login(form)
            .then(() => {
                message.success('登录成功');
                cleanPageTabs();
                goHome();
            })
            .catch((e) => {
                window.captchaObj.reset();
                message.error(e.message);
                loading.value = false;
            });

      

    });
};


</script>
  
<style lang="less" scoped>
.hideHeight {
    height: 0;
}




</style>