🎨 优化方法

This commit is contained in:
BTMuli
2023-09-30 21:03:53 +08:00
parent dd940d5a2b
commit 3cd2586ed4
7 changed files with 60 additions and 69 deletions

View File

@@ -36,5 +36,6 @@ rules:
leadingUnderscore: "allow" leadingUnderscore: "allow"
trailingUnderscore: "allow" trailingUnderscore: "allow"
"@typescript-eslint/no-non-null-assertion": warn "@typescript-eslint/no-non-null-assertion": warn
"@typescript-eslint/no-misused-promises": warn
# Vue # Vue
"vue/multi-word-component-names": off "vue/multi-word-component-names": off

View File

@@ -5,7 +5,7 @@
*/ */
import { h, render, type VNode } from "vue"; import { h, render, type VNode } from "vue";
import geetest from "./geetest.vue"; import geetest, { type GeetestParam } from "./geetest.vue";
const geetestId = "tg-func-geetest"; const geetestId = "tg-func-geetest";
@@ -20,13 +20,13 @@ const renderBox = (): VNode => {
let geetestInstance: VNode; let geetestInstance: VNode;
const showGeetest = async (): Promise<string | boolean> => { const showGeetest = async (props: GeetestParam): Promise<string | boolean> => {
if (geetestInstance) { if (geetestInstance) {
const boxVue = geetestInstance.component; const boxVue = geetestInstance.component;
return boxVue?.exposeProxy?.displayBox(); return boxVue?.exposeProxy?.displayBox();
} else { } else {
geetestInstance = renderBox(); geetestInstance = renderBox();
return await showGeetest(); return await showGeetest(props);
} }
}; };

View File

@@ -1,6 +1,6 @@
<template> <template>
<transition name="func-geetest-outer"> <transition name="func-geetest-outer">
<div v-show="show || showOuter" class="geetest-overlay" @click.self.prevent="handleOuter"> <div v-show="show || showOuter" class="geetest-overlay" @click.self.prevent>
<transition name="func-geetest-inner"> <transition name="func-geetest-inner">
<div v-show="showInner" class="geetest-box"> <div v-show="showInner" class="geetest-box">
<div class="geetest-top"> <div class="geetest-top">
@@ -26,7 +26,11 @@ const showInner = ref<boolean>(false);
const userStore = useUserStore(); const userStore = useUserStore();
const geetestRef = ref<HTMLElement | null>(null); export interface GeetestParam {
urlOri: string;
}
const geetestRef = ref<HTMLElement>(<HTMLElement>document.getElementById("geetest"));
watch(show, () => { watch(show, () => {
if (show.value) { if (show.value) {
@@ -44,7 +48,7 @@ watch(show, () => {
} }
}); });
async function displayBox(): Promise<void> { async function displayBox(urlOri: string): Promise<boolean> {
const cookie = userStore.getCookieGroup3(); const cookie = userStore.getCookieGroup3();
const res = await TGRequest.User.verification.get(cookie.ltoken, cookie.ltuid); const res = await TGRequest.User.verification.get(cookie.ltoken, cookie.ltuid);
if ("retcode" in res) { if ("retcode" in res) {
@@ -52,9 +56,10 @@ async function displayBox(): Promise<void> {
text: `[${res.retcode}]${res.message}`, text: `[${res.retcode}]${res.message}`,
color: "error", color: "error",
}); });
return; return false;
} }
show.value = true; show.value = true;
return await new Promise((resolve) => {
// @ts-expect-error Cannot find name 'initGeetest'. // @ts-expect-error Cannot find name 'initGeetest'.
initGeetest( initGeetest(
{ {
@@ -67,33 +72,19 @@ async function displayBox(): Promise<void> {
width: "250px", width: "250px",
}, },
(captchaObj: TGApp.BBS.Geetest.GeetestCaptcha) => { (captchaObj: TGApp.BBS.Geetest.GeetestCaptcha) => {
geetestRef.value = document.getElementById("geetest");
if (geetestRef.value === null) throw new Error("Cannot find element with id 'geetest'.");
geetestRef.value.innerHTML = ""; geetestRef.value.innerHTML = "";
captchaObj.appendTo("#geetest"); captchaObj.appendTo("#geetest");
captchaObj captchaObj.onSuccess(async () => {
.onReady(() => {
console.log("ready");
})
.onSuccess(() => {
const validate = captchaObj.getValidate(); const validate = captchaObj.getValidate();
(async () => { const res = TGRequest.User.verification.verify(urlOri, userStore.cookie, validate);
await TGRequest.User.verification.verify(userStore.cookie, validate); resolve(res);
});
captchaObj.onClose(() => {
show.value = false; show.value = false;
})().catch(() => {}); // 防止报错
})
.onError(() => {
console.log("error");
})
.onClose(() => {
console.log("close");
}); });
}, },
); );
} });
function handleOuter(): void {
show.value = false;
} }
defineExpose({ defineExpose({

View File

@@ -30,7 +30,8 @@ onMounted(async () => {
}); });
async function getGC(): Promise<void> { async function getGC(): Promise<void> {
await showGeetest(); const res = await showGeetest();
console.log(res);
} }
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>

View File

@@ -2,7 +2,7 @@
* @file types BBS Geetest.d.ts * @file types BBS Geetest.d.ts
* @description BBS 极验相关类型定义文件 * @description BBS 极验相关类型定义文件
* @author BTMuli<bt-muli@outlook.com> * @author BTMuli<bt-muli@outlook.com>
* @since Alpha v0.2.2 * @since Beta v0.3.3
*/ */
declare namespace TGApp.BBS.Geetest { declare namespace TGApp.BBS.Geetest {
@@ -76,22 +76,19 @@ declare namespace TGApp.BBS.Geetest {
* @since Beta v0.3.3 * @since Beta v0.3.3
* @todo 完善 * @todo 完善
* @interface GeetestCaptcha * @interface GeetestCaptcha
* @property {string} getValidate * @property {Function} appendTo
* @property {Function} onReady * @property {Function} getValidate
* @property {Function} onRefresh * @property {Function} onRefresh
* @property {Function} onSuccess * @property {Function} onSuccess
* @property {Function} onError
* @property {Function} onClose * @property {Function} onClose
* @return GeetestCaptcha * @return GeetestCaptcha
*/ */
export interface GeetestCaptcha { export interface GeetestCaptcha {
appendTo: (selector: string) => void; appendTo: (selector: string) => void;
getValidate: () => GeetestValidate; getValidate: () => GeetestValidate;
onReady: (callback: () => void) => GeetestCaptcha;
onRefresh: (callback: () => void) => GeetestCaptcha; onRefresh: (callback: () => void) => GeetestCaptcha;
onSuccess: (callback: () => void) => GeetestCaptcha; onSuccess: (callback: () => void) => void;
onError: (callback: () => void) => GeetestCaptcha; onClose: (callback: () => void) => void;
onClose: (callback: () => void) => GeetestCaptcha;
} }
/** /**

View File

@@ -41,44 +41,48 @@ export async function getVerification(
* @description 将验证完的参数提交给米游社 * @description 将验证完的参数提交给米游社
* @since Beta v0.3.3 * @since Beta v0.3.3
* @todo 待测试 * @todo 待测试
* @param {string} urlOri 原始 url
* @param {Record<string, string>} cookie cookie * @param {Record<string, string>} cookie cookie
* @param {TGApp.BBS.Geetest.GeetestValidate} validate 验证码参数 * @param {TGApp.BBS.Geetest.GeetestValidate} validate 验证码参数
* @return {Promise<TGApp.BBS.Response.Base|unknown>} 提交结果 * @return {Promise<boolean>} 提交结果
*/ */
export async function submitVerification( export async function submitVerification(
urlOri: string,
cookie: Record<string, string>, cookie: Record<string, string>,
validate: TGApp.BBS.Geetest.GeetestValidate, validate: TGApp.BBS.Geetest.GeetestValidate,
): Promise<TGApp.BBS.Response.Base | unknown> { ): Promise<boolean> {
const url = "https://api-takumi-record.mihoyo.com/game_record/app/card/wapi/verifyVerification"; const url = "https://api-takumi-record.mihoyo.com/game_record/app/card/wapi/verifyVerification";
const data = { const dataRaw = {
geetest_challenge: validate.geetest_challenge, geetest_challenge: validate.geetest_challenge,
geetest_validate: validate.geetest_validate, geetest_validate: validate.geetest_validate,
geetest_seccode: validate.geetest_seccode, geetest_seccode: validate.geetest_seccode,
}; };
console.log(data); const data = JSON.stringify(dataRaw);
const header = TGUtils.User.getHeader(cookie, "POST", data, "lk2", true); const header = TGUtils.User.getHeader(cookie, "POST", data, "common", false);
const reqHeader = { const reqHeader = {
...header, ...header,
"x-rpc-challenge_game": "2", "x-rpc-challenge_game": "2",
"x-rpc-challenge_trace": validate.geetest_challenge, "x-rpc-challenge": validate.geetest_challenge,
"x-rpc-validate": validate.geetest_validate, "x-rpc-validate": validate.geetest_validate,
"x-rpc-seccode": validate.geetest_seccode, "x-rpc-seccode": validate.geetest_seccode,
"x-rpc-challenge_path": urlOri,
}; };
console.log(reqHeader); console.log(reqHeader);
return await http return await http
.fetch<TGApp.BBS.Response.Base>(url, { .fetch<TGApp.BBS.Response.Base>(url, {
method: "POST", method: "POST",
headers: reqHeader, headers: reqHeader,
body: http.Body.json(data), body: http.Body.json(dataRaw),
}) })
.then((res) => { .then((res) => {
console.log(res.rawHeaders);
if (res.data.retcode !== 0) { if (res.data.retcode !== 0) {
showSnackbar({ showSnackbar({
text: `[${res.data.retcode}] ${res.data.message}`, text: `[${res.data.retcode}] ${res.data.message}`,
color: "error", color: "error",
}); });
console.error(res.data); return false;
} }
return res.data; return true;
}); });
} }

View File

@@ -1,13 +1,10 @@
/** /**
* @file web utils getRequestHeader.ts * @file web utils getRequestHeader.ts
* @description 获取请求头 * @description 获取请求头
* @author BTMuli <bt-muli@outlook.com> * @since Beta v0.3.3
* @since Beta v0.3.0
*/ */
// Node import Md5 from "js-md5";
import md5 from "js-md5";
// Tauri.Genshin
import TGConstant from "../constant/TGConstant"; import TGConstant from "../constant/TGConstant";
import { transCookie, transParams } from "./tools"; import { transCookie, transParams } from "./tools";
@@ -59,7 +56,7 @@ export function getRandomString(length: number): string {
/** /**
* @description 获取 ds * @description 获取 ds
* @since Beta v0.3.0 * @since Beta v0.3.3
* @version 2.50.1 * @version 2.50.1
* @param {string} method 请求方法 * @param {string} method 请求方法
* @param {string} data 请求数据 * @param {string} data 请求数据
@@ -76,7 +73,7 @@ function getDS(method: string, data: string, saltType: string, isSign: boolean):
const query = method === "GET" ? data : ""; const query = method === "GET" ? data : "";
let hashStr = `salt=${salt}&t=${time}&r=${random}&b=${body}&q=${query}`; let hashStr = `salt=${salt}&t=${time}&r=${random}&b=${body}&q=${query}`;
if (isSign) hashStr = `salt=${salt}&t=${time}&r=${random}`; if (isSign) hashStr = `salt=${salt}&t=${time}&r=${random}`;
const md5Str = md5.update(hashStr).hex(); const md5Str = Md5.md5.update(hashStr).hex();
return `${time},${random},${md5Str}`; return `${time},${random},${md5Str}`;
} }