让导航在不同设备间同步
Cloudflare Pages 提供固定网址;Google Drive 保存你自己的导航数据。网页代码与收藏数据分别存储。首次配置完成后,每台设备使用同一个网址、同一个 Google 账号。
1. 先保护现有收藏
在原地址 http://127.0.0.1:8765 打开导航,通过「备份与导入」导出 JSON。新域名和本地地址的数据不互通,第一次到新网址时,需要导入这份备份,或先在本机连接 Google 上传,再在新网址使用云端数据。
2. 创建免费固定网址
- 登录 Cloudflare 控制台,进入 Workers & Pages,选择创建 Pages 项目并直接上传静态资源(Direct Upload)。界面名称可能随平台更新。
- 输入你喜欢的项目名称,将准备好的「导航网站发布包.zip」上传,或选择
dist文件夹。 - 发布后得到
https://你的项目名.pages.dev。记录实际网址;无需购买域名。不要上传整个工作区、JSON 收藏备份或密钥。
Cloudflare 账号登录和可能出现的服务协议需要你本人完成。部署的页面对知道网址的人可访问,但不会包含你的收藏;每个人登录后只访问自己的 Drive 数据。
3. 配置 Google Cloud
- 打开 Google Cloud 控制台,创建一个专用于导航的项目,例如「我的网站导航」。各设备必须使用这个项目的同一个 OAuth 客户端。
- 在「API 和服务 → 库」搜索并启用 Google Drive API。这个静态方案不需要创建服务器或填写付款资料。
- 进入 Google Auth Platform(或 OAuth 同意屏幕),填写应用名称、支持邮箱及开发者联系邮箱。个人 Gmail 选择 External(外部)。
- 先保持 Testing(测试),在 Audience / Test users 添加你自己的 Google 邮箱。应用申请的权限为
openid、email、https://www.googleapis.com/auth/drive.appdata,无需完整云盘权限。 - 进入 Clients 创建 OAuth 客户端,类型选 Web application(Web 应用)。
- 在「已获授权的 JavaScript 来源」中逐条填写实际站点来源:
http://127.0.0.1:8765、http://localhost:8765、你的https://项目名.pages.dev。不能带路径或结尾斜杠。本应用使用弹窗 token 流程,不需要重定向 URI。 - 复制以
.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. 日常使用与限制
- 页面打开且授权有效时,编辑后自动同步,每分钟检查云端。刷新或重新打开后点击「连接 Google」;令牌过期也需再次连接,不会在后台永久登录。
- 更换 Google 账号会重新询问数据选择,不会自动把上一账号的收藏上传到新账号。
- 两个设备同时修改会暂停并提示选择。合并保留双方网站,同位置重复网址采用本地内容;合并可能恢复已删条目。单方选择以所选数据为准。
- 云端使用 Drive 私有 appDataFolder,普通「我的云端硬盘」文件列表看不到。导出备份仍在导航的「备份与导入」中。
- 每次同步生成完整历史快照,不自动删除旧云端数据。当前保护上限是 2000 份历史、单份 5 MB,达到后会停止同步并提示;需进一步增加历史归档功能后再长期大量使用。
- 云端替换本地前保存恢复备份:浏览器 localStorage 的
shiguang-navigation-v1-before-cloud-sync。该备份保留最近一次替换前的数据。 - 断网或访问不了 Google 时保留本地修改,恢复网络后重试;Cloudflare 固定网址也需要所在网络能够访问。
常见问题
origin_mismatch:把浏览器当前地址的协议、域名、端口准确加入 OAuth JavaScript 来源。更新设置后可能需要等待生效。
403 / access_denied:检查登录邮箱是否为测试用户、Drive API 是否启用、是否授予应用数据权限,以及组织管理员的访问限制。
看到了 Google 安全警告:先核对应用配置和发布状态,不要忽略或绕过浏览器安全警告。正式长期使用可在 Google Auth Platform 检查发布要求。
测试阶段与永久登录:Testing、Google 授权策略和短期访问令牌均可能要求重新授权。本版本没有服务端长期刷新令牌,不能保证永久免登录。
官方参考:Google Token Model · Drive 应用数据 · Cloudflare Direct Upload