thebuggeddev/anatomy

GitHub: thebuggeddev/anatomy

一个基于 Three.js 和 vinext 全栈模板构建的交互式 3D 人体解剖浏览器,支持 Cloudflare D1 数据库与 OpenAI 工作区身份认证。

Stars: 754 | Forks: 213

# vinext-starter 一个简洁的全栈启动模板,运行在 vinext 上,并可选支持 Cloudflare D1 和 Drizzle。 ## 前置条件 - Node.js `>=22.13.0` ## 快速开始 ``` npm install npm run dev npm run build ``` 此启动模板不使用 `wrangler.jsonc`。 ## 包含的结构 - 在 `app/` 下编辑站点代码 - `.openai/hosting.json` 声明了可选的 Sites D1 和 R2 绑定 - `vite.config.ts` 模拟已声明的绑定以供本地开发使用 - `db/schema.ts` 初始为空 - `examples/d1/` 包含一个可选的 D1 示例界面 - `drizzle.config.ts` 在需要时支持生成本地迁移 ## 工作区身份认证请求头 OpenAI 工作区站点可以从 `oai-authenticated-user-email` 中读取当前用户的电子邮件。 经过 SIWC 认证的工作区站点还可以接收 `oai-authenticated-user-full-name`,前提是用户的 SIWC 配置文件中包含非空的 `name` 声明。全名值为百分号编码的 UTF-8,并附带 `oai-authenticated-user-full-name-encoding: percent-encoded-utf-8`。 请将全名视为可选内容,并在其缺失时回退使用电子邮件: ``` import { headers } from "next/headers"; export default async function Home() { const requestHeaders = await headers(); const email = requestHeaders.get("oai-authenticated-user-email"); const encodedFullName = requestHeaders.get("oai-authenticated-user-full-name"); const fullName = encodedFullName && requestHeaders.get("oai-authenticated-user-full-name-encoding") === "percent-encoded-utf-8" ? decodeURIComponent(encodedFullName) : null; const displayName = fullName ?? email; // ... } ``` ## 可选的 Dispatch 管理的 ChatGPT 登录 当站点需要可选或必需的 ChatGPT 登录时,请从 `app/chatgpt-auth.ts` 导入现成的辅助工具: - 使用 `getChatGPTUser()` 实现可选的已登录界面。 - 对于应将匿名访客引导至通过 ChatGPT 登录的服务器渲染页面,请使用 `requireChatGPTUser(returnTo)`。 - 对于浏览器链接或操作,请使用 `chatGPTSignInPath(returnTo)` 和 `chatGPTSignOutPath(returnTo)`。 - 传入同源的相对 `returnTo` 路径,作为登录或 登出后的目标地址。辅助工具会对其进行验证并安全编码。 - 使用 `export const dynamic = "force-dynamic"` 标记受保护的页面,因为 它们依赖于每个请求的身份认证请求头。 Dispatch 负责管理 `/signin-with-chatgpt`、`/signout-with-chatgpt`、`/callback`、 OAuth cookie 以及身份认证请求头的注入。请勿为这些保留路径实现应用路由。未导入并调用该辅助工具的路由将保持兼容匿名访问。 SIWC 仅用于确立身份;它并不能证明工作区成员资格。请使用 Sites 托管平台的访问策略控制来进行工作区范围的限制, 或者实施显式的服务器端成员资格或白名单检查。 请将 SIWC 用于账户页面、用户专属仪表板、已保存的记录以及与 当前 ChatGPT 用户关联的写入操作。公开内容请保持匿名。 ## 实用命令 - `npm run dev`:启动本地开发 - `npm run build`:验证 vinext 构建输出 - `npm test`:构建启动模板并验证其渲染的加载骨架 - `npm run db:generate`:在 schema 更改后生成 Drizzle 迁移 ## 了解更多 - [vinext 文档](https://github.com/cloudflare/vinext) - [Drizzle D1 指南](https://orm.drizzle.team/docs/get-started/d1-new)
标签:MITM代理, React, Syscall, Syscalls, Vite, Web开发, 全栈脚手架, 数据库ORM, 自动化攻击