
本文介绍如何借助 notion api 与前端按钮实现「一键添加本人姓名至数据库 person 属性」的功能,解决手动输入易误填的问题,确保投票数据真实可溯。
在 Notion 团队协作投票场景中,使用 Person 类型属性记录支持者是一种常见做法,但原生界面允许用户自由输入任意成员邮箱(甚至无效邮箱),导致数据失真。理想方案是:用户点击按钮后,自动将其本人 Notion 账户绑定的邮箱(即实际登录身份)写入对应数据库条目的 Person 字段——这需要结合 Notion 官方 API 与前端交互逻辑实现。
⚠️ 重要前提说明:
- Notion API 不支持直接获取当前网页访问者的 Notion 用户身份(即无法自动识别“谁点了按钮”)。上述代码中 prompt('Enter person name:') 是简化示意,实际生产环境不可依赖手动输入邮箱,否则仍存在冒用风险;
- 真正安全的方案需后端介入:用户先通过 OAuth 2.0 授权登录(如使用 Notion’s official OAuth flow),服务端获取其 owner 或 user 对象中的 person.email,再调用 API 写入;
- 前端直连 API(如示例中 notion.pages.create)必须使用服务端代理或 Next.js API Route / Cloudflare Worker 等方式隐藏 NOTION_API_KEY,绝不可在浏览器端暴露集成 Token,否则会导致数据库被恶意篡改。
✅ 推荐最小可行实现路径(含安全加固):
- 在 Notion 开发者后台创建 Integration,授予目标数据库 Read + Write 权限;
- 配置 OAuth:启用 users.read 作用域,引导用户授权;
- 后端接收授权回调,调用 https://api.notion.com/v1/users/me 获取当前用户邮箱;
- 调用 pages.update(非 create)将该邮箱追加至指定页面的 Person 属性(注意:Person 属性支持多选,需用 array 语法追加而非覆盖):
// 正确写法:向现有 Person 属性追加用户(假设 pageId 已知)
await notion.pages.update({
page_id: "xxx-xxx-xxx",
properties: {
"Voters": { // Person 属性名(需替换为实际名称)
people: [
...existingPeople, // 先读取原有值(需先 GET page)
{ email: "user@company.com" }
]
}
}
});? 总结:
- 单纯前端按钮 + prompt 方案仅适用于内部高度可信、无安全顾虑的测试环境;
- 生产级投票系统务必采用 OAuth 认证 + 服务端校验 + pages.update 追加逻辑;
- 可进一步结合按钮禁用(防止重复提交)、加载状态提示、错误 toast 提醒提升体验;
- 官方文档必读:Notion API Reference - People Property 与 Authentication Guide。










