vue3.0+typescript+极验

案例

sdk

下载后保存到本地引入到html文件里面

https://github.com/GeeTeam/gt3-node-sdk/blob/master/demo/static/libs/gt.js
登录界面

<template>
  <div>
    <common-layout>
      <div>
        <a-row>
          <a-col :span="9"> </a-col>
          <a-col :span="5">
            <div class="formbox">
              <h2 class="login">
                <img src="../../assets/logo.png" alt="">玖禾系统后台
              </h2>
              <div class="textinfo">
                Ant Design 是西湖区最具影响力的 Web 设计规范
              </div>
                 <a-form
                    layout="vertical"
                    :model="formInline"
                    @submit="handleSubmit"
                    @submit.native.prevent
                    class="myform"
                  >
                    <a-form-item>
                      <a-input
                        v-model:value="formInline.user"
                        placeholder="Username"
                      >
                        <template #prefix><UserOutlined /></template>
                      </a-input>
                    </a-form-item>
                    <a-form-item>
                      <a-input
                        v-model:value="formInline.password"
                        type="password"
                        placeholder="Password"
                      >
                        <template #prefix><LockOutlined /></template>
                      </a-input>
                    </a-form-item>
                      <a-form-item>
                        <a-checkbox v-model:checked="checked" @change="onChange">
                          记住密码
                        </a-checkbox>
                    </a-form-item>
                 
                    <a-form-item>
                      <a-button
                        class="buttonLogin"
                        type="primary"
                        html-type="submit"
                      >
                        登录
                      </a-button>
                    </a-form-item>
                  </a-form>
            </div>
          </a-col>
          <a-col :span="9"> </a-col>
        </a-row>
      </div>
    </common-layout>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs,
getCurrentInstance,
onBeforeMount
} from "vue";
import { message } from 'ant-design-vue';
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import CommonLayout from "../../layouts/CommonLayout.vue";
interface GeetestEntity {
  gt:string;
  challenge:string;
  new_captcha:boolean;
  success:number;
}
export default defineComponent({
  components: { CommonLayout, UserOutlined, LockOutlined },
  setup() {
    const http = getCurrentInstance()?.appContext.config.globalProperties.$axios
    
   const initGeetest=(param:GeetestEntity)=> {
    if ( ! (window as any) || ! (window as any).initGeetest ) {
     return false;
    }
    (window as any).initGeetest({
     gt: param.gt,
     challenge: param.challenge,
     offline: ! param.success,
     new_captcha: param.new_captcha,
     timeout: '5000',
     product: 'bind',
     width: '300px',
     https: true,
  
    }, captchaObj_callback);
   }
   /**
    * 初始化后的回调函数
    */
    const captchaObj_callback=(captchaObj: any) =>{
    obj.captchaEntity = captchaObj; // promise对象
    console.log('captchaObj', captchaObj)
    captchaObj
     .onReady(() => { // 验证码就位
     })
     .onSuccess(() => {
      const rst = captchaObj.getValidate();
      console.log('rst', rst)
      if (!rst) {
        message.warning('请完成验证');
      }

      // 调用后台check this.captchaObj
        // verify_check(rst);
     })
     .onError((err: Error) => {
      console.log(err);
     });
   }
    const getAuth=async()=> {
        const res = await  http.request({
        url: "/base/firstGeetest",
        method: "get"
    })
     initGeetest(JSON.parse(res.data.data));//初始化
    }
    onBeforeMount(()=>{
      getAuth()
    
    });
     
    const obj = reactive({
      captchaEntity:null,//验证码实体
      handleSubmit: (e: any) => {
      //验证开始
     (obj.captchaEntity as any).verify();
      },
      formInline: {
        user: "",
        password: "",
      },
      checked:true,
      onChange:(e: any) =>{
      console.log(`checked = ${e.target.checked}`);
       },
    });
    const data = toRefs(obj);
    
    return {
      ...data,
    };
  },
});
</script>
<style lang="less" scoped>
.formbox {
  max-width: 400px;
  min-width: 372px;
  margin-top: 100px;
  
}
.myform{
  margin-top: 40px;
}
.login {
  font-size: 33px;
  color: rgba(0, 0, 0, 0.85);
  font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 600;
  position: relative;
  text-align: center;
  top: 2px;
  img{
    height: 44px;
    margin-right: 16px;
  }
}
.buttonLogin {
  max-width: 400px;
  min-width: 372px;
}
.textinfo{
      font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 12px;
    text-align: center;
    margin-bottom: 40px;
}
</style>