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, 自动化攻击