← 返回导航

让导航在不同设备间同步

Cloudflare Pages 提供固定网址;Google Drive 保存你自己的导航数据。网页代码与收藏数据分别存储。首次配置完成后,每台设备使用同一个网址、同一个 Google 账号。

1. 先保护现有收藏

在原地址 http://127.0.0.1:8765 打开导航,通过「备份与导入」导出 JSON。新域名和本地地址的数据不互通,第一次到新网址时,需要导入这份备份,或先在本机连接 Google 上传,再在新网址使用云端数据。

2. 创建免费固定网址

  1. 登录 Cloudflare 控制台,进入 Workers & Pages,选择创建 Pages 项目并直接上传静态资源(Direct Upload)。界面名称可能随平台更新。
  2. 输入你喜欢的项目名称,将准备好的「导航网站发布包.zip」上传,或选择 dist 文件夹。
  3. 发布后得到 https://你的项目名.pages.dev。记录实际网址;无需购买域名。不要上传整个工作区、JSON 收藏备份或密钥。

Cloudflare 账号登录和可能出现的服务协议需要你本人完成。部署的页面对知道网址的人可访问,但不会包含你的收藏;每个人登录后只访问自己的 Drive 数据。

3. 配置 Google Cloud

  1. 打开 Google Cloud 控制台,创建一个专用于导航的项目,例如「我的网站导航」。各设备必须使用这个项目的同一个 OAuth 客户端。
  2. 在「API 和服务 → 库」搜索并启用 Google Drive API。这个静态方案不需要创建服务器或填写付款资料。
  3. 进入 Google Auth Platform(或 OAuth 同意屏幕),填写应用名称、支持邮箱及开发者联系邮箱。个人 Gmail 选择 External(外部)。
  4. 先保持 Testing(测试),在 Audience / Test users 添加你自己的 Google 邮箱。应用申请的权限为 openid、email、https://www.googleapis.com/auth/drive.appdata,无需完整云盘权限。
  5. 进入 Clients 创建 OAuth 客户端,类型选 Web application(Web 应用)。
  6. 在「已获授权的 JavaScript 来源」中逐条填写实际站点来源:http://127.0.0.1:8765、http://localhost:8765、你的 https://项目名.pages.dev。不能带路径或结尾斜杠。本应用使用弹窗 token 流程,不需要重定向 URI。
  7. 复制以 .apps.googleusercontent.com 结尾的 Client ID。不要把 Client Secret 填进网页、发给他人或放进部署文件。

4. 填入 Client ID 并连接

本机联调:在导航顶部「云同步」粘贴 Client ID 并保存,然后点击「连接 Google」。正式部署:将同一 ID 填入 sync-config.mjs 的 GOOGLE_CLIENT_ID,运行 node build.mjs 重新生成 dist 并上传更新,这样其他设备无需再手动配置。

Google 弹窗里确认账号和应用数据权限。首次连接旧电脑,选择「上传本地数据」;新电脑选择「使用选中的云端数据」。如果新电脑已有要保留的收藏,选择「合并本地和所有云端数据」。确认顶部显示已同步后再关闭页面。

5. 日常使用与限制

常见问题

origin_mismatch:把浏览器当前地址的协议、域名、端口准确加入 OAuth JavaScript 来源。更新设置后可能需要等待生效。

403 / access_denied:检查登录邮箱是否为测试用户、Drive API 是否启用、是否授予应用数据权限,以及组织管理员的访问限制。

看到了 Google 安全警告:先核对应用配置和发布状态,不要忽略或绕过浏览器安全警告。正式长期使用可在 Google Auth Platform 检查发布要求。

测试阶段与永久登录:Testing、Google 授权策略和短期访问令牌均可能要求重新授权。本版本没有服务端长期刷新令牌,不能保证永久免登录。

官方参考:Google Token Model · Drive 应用数据 · Cloudflare Direct Upload