Google OAuth2 与 Vue3 和 NestJS -redirect_uri_mismatch

Question

我正在使用 Vue3 和 NestJS 开发一个 Web 应用程序，并尝试实现 Google 身份验证。然而，即使我提供的callbackURI与我在Google Cloud Console中配置的相同，我总是收到redirect_uri_mismatch错误。

这是我在前端的代码：

const loginWithGoogleClick = async () => {
  googleAuthCodeLogin().then((response) => {
    loginWithGoogle(response);
  })
}
const loginWithGoogle = async (googleResponse: any): Promise<boolean> => {
    try {
      const response = await axiosClient.post(`auth/google/callback`, {
        code: googleResponse.code,
      });
...

后端：

@Injectable()
export class GoogleStrategy extends PassportStrategy(Strategy, 'google') {
  constructor() {
    super({
      clientID: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      callbackURL: 'http://localhost:8080/api/auth/google/callback',
      scope: ['profile', 'email'],
    });
  }
...

这是我在 Google 中配置的屏幕截图：

我尝试更改添加尾随 / 就像我在一些帖子中看到的那样，我尝试将其更改为 127.0.0.1...没有任何效果:(

值得注意的是，我的前端运行在 localhost:3000 上，后端运行在 localhost:8080 上。也许这就是问题所在？

Answer 1

所以答案是把“postmessage”作为CallbackURL。这对于passport-google-oauth2来说是不可能的，因为它会自动在“postmessage”之前添加原始URL......所以我必须进行手动验证而不是使用passport。