谷歌在 NestJS 后端使用 PassportStrategy 登录不起作用，由 React WebApp 调用

如何解决谷歌在 NestJS 后端使用 PassportStrategy 登录不起作用，由 React WebApp 调用

我已经在 nestJS 后端使用 PassportStrategy 实现了 Google 登录（nestJS 后端开发基于本指南：https://medium.com/@nielsmeima/auth-in-nest-js-and-angular-463525b6e071）。

@Get('google')
@UseGuards(AuthGuard('google'))
googleLogin()
{
    // initiates the Google OAuth2 login flow
}

@Get('google/callback')
@UseGuards(AuthGuard('google'))
googleLoginCallback(@Req() req,@Res() res)
{
    // handles the Google OAuth2 callback
    const jwt: string = req.user.jwt;
    if (jwt)
        return res.status(HttpStatus.OK).cookie('jwt',jwt,{
            httpOnly: true
        }).redirect('/');
    else 
        res.redirect('http://localhost:4200/login/failure');
}

使用@UseGuards(AuthGuard('google')) 应该开始谷歌登录：

super({
        clientID    : 'XXX',// <- Replace this with your client id
        clientSecret: 'XXX',// <- Replace this with your client secret
        callbackURL : 'http://myapp.herokuapp.com/auth/google/callback',passReqToCallback: true,scope: ['profile']
    })

如果我将调用 auth/google 放在浏览器的地址栏中，它就可以工作。

如果我从 React WebApp 调用 auth/google 方法，它就不起作用，网络请求就是屏幕截图中的那些。我没有回应的数据。

App Requests

Google Detail

回调似乎没有开始，但“passReqToCallback: true”有效。

响应前端请求：

fetch("http://<url>/auth/google",{
  method: "GET",mode: 'no-cors',headers: {
    'Content-Type': 'application/json','Accept': 'application/json'
  }
})
.then(
  (result) => {
        if (result) {
          history.push({
            pathname: '/home'
          });
        }
  },(error) => {
    
  }
);

登录成功时的后台日志：

2021-02-18T10:34:02.724706+00:00 heroku[router]: at=info method=GET path="/auth/google/" host=myapp.herokuapp.com request_id=310ac45a-3657-4c5f -96dc-f0a1350429db fwd="93.146.33.170" dyno=web.1 connect=1ms service=10ms status=302 bytes=371 protocol=http

2021-02-18T10:34:03.321194+00:00 应用程序[web.1]：{

2021-02-18T10:34:03.321209+00:00 app[web.1]: id: 'XXX',

2021-02-18T10:34:03.321210+00:00 app[web.1]: displayName: 'XXX',

登录失败时的后端日志：

2021-02-18T10:36:29.284759+00:00 heroku[router]: at=info method=GET path="/auth/google" host=myapp.herokuapp.com request_id=2f56f65b-9236-4710- b029-dd973ec0c9a3 fwd="54.187.137.25" dyno=web.1 connect=0ms service=3ms status=302 bytes=371 protocol=http

没有别的

有什么想法吗？你能帮我吗？

谢谢。

解决方法

您实现 google 登录的方式对于全栈应用程序非常有用。由于您使用的是单独的 React 应用程序（我们称之为 SPA），因此您需要进行一些更改。首先，您的后端不需要 /google 端点。这部分应该由SPA完成。用户使用 google 登录后，它应该再次将他重定向到 SPA。此重定向将在查询参数中为您提供用户信息和访问令牌。

只有这样，您才能将该信息转发到后端的 /google/callback 路由。您已经通过 google auth guard 进行了 google 令牌验证，因此剩下的唯一事情就是使用 google 提供给您的信息来登录用户。我猜在你的情况下这意味着生成一个 JWT。不要使用谷歌提供的令牌。生成您自己的 JWT。

来自谷歌 documentation：

如果您将 Google Sign-In 用于与后端服务器通信的应用或网站，您可能需要在服务器上识别当前登录的用户。为了安全地执行此操作，在用户成功登录后，使用 HTTPS 将用户的 ID 令牌发送到您的服务器。然后，在服务器端验证 ID 令牌的完整性，并使用令牌中包含的用户信息建立会话或创建新帐户。