f7e84e3ee7
All checks were successful
Deploy eCourt Note Web to Server / Validate Database Schema (Drizzle) (push) Successful in 4s
Deploy eCourt Note Web to Server / Build Web Docker Image (push) Successful in 1m16s
Deploy eCourt Note Web to Server / Deploy eCourt Note Web to Server (push) Successful in 4s
Deploy eCourt Note Web to Server / Notify Deployment Status (push) Successful in 1s
เพิ่มฟอร์ม "จำลอง e-Court — ขอ token ด้วย API key" บนหน้า /note/dev (components/MockEcourtForm): ใส่ DOCVER_API_KEY + userid/username + เลือกไฟล์ตัวอย่าง → ยิง POST /api/note/auth/token (ทางเข้าเดียวกับที่ e-Court ใช้จริง) แล้ว redirect เข้า /note?fileUrl=…&t=… ให้ NoteHome แลกเป็น session 8 ชม. ต่อ — ใช้ได้ทั้ง dev และ production และไม่เป็นประตูหลัง (ต้องถือ API key ที่ถูกต้อง) พร้อมกันนี้เปลี่ยนเกณฑ์เปิดหน้า dev เป็น env ตัวเดียว (คำขอผู้ใช้ 2026-11-02): - devMintEnabled: ตัดเงื่อนไข NODE_ENV≠production ออก เหลือ NOTE_SSO_DEV_MINT === "1" อย่างเดียว — ตั้งไว้บน production (เครื่องทดสอบ) ก็ใช้ได้ - หน้า /note/dev: 0/ไม่ตั้ง = 404 ทั้งหน้า (notFound) — เดิมเป็น public ตลอดเหลือแต่ข้อความแนะนำ - dev-link (GET/POST) เปิด/ปิดตามเกณฑ์เดียวกันโดยอัตโนมัติ - sync CLAUDE.md + ปรับ unit test ให้ตรงเกณฑ์ใหม่ Co-Authored-By: Claude Code <noreply@anthropic.com>
319 lines
21 KiB
TypeScript
319 lines
21 KiB
TypeScript
import Link from "next/link";
|
||
import { notFound } from "next/navigation";
|
||
|
||
import AppNav from "@/components/AppNav";
|
||
import DevLoginLinkForm from "@/components/DevLoginLinkForm";
|
||
import MockEcourtForm from "@/components/MockEcourtForm";
|
||
import { devMintEnabled } from "@/lib/note-auth";
|
||
|
||
export const dynamic = "force-dynamic";
|
||
|
||
/**
|
||
* /note/dev — เครื่องมือทดสอบ (ย้ายมาจากหน้าแรก 2026-10-30 ตอน /note เปลี่ยนเป็น
|
||
* landing เรียบ): เปิดเอกสารตัวอย่าง (D14) + คู่มือทางเข้า SSO 2 แบบ + ตัวช่วย mint
|
||
* ลิงก์ทดสอบ · **เปิดด้วย env NOTE_SSO_DEV_MINT=1 อย่างเดียว — 0/ไม่ตั้ง = 404
|
||
* ทั้งหน้า** (คำขอผู้ใช้ 2026-11-02, ใช้ได้ทุก environment รวม production ที่ตั้ง env
|
||
* ไว้) · ตัวอย่างลิงก์เป็น "รูปแบบ + ขั้นตอน" เท่านั้น ไม่มี secret ในหน้า
|
||
* · ไม่ query DB · แบนเนอร์ ?sso= และ bootstrap ของ N8 ?fileUrl= อยู่ที่หน้าแรก /note
|
||
*/
|
||
|
||
/** รายการเอกสาร fixed ในโค้ด (D14) — จาก PDF ตัวอย่างที่มีอยู่จริงของแอป
|
||
* (public/note/samples/ — ยังไม่ seed กดเปิดแล้ว N8 จะตอบ error เองที่หน้าแรก) */
|
||
const SAMPLE_DOCS: Record<string, string[]> = {
|
||
"คำสั่งศาล — คดี 01012-672427": [
|
||
"01012-672427-1f-690609-0000840223.pdf",
|
||
"01012-672427-4f-690609-0000840227.pdf",
|
||
],
|
||
"คำสั่งศาล — ตัวอย่าง": [
|
||
"court_command_11_123 1.pdf",
|
||
"court_command_1_2547 1.pdf",
|
||
],
|
||
};
|
||
|
||
/** code inline สไตล์เดียวกันทั้งหน้า */
|
||
function Code({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<code className="rounded bg-ink/[0.05] px-1 py-0.5 text-[13px] text-ink">
|
||
{children}
|
||
</code>
|
||
);
|
||
}
|
||
|
||
/** บล็อกคำสั่ง/URL ตัวอย่าง — อ่านง่ายบนจอแคบ (scroll แนวนอนได้) */
|
||
function CodeBlock({ children }: { children: string }) {
|
||
return (
|
||
<pre className="mt-2 overflow-x-auto rounded-lg border border-line bg-canvas px-3 py-2.5 text-[12.5px] leading-relaxed text-ink">
|
||
{children}
|
||
</pre>
|
||
);
|
||
}
|
||
|
||
export default async function DevToolsPage({
|
||
searchParams,
|
||
}: {
|
||
searchParams: Record<string, string | string[] | undefined>;
|
||
}) {
|
||
// ทางเข้าหน้านี้คุมด้วย env ตัวเดียวกับ dev-link (2026-11-02) — ปิด = 404
|
||
// เหมือนไม่มีหน้านี้ ไม่เหลือแค่ข้อความแนะนำ
|
||
if (!devMintEnabled()) notFound();
|
||
// โหมด credential ของลิงก์ตัวอย่าง — jwt (default) | ticket สลับผ่าน ?sampleMode=
|
||
const sampleMode = searchParams.sampleMode === "ticket" ? "ticket" : "jwt";
|
||
const mintOn = devMintEnabled();
|
||
return (
|
||
<>
|
||
<AppNav />
|
||
<main className="mx-auto max-w-4xl px-4 pb-16 pt-10 sm:px-6">
|
||
<h1 className="font-display text-3xl tracking-tight text-ink sm:text-headline">
|
||
เครื่องมือทดสอบ
|
||
</h1>
|
||
<p className="mt-2 text-body text-ink-soft">
|
||
หน้านี้สำหรับผู้พัฒนาและผู้ทดสอบ — ลองเปิดเอกสารตัวอย่าง
|
||
และดูวิธีเข้าระบบผ่านลิงก์ของ e-Court
|
||
</p>
|
||
|
||
{/* ── เปิดเอกสารตัวอย่าง (D14) — A Link Get(new) แบบ /tmpl ─────────── */}
|
||
<section className="mt-10">
|
||
<div className="border-b border-line pb-3">
|
||
<h2 className="font-display text-section-title text-ink">เปิดเอกสารตัวอย่าง</h2>
|
||
</div>
|
||
<p className="mt-3 text-sm text-ink-soft">
|
||
กดชื่อไฟล์แล้วระบบจะสร้างลิงก์แบบเดียวกับที่ e-Court ส่งมาให้
|
||
(แบบ{sampleMode === "jwt" ? " JWT" : " ticket"}) แล้วพาเข้าไปอ่านเอกสารนั้น
|
||
ทันที — ดูแถบที่อยู่ของ browser จะเห็นการทำงานทีละขั้นจริง ๆ
|
||
ตั้งแต่เข้าระบบจนถึงหน้าอ่านเอกสาร
|
||
</p>
|
||
{mintOn ? (
|
||
<div className="mt-4 flex flex-wrap items-center gap-2 text-sm">
|
||
<span className="text-ink-soft">รูปแบบลิงก์:</span>
|
||
{(["jwt", "ticket"] as const).map((m) => (
|
||
<Link
|
||
key={m}
|
||
href={m === "jwt" ? "/note/dev" : "/note/dev?sampleMode=ticket"}
|
||
aria-current={sampleMode === m ? "page" : undefined}
|
||
className={`focus-ring rounded-md border px-2.5 py-1 font-medium transition ${
|
||
sampleMode === m
|
||
? "border-primary bg-primary/[0.08] text-primary"
|
||
: "border-line bg-white text-ink-soft hover:border-ink-faint"
|
||
}`}
|
||
>
|
||
{m === "jwt" ? "JWT (ทาง A)" : "ticket (ทาง B)"}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="mt-3 rounded-lg border border-line bg-canvas p-3 text-xs leading-relaxed text-ink-soft">
|
||
ลิงก์ด้านล่างเปิดเอกสารด้วย session ที่มีอยู่เท่านั้น — ยังไม่มี session
|
||
ใช้ฟอร์ม "จำลอง e-Court" ด้านล่างแทน · dev server ที่ต้องการ mint
|
||
ให้อัตโนมัติ (ไม่ต้องใส่ key) เพิ่ม <Code>NOTE_SSO_DEV_MINT=1</Code>{" "}
|
||
แล้วรีสตาร์ท
|
||
</p>
|
||
)}
|
||
<div className="mt-5 max-w-xl rounded-xl border border-line bg-white p-6">
|
||
<h3 className="font-display text-subhead text-primary">A Link Get(new)</h3>
|
||
{Object.entries(SAMPLE_DOCS).map(([group, files]) => (
|
||
<div key={group} className="mt-3">
|
||
<p className="text-xs font-medium tracking-wide text-ink-faint">{group}</p>
|
||
<ul className="mt-1 space-y-1">
|
||
{files.map((file) => (
|
||
<li key={file}>
|
||
<Link
|
||
href={
|
||
mintOn
|
||
? `/api/note/auth/dev-link?file=${encodeURIComponent(file)}&mode=${sampleMode}`
|
||
: `/api/note/files/open?fileUrl=${encodeURIComponent(`/samples/${file}`)}`
|
||
}
|
||
className="focus-ring rounded text-primary transition hover:underline"
|
||
>
|
||
{file}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* จำลอง e-Court ด้วย API key — แสดงทุก environment (คำขอผู้ใช้ 2026-11-02:
|
||
ใช้ทางเข้าจริงเหมือน e-Court ต้องถือ DOCVER_API_KEY จึงไม่เป็นประตูหลัง) */}
|
||
<div className="mt-5 max-w-xl rounded-xl border border-line bg-white p-6">
|
||
<h3 className="font-display text-subhead text-primary">
|
||
จำลอง e-Court — ขอ token ด้วย API key
|
||
</h3>
|
||
<p className="mt-1.5 text-sm text-ink-soft">
|
||
ใส่ API key (<Code>DOCVER_API_KEY</Code>) เพื่อขอ token ผ่าน{" "}
|
||
<Code>POST /api/note/auth/token</Code> แบบเดียวกับที่ e-Court ทำจริง
|
||
แล้วระบบจะพาเข้าอ่านเอกสารที่เลือกเลย — ได้ session 8 ชม.
|
||
(ใช้ได้ทั้ง dev และ production)
|
||
</p>
|
||
<div className="mt-4">
|
||
<MockEcourtForm files={Object.values(SAMPLE_DOCS).flat()} />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Flow ─────────────────────────────────────────────────────────── */}
|
||
<section className="mt-10">
|
||
<div className="border-b border-line pb-3">
|
||
<h2 className="font-display text-section-title text-ink">Flow</h2>
|
||
</div>
|
||
<div className="mt-5 max-w-xl rounded-xl border border-line bg-white p-6 text-center text-sm font-medium leading-relaxed text-ink">
|
||
e-Court สร้างลิงก์เข้าใช้ (มีตัวยืนยันตัวตน + ที่อยู่ไฟล์)
|
||
<br />↓<br />
|
||
ผู้ใช้กดลิงก์ → ระบบตรวจแล้วออก session ให้ (ใช้ได้ 8 ชม.)
|
||
<br />↓<br />
|
||
เข้าหน้าอ่านเอกสาร — มาร์กข้อความ วาดเส้น คอมเมนต์ คั่นหน้า
|
||
<br />↓<br />
|
||
บันทึกทันทีทุกครั้งที่แก้ คนอื่นที่เปิดไฟล์เดียวกันเห็นสด ๆ
|
||
<br />↓<br />
|
||
ดูรวมทั้งหมดได้ที่หน้า "สรุปหมายเหตุ" และ "เอกสารในกลุ่ม"
|
||
<br />↓<br />
|
||
ระบบอื่น (เช่น e-Court) ดึงข้อมูลไปใช้ต่อได้ผ่าน API
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── ทางเข้าระบบผ่านลิงก์ e-Court (คู่มือ 2 ทาง ตามแผน SSO) ────────── */}
|
||
<section className="mt-12">
|
||
<div className="border-b border-line pb-3">
|
||
<h2 className="font-display text-section-title text-ink">
|
||
ทางเข้าระบบผ่านลิงก์ e-Court (SSO)
|
||
</h2>
|
||
</div>
|
||
<p className="mt-3 text-sm text-ink-soft">
|
||
แอปนี้ไม่มีหน้าล็อกอิน — ผู้ใช้เข้าได้ทางลิงก์ที่ e-Court สร้างให้อย่างเดียว
|
||
ลิงก์มี 2 แบบ (ใช้แบบใดแบบหนึ่ง — ห้ามใส่ครบทั้งสองแบบในลิงก์เดียว)
|
||
</p>
|
||
|
||
<div className="mt-5 grid gap-5 lg:grid-cols-2">
|
||
{/* ทาง A — JWT */}
|
||
<article className="flex flex-col rounded-xl border border-line bg-white p-5">
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="font-display text-subhead text-ink">ทาง A — ขอ token (JWT)</h3>
|
||
<span className="rounded bg-primary/[0.08] px-1.5 py-0.5 text-[11px] font-medium text-primary">
|
||
แนะนำ
|
||
</span>
|
||
</div>
|
||
<p className="mt-1.5 text-sm text-ink-soft">
|
||
เหมาะเมื่อสร้างลิงก์ให้ผู้ใช้ได้ตอนนั้นเลย (ตอนเปิดหน้า) — คีย์ที่ใช้เซ็น
|
||
อยู่ฝั่ง server เท่านั้น ปลอมตัวเป็นผู้อื่นไม่ได้
|
||
</p>
|
||
<ol className="mt-4 list-decimal space-y-1.5 pl-5 text-sm text-ink">
|
||
<li>
|
||
ฝั่ง e-Court เรียก <Code>POST /api/note/auth/token</Code> พร้อมรหัส{" "}
|
||
<Code>x-api-key</Code> (ค่าจาก env <Code>DOCVER_API_KEY</Code>) และข้อมูล:
|
||
</li>
|
||
</ol>
|
||
<CodeBlock>{`POST {BASE}/api/note/auth/token
|
||
x-api-key: <DOCVER_API_KEY>
|
||
|
||
{"userid":"<u_userid>","username":"<u_userlogin>",
|
||
"fid":"<fileId>","ttl_seconds":300}`}</CodeBlock>
|
||
<ol start={2} className="mt-3 list-decimal space-y-1.5 pl-5 text-sm text-ink">
|
||
<li>
|
||
ได้ <Code>access_token</Code> กลับมา (อายุ 1–10 นาที) — นำไปใส่ในลิงก์
|
||
เป็นพารามิเตอร์ <Code>t</Code> ให้ผู้ใช้กด:
|
||
</li>
|
||
</ol>
|
||
<CodeBlock>{`{BASE}/note
|
||
?fileUrl=<urlencode>&typeId=<กลุ่ม ทางเลือก>&t=<access_token>`}</CodeBlock>
|
||
<ol start={3} className="mt-3 list-decimal space-y-1.5 pl-5 text-sm text-ink">
|
||
<li>
|
||
ผู้ใช้กดลิงก์ → ระบบตรวจแล้วออก session ให้ (เก็บในเครื่องของผู้ใช้
|
||
อายุ 8 ชม.) → พาเข้าหน้าอ่านเอกสาร และตัดค่า token ออกจากลิงก์ทันที
|
||
</li>
|
||
</ol>
|
||
<p className="mt-4 rounded-lg border border-line bg-canvas p-3 text-xs leading-relaxed text-ink-soft">
|
||
ข้อควรระวัง: สร้าง token ตอนแสดงหน้าให้ผู้ใช้คนนั้น ๆ เท่านั้น และ{" "}
|
||
<strong className="font-medium text-ink-soft">
|
||
ห้ามเก็บ token ไว้ในที่อื่น
|
||
</strong>{" "}
|
||
(อายุสั้นมาก) · token นี้ใช้เข้าแอปนี้อย่างเดียว เอาไปเรียก API
|
||
กลุ่ม documents ไม่ได้
|
||
</p>
|
||
</article>
|
||
|
||
{/* ทาง B — ticket */}
|
||
<article className="flex flex-col rounded-xl border border-line bg-white p-5">
|
||
<div className="flex items-center gap-2">
|
||
<h3 className="font-display text-subhead text-ink">ทาง B — ticket</h3>
|
||
<span className="rounded bg-ink/[0.05] px-1.5 py-0.5 text-[11px] font-medium text-ink-soft">
|
||
สร้างล่วงหน้า
|
||
</span>
|
||
</div>
|
||
<p className="mt-1.5 text-sm text-ink-soft">
|
||
เหมาะเมื่อสร้างลิงก์เตรียมไว้ล่วงหน้าได้ ไม่ต้องเรียก API ตอนแสดงหน้า —
|
||
ใช้คู่ <Code>ticket_data</Code> + <Code>HmacSha256</Code> ชุดเดียวกับที่ฝัง
|
||
ไว้ในไฟล์ .docx ของ add-in
|
||
</p>
|
||
<ol className="mt-4 list-decimal space-y-1.5 pl-5 text-sm text-ink">
|
||
<li>
|
||
e-Court เตรียม <Code>ticket_data</Code> (JSON มี{" "}
|
||
<Code>exp/fid/uid/uname</Code>) แล้วเซ็น <Code>HmacSha256</Code> ด้วยคีย์{" "}
|
||
<Code>ADDIN_TICKET_SECRET</Code>
|
||
</li>
|
||
<li>นำมาใส่ในลิงก์ให้ผู้ใช้กด:</li>
|
||
</ol>
|
||
<CodeBlock>{`{BASE}/note
|
||
?fileUrl=<urlencode>&typeId=<ทางเลือก>
|
||
&ticket_data=<JSON urlencode>&HmacSha256=<hex 64 ตัว>`}</CodeBlock>
|
||
<ol start={3} className="mt-3 list-decimal space-y-1.5 pl-5 text-sm text-ink">
|
||
<li>
|
||
ผู้ใช้กดลิงก์ → ระบบตรวจลายเซ็นและวันหมดอายุ → ออก session 8 ชม. →
|
||
พาเข้าหน้าอ่านเอกสาร
|
||
</li>
|
||
</ol>
|
||
<p className="mt-4 rounded-lg border border-line bg-canvas p-3 text-xs leading-relaxed text-ink-soft">
|
||
ข้อควรระวัง: ตั้ง <Code>exp</Code> สั้น ๆ (ไม่เกิน ~10 นาที เพราะค่าเหล่านี้
|
||
อยู่ในลิงก์) · ค่าผู้ใช้ (<Code>userid/username</Code> ทาง A,{" "}
|
||
<Code>uid/uname</Code> ทาง B) ต้องเป็นคนเดียวกับ{" "}
|
||
<Code>u_userid/u_userlogin</Code> ของ e-Court — ใส่ผิดคน = ข้อมูล
|
||
ผูกกับคนผิด
|
||
</p>
|
||
</article>
|
||
</div>
|
||
|
||
{/* dev tool — ฟอร์ม mint ลิงก์ (เปิดด้วย env NOTE_SSO_DEV_MINT=1 เท่านั้น:
|
||
ตัวช่วยทดสอบ ไม่ใช่ทางเข้าจริง และตายเสมอใน production build) */}
|
||
{devMintEnabled() && (
|
||
<div className="mt-5 rounded-xl border border-dashed border-line bg-white/60 p-5">
|
||
<h4 className="font-display text-sm font-semibold text-ink">
|
||
สร้างลิงก์ทดสอบเอง (dev)
|
||
</h4>
|
||
<p className="mt-1.5 text-sm text-ink-soft">
|
||
กรอกชื่อผู้ใช้แล้วกดสร้าง — ระบบจะสร้างลิงก์ให้จากคีย์ของตัวเอง
|
||
(ค่าลับไม่โผล่ที่หน้าเว็บ) ได้ลิงก์มาแล้วกด "เปิดลิงก์"
|
||
เพื่อทดสอบเข้าจริงทั้งสองแบบ
|
||
</p>
|
||
<div className="mt-4">
|
||
<DevLoginLinkForm />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* dev tool — สคริปต์มือ (ใช้ได้เสมอ ไม่ขึ้นกับ env) */}
|
||
<div className="mt-5 rounded-xl border border-dashed border-line bg-white/60 p-5">
|
||
<h4 className="font-display text-sm font-semibold text-ink">
|
||
ทดสอบบนเครื่อง (dev)
|
||
</h4>
|
||
<p className="mt-1.5 text-sm text-ink-soft">
|
||
สร้างลิงก์เองบนเครื่องโดยไม่ต้องรอ e-Court — สคริปต์อ่านค่าจากไฟล์{" "}
|
||
<Code>.env</Code> แล้วพิมพ์ลิงก์เต็มให้ก๊อปไปเปิดใน browser:
|
||
</p>
|
||
<CodeBlock>{`# ทาง A (default)
|
||
node scripts/make-login-link.mjs --uid oom --uname "สรวิชญ์" --fid F123 \\
|
||
--fileUrl /samples/01012-672427-1f-690609-0000840223.pdf \\
|
||
--base http://localhost:3000/docedit
|
||
|
||
# ทาง B
|
||
node scripts/make-login-link.mjs --mode ticket --uid oom --uname "สรวิชญ์" --fid F123 \\
|
||
--fileUrl /samples/01012-672427-1f-690609-0000840223.pdf \\
|
||
--base http://localhost:3000/docedit`}</CodeBlock>
|
||
<p className="mt-3 text-xs text-ink-soft">
|
||
ถ้าลิงก์หมดอายุหรือไม่ถูกต้อง ระบบจะพากลับหน้าแรกพร้อมข้อความบอกสาเหตุ —
|
||
สร้างลิงก์ใหม่แล้วกดอีกครั้งได้เลย
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</>
|
||
);
|
||
}
|