Angular ng2-ui-auth与Lumen Socialite POST请求参数不匹配求助

我之前碰到过完全一样的坑！ng2-ui-auth 8.x版本默认发送的POST请求负载是嵌套结构，但Lumen的Socialite组件要求code和redirect_uri字段必须在请求体的根节点，这就导致了你看到的400错误。官方文档里确实没提到相关配置项，不过有两个可行的解决办法：

方法一：前端添加HTTP拦截器转换请求体 #

在Angular项目中创建一个HTTP拦截器，拦截ng2-ui-auth发送的授权请求，把嵌套在authorizationData里的字段提取到根节点：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthPayloadInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 只针对你的Google授权请求做处理
    if (request.url.endsWith('/api/auth/google') && request.method === 'POST') {
      const { authorizationData, oauthData, userData } = request.body;
      // 重新构造请求体，将authorizationData的内容移到根节点
      const modifiedBody = {
        ...authorizationData,
        oauthData,
        userData
      };
      const modifiedRequest = request.clone({ body: modifiedBody });
      return next.handle(modifiedRequest);
    }
    return next.handle(request);
  }
}

然后在你的AppModule中注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthPayloadInterceptor } from './auth-payload.interceptor';

@NgModule({
  // ...其他配置
  providers: [
    { 
      provide: HTTP_INTERCEPTORS, 
      useClass: AuthPayloadInterceptor, 
      multi: true 
    }
  ]
})
export class AppModule { }

方法二：后端Lumen适配请求结构 #

如果不想修改前端代码，也可以在Lumen的控制器里手动提取嵌套字段，适配Socialite的要求：

use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;

public function googleLoginCallback(Request $request)
{
    // 从嵌套的authorizationData中取出所需字段
    $authData = $request->input('authorizationData');
    
    // 将code和redirect_uri合并到请求根节点
    $request->merge([
        'code' => $authData['code'],
        'redirect_uri' => $authData['redirect_uri']
    ]);
    
    // 正常调用Socialite逻辑
    $googleUser = Socialite::driver('google')->user();
    
    // 后续的用户登录/注册逻辑...
}

补充说明 #

我当时去ng2-ui-auth的GitHub仓库查过，不少用户都反馈过这个问题，目前官方还没有添加配置项来调整请求负载的结构，所以上面两种临时方案是最直接有效的。我自己用的是前端拦截器的方案，改动小且不影响后端其他逻辑。

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