JavaScript使用Google Identity Services刷新页面后OAuth会话丢失问题

问题背景 #

近期将项目从已废弃的gapi.auth2库迁移至新版Google Identity Services（简称GIS）JavaScript客户端库后，出现旧版不存在的异常：用户完成登录后重载页面，会话直接丢失，每次页面加载都需要重新登录，该问题可通过官方Calendar API示例稳定复现。
最初查阅官方文档时，未找到可直接实现会话持久化的配置项，也无法确认是否需要开发者自行存储access token。

更新1：查阅官方迁移指南后确认，旧版Google Sign-In内置会话状态监听回调、Google账号登录状态变更事件监听能力，可帮助开发者自动管理用户登录状态；新版GIS明确要求开发者自行负责Web应用的登录状态与用户会话管理，但文档未提供任何具体实现指引。
更新2：进一步梳理逻辑后确认，核心问题并非登录状态本身的持久化维护——这部分逻辑开发者可自行实现。真正的卡点在于调用Google API所需的access token存在两个特性：

• 有效期较短
• 默认不会被持久化存储，即便token本身尚未过期，页面重载后也无法保留复用

已尝试方案的卡点 #

针对access token无法复用的问题，曾尝试调用GIS提供的requestAccessToken方法，测试结果如下：

• 仅配置prompt: ''参数时，调用方法仍会强制弹出登录弹窗
• 额外传入已登录用户邮箱作为hint参数时，弹窗会短暂展示加载动画，之后无需用户操作即可自动关闭，体验上本可满足自动续期需求
• 但该方法存在强限制：必须由用户交互事件触发，否则会被浏览器弹窗拦截规则拦截，导致页面加载等无用户主动交互的场景下，无法自动完成token续期

可行解决方案 #

方案1：授权码模式+服务端托管凭据（生产环境推荐） #

放弃requestAccessToken对应的前端一次性token模式，改用OAuth2授权码流程，把token生命周期交给自有服务端管理：

1. 首次用户登录完成后，前端将获取到的授权码发送到自有服务端，由服务端向Google接口兑换access token、refresh token；将refresh token加密后存储在服务端数据库，access token过期时间、关联用户标识写入自有站点的HttpOnly安全Cookie
2. 页面加载时首先校验自有Cookie的登录态：如果Cookie有效且access token未过期，直接从服务端接口获取可用access token调用Google API，全程不需要前端触发GIS逻辑
3. 如果access token已过期，由服务端持存储的refresh token自动向Google接口兑换新的access token，更新Cookie有效期，全程无前端弹窗、不需要用户交互，完全不会触发浏览器拦截

方案2：前端轻量存储+首次交互静默续期（纯前端静态站适用） #

如果是无自有服务端的纯前端静态站点，可以用折中方案绕开弹窗拦截限制：

1. 用户首次登录成功拿到access token后，将已授权的用户邮箱、token过期时间存在localStorage中，注意不要明文存储access token本身，避免XSS泄露风险
2. 页面加载时先检查localStorage中的登录记录：如果存在有效登录记录，先将应用状态标记为「登录态待续期」，正常渲染非鉴权依赖的页面内容，同时全局监听第一个用户交互事件（点击、按键、触屏操作均可）
3. 捕获到第一个用户交互事件时，立刻调用配置了prompt: ''+hint: 已存储的用户邮箱参数的requestAccessToken方法，此时因为是用户交互触发，不会被弹窗拦截；加上已传入用户邮箱hint参数，弹窗会瞬间自动关闭，用户完全感知不到续期流程，拿到新的access token后更新内存中的鉴权状态即可

方案3：One Tap自动登录配合第一方Cookie #

如果业务场景允许，可以接入GIS的One Tap一键登录能力简化流程：

1. 首次登录成功后，将用户的Google账号标识存在自有站点的第一方Cookie中
2. 页面加载时初始化One Tap组件，配置prompt: ''参数，对于已在Google侧登录、且之前已经授权过站点的用户，One Tap会自动完成身份校验返回ID token，前端将ID token发送到服务端校验通过后，下发对应会话凭据即可，全程不会弹出突兀的授权窗口

内容的提问来源于stack exchange，提问作者istvan.halmen