Django与React实现Google SSO的React端落地方案及流程优化咨询

1. 登录按钮逻辑 #

• 按钮点击后直接跳转至Django侧的Google SSO初始化接口（比如/api/sso/google/），跳转时携带两个参数：
  • redirect_uri：用encodeURIComponent编码后的React前端回调地址，比如https://你的React域名/sso/callback，该地址需要提前加入Google Cloud控制台和Django后端的域名白名单
  • state：前端生成的随机字符串，存在localStorage里，用于后续防CSRF校验

2. 回调页逻辑 #

• 新建/sso/callback路由作为SSO回调专用页面，页面加载后直接执行以下逻辑：
  • 先校验返回的state参数和本地存储的是否一致，不一致直接终止流程，提示登录异常
  • 优先用「临时授权码换JWT」的流程：后端跳转回前端时仅返回临时授权码code，前端拿到后调用Django的/api/token/接口，提交code换取正式的access_token和refresh_token，避免JWT直接暴露在地址栏历史
  • 拿到凭证后清理地址栏参数：执行window.history.replaceState({}, document.title, window.location.pathname)，避免用户刷新页面重复触发流程
  • 存储规则：refresh_token优先存在HttpOnly、Secure、SameSite=Strict属性的Cookie中，完全避免XSS窃取风险；access_token有效期短，可存在内存或localStorage中

3. 全局请求&路由守卫 #

• 封装Axios请求拦截器，所有接口请求自动在请求头携带Authorization: Bearer ${access_token}
• 封装路由守卫组件，所有需要登录的路由都用该组件包裹：进入路由时先校验access_token是否有效，若已过期则自动调用/api/refresh_token/接口用refresh_token换新的access_token，刷新失败则清空本地所有凭证，跳转至登录页

4. 退出登录逻辑 #

• 点击退出时先调用Django的/api/logout/接口，让后端将当前refresh_token加入黑名单，之后前端清空本地所有登录凭证，跳转至未登录首页即可

• 调整现有跳转链路：目前用户创建后跳转至backendaddress/api/login拿JWT的逻辑可以优化，拿到JWT后直接跳转回前端回调地址，不要把后端接口暴露在跳转链路中，降低前后端耦合
• 凭证安全优化：
  • 禁止将JWT直接放在URL的Query参数中返回，必须用临时授权码交换或者放在URL Hash段（#access_token=xxx，参数不会发送到服务端）
  • JWT有效期设置合理：access_token设15-30分钟，refresh_token设7-14天，每次刷新Token时返回新的refresh_token，旧的直接作废，降低泄露风险
• 安全校验补充：Django侧开启CSRF中间件，前端所有POST请求携带CSRF Token；Google SSO的回调校验逻辑必须加state参数校验，避免CSRF攻击
• 异常兼容补充：用户在Google授权页点击取消、授权过期等异常场景，后端要跳转回前端并携带错误码，前端对应展示提示，不要直接返回空白错误页
• 登录态保活：前端每10分钟调用一次/api/me/接口校验登录态有效性，避免用户长时间停留页面后操作才发现登录失效

内容的提问来源于stack exchange，提问作者Sidharth kaushik