AdonisJS 6 REST API对接React(TS)前端Google OAuth登录方案咨询

当前实现方案是否正确？ #

整体思路符合OAuth 2.0授权码流程的规范，核心逻辑没问题，但存在几处需要修正的细节：

正确的部分 #

• 使用AdonisJS Ally处理Google OAuth的跳转与回调，符合框架最佳实践
• 校验了用户授权拒绝、OAuth流程错误等异常场景
• 通过firstOrCreate实现用户的自动创建/查找逻辑
• 设置HTTP-Only、Secure属性的Cookie，避免XSS攻击风险
• 前端通过跳转API接口触发登录流程，符合OAuth前端触发的标准方式

需要修正的问题 #

1. 错误响应不规范：当isProviderVerified校验不通过时，直接返回字符串Already exists on other provider，需改为用response.badRequest()返回标准HTTP错误响应：

   if (!isProviderVerified) {
     return response.badRequest('该邮箱已绑定其他登录方式')
   }
   

2. Token创建方式错误：AdonisJS 6中accessTokens.create是用户实例方法，而非模型静态方法，需修改：

   // 原错误写法
   // const token = await User.accessTokens.create(user, ['*'], { ... })
   // 正确写法
   const token = await user.accessTokens.create(['*'], {
     expiresIn: env.get('JWT_EXPIRY'),
   })
   

3. 跨域Cookie配置：前后端为跨域域名（api.example.com与app.example.com），sameSite: 'lax'可能导致Cookie无法正常携带，需改为sameSite: 'none'，同时保留secure: true（sameSite=None强制要求Secure属性）。
4. 硬编码URL优化：前端跳转地址、API回调地址建议从环境变量读取，便于多环境部署。

1. 前端应如何处理API的响应？ #

核心流程 #

1. 配置回调页面：在前端路由中添加/auth/google/callback页面，作为API跳转的目标地址。
2. 验证登录状态：回调页面无需复杂UI，主要发起验证请求确认登录状态：
   • 因为Cookie是HTTP-Only，前端无法直接读取，需调用API的用户信息接口（如GET /v1/auth/me）验证登录是否成功。
   • 请求时必须携带credentials: 'include'参数，确保浏览器自动发送Cookie。
3. 同步前端状态：根据验证结果更新前端登录状态（如存入React Context、Redux），并跳转到对应页面。

示例回调页面代码 #

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

export function GoogleCallback() {
  const navigate = useNavigate();

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const res = await fetch('https://api.example.com/v1/auth/me', {
          credentials: 'include',
        });
        if (res.ok) {
          const user = await res.json();
          // 同步登录状态到全局上下文
          // authContext.setUser(user);
          navigate('/dashboard');
        } else {
          alert('登录失败，请重试');
          navigate('/login');
        }
      } catch (err) {
        console.error('验证登录状态失败:', err);
        navigate('/login');
      }
    };
    checkAuth();
  }, [navigate]);

  return <div>登录验证中...</div>;
}

注意事项 #

所有后续API请求都需要添加credentials: 'include'，确保Cookie被自动携带。

2. 登录后发起其他接口请求时，API如何识别用户已登录？ #

实现步骤 #

1. 配置认证守卫：在config/auth.ts中配置JWT守卫，指定从Cookie读取Token：

   import { defineConfig } from '@adonisjs/auth'
   import { jwtGuard, jwtUserProvider } from '@adonisjs/auth/jwt'
   
   export default defineConfig({
     default: 'jwt',
     guards: {
       jwt: jwtGuard({
         provider: jwtUserProvider({
           model: () => import('#models/user'),
         }),
         tokenProvider: {
           type: 'cookie',
           cookieName: 'auth_token',
           options: {
             path: '/',
             httpOnly: true,
             secure: true,
             sameSite: 'none',
           },
         },
       }),
     },
   })
   

2. 添加认证中间件：在需要验证登录的路由组中挂载auth中间件：

   // start/routes.ts
   import router from '@adonisjs/core/services/router'
   
   router.group(() => {
     router.get('/auth/me', async ({ auth }) => auth.user)
     router.get('/posts', async ({ auth }) => {
       // 获取当前用户的帖子
       return auth.user?.related('posts').query()
     })
   }).middleware('auth')
   

3. 控制器中获取用户：通过ctx.auth.user直接获取已登录用户信息，守卫会自动完成Cookie解析、JWT验证、用户查询的全流程。

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