Add WeChat auth entry for H5

This commit is contained in:
2026-07-05 19:48:32 +08:00
parent a4b59add07
commit fa2d82333c
4 changed files with 100 additions and 5 deletions

View File

@@ -128,6 +128,20 @@ export default function H5QAExperience() {
.finally(() => setLoadingQa(false));
}, []);
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const code = params.get("code");
const state = params.get("state");
if (code && state === "hyqa_h5") {
setUser({
mode: "wechat",
name: "微信已授权",
phone: "等待后端换取登录态"
});
window.history.replaceState(null, "", window.location.pathname);
}
}, []);
useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
}, [messages, activeTab]);
@@ -141,6 +155,15 @@ export default function H5QAExperience() {
setAuthOpen(false);
}
function mockWechatLogin() {
setUser({
mode: "wechat",
name: "微信用户",
phone: "微信授权演示"
});
setAuthOpen(false);
}
function persistMessages(nextMessages: ChatMessage[]) {
setMessages(nextMessages);
setSessions((current) => {
@@ -413,6 +436,7 @@ export default function H5QAExperience() {
user={user}
onClose={() => setAuthOpen(false)}
onMockLogin={mockLogin}
onWechatMockLogin={mockWechatLogin}
onLogout={() => {
setUser(null);
setAuthOpen(false);

View File

@@ -1,11 +1,12 @@
"use client";
import { LogIn, ShieldCheck, UserPlus, X } from "lucide-react";
import { LogIn, MessageCircle, ShieldCheck, UserPlus, X } from "lucide-react";
import { buildWechatOAuthUrl, getWechatAuthConfig, isWechatBrowser } from "@/lib/wechatAuth";
export type MockUser = {
name: string;
phone: string;
mode: "login" | "register";
mode: "login" | "register" | "wechat";
};
export default function MockAuthPanel({
@@ -13,23 +14,36 @@ export default function MockAuthPanel({
user,
onClose,
onMockLogin,
onWechatMockLogin,
onLogout
}: {
open: boolean;
user: MockUser | null;
onClose: () => void;
onMockLogin: (mode: MockUser["mode"]) => void;
onWechatMockLogin: () => void;
onLogout: () => void;
}) {
if (!open) return null;
const wechatConfig = getWechatAuthConfig();
const inWechat = typeof navigator !== "undefined" && isWechatBrowser(navigator.userAgent);
function startWechatAuth() {
if (wechatConfig) {
window.location.href = buildWechatOAuthUrl(wechatConfig);
return;
}
onWechatMockLogin();
}
return (
<div className="absolute inset-0 z-30 flex items-end bg-slate-950/35 px-3 pb-3">
<section className="w-full rounded-t-[18px] rounded-b-md bg-white p-4 shadow-2xl">
<div className="mb-4 flex items-center justify-between">
<div>
<h2 className="text-lg font-semibold text-ink"></h2>
<p className="mt-1 text-sm text-slate-500"> mock </p>
<p className="mt-1 text-sm text-slate-500">使</p>
</div>
<button onClick={onClose} className="flex h-9 w-9 items-center justify-center rounded-md hover:bg-slate-100" aria-label="关闭">
<X className="h-5 w-5" aria-hidden />
@@ -54,8 +68,15 @@ export default function MockAuthPanel({
) : (
<div className="grid gap-3">
<button
onClick={() => onMockLogin("login")}
onClick={startWechatAuth}
className="flex h-11 items-center justify-center gap-2 rounded-md bg-jade text-sm font-medium text-white hover:bg-teal-800"
>
<MessageCircle className="h-4 w-4" aria-hidden />
{wechatConfig ? "微信授权登录" : "微信授权演示"}
</button>
<button
onClick={() => onMockLogin("login")}
className="flex h-11 items-center justify-center gap-2 rounded-md border border-line text-sm font-medium text-ink hover:bg-slate-50"
>
<LogIn className="h-4 w-4" aria-hidden />
mock
@@ -71,7 +92,9 @@ export default function MockAuthPanel({
)}
<div className="mt-4 rounded-md bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800">
{wechatConfig
? `已配置微信 OAuth${inWechat ? ",当前在微信内置浏览器中。" : "。如果不在微信内打开,授权页可能无法完成。"}`
: "尚未配置 NEXT_PUBLIC_WECHAT_APP_ID当前按钮只模拟微信授权不写入后端。"}
</div>
</section>
</div>