使用 Google 登录“访问被阻止：此应用程序的请求无效”

Question

我正在尝试通过 firebase 使用 next-auth.js 添加用户身份验证。我遵循了有关如何使用谷歌作为提供商来实现登录系统的文档。即使我输入了正确的凭据，谷歌仍然说该应用程序的请求无效。

这是我提出请求的方式：

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
   // Configure one or more authentication providers
   providers: [
      GoogleProvider({
         clientId: process.env.GOOGLE_CLIENT_ID,
         clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      }),
      // ...add more providers here
   ],
};

export default NextAuth(authOptions);

Answer 1

只需在 OAuth 2.0 客户端 ID 配置中提及授权重定向 URI（附图）：

下一个身份验证文档还指出要提及：授权重定向 URI

对于生产：https://{YOUR_DOMAIN}/api/auth/callback/google 用于开发：http://localhost:3000/api/auth/callback/google

文档链接：https://next-auth.js.org/providers/google

Answer 2

正确的redirect_uri将显示在Google错误屏幕的“错误详细信息”弹出窗口中。

要小心，因为差异可能很小。例如，您可能在 Google 控制台中配置的redirect_uri 中缺少“www”。

这对我不起作用：

https://prose.cafe/api/auth/callback/google

但这有效：

https://www.prose.cafe/api/auth/callback/google

（注意“www”）

“错误详细信息”弹出窗口应该为您提供完整正确的redirect_uri：

我的配置和错误详细信息中的 URL 之间的区别是“www”。现在工作正常。