Add WeChat auth entry for H5
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user