vue3.0+typescript+极验

秒速五厘米 2022-10-26 14:18 153阅读 0赞

# 案例 #

**sdk**

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

[https://github.com/GeeTeam/gt3-node-sdk/blob/master/demo/static/libs/gt.js][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>

[https_github.com_GeeTeam_gt3-node-sdk_blob_master_demo_static_libs_gt.js]: https://github.com/GeeTeam/gt3-node-sdk/blob/master/demo/static/libs/gt.js