适用于开发，但不适用于生产

Question

我有一个 nextjs Web 应用程序，我正在尝试添加 azureADProvider 作为使用 OAuth 的登录选项，我拥有的代码是

 AzureADProvider({
    clientId: process.env.AZURE_AD_CLIENT_ID,
    clientSecret: process.env.AZURE_AD_CLIENT_ID,
    // tenantId: process.env.AZURE_AD_TENANT_ID,
    // tenantId: "common",
    authorization: {
      params: {
        prompt: 'select_account', // Ensures the account selection prompt is shown
      },
    },
  }),`

这在本地开发中完美运行，但在我部署到 vercel 的生产中却不起作用。

我继续收到的错误：

    [next-auth][error][SIGNIN_OAUTH_ERROR] 
    https://next-auth.js.org/errors#signin_oauth_error invalid_request (AADSTS90112: Application     identifier is expected to be a GUID. Trace ID: 292f0459-1999-44e7-ab91-959cf781a500 Correlation ID:     3e1913a7-0c1d-44ed-9e66-3861b2761049 Timestamp: 2024-09-26 23:32:36Z) {
  error: {
    message: 'invalid_request (AADSTS90112: Application identifier is expected to be a GUID. Trace     ID: 292f0459-1999-44e7-ab91-959cf781a500 Correlation ID: 3e1913a7-0c1d-44ed-9e66-3861b2761049     Timestamp: 2024-09-26 23:32:36Z)',
        stack: 'OPError: invalid_request (AADSTS90112: Application identifier is expected to be a     GUID. Trace ID: 292f0459-1999-44e7-ab91-959cf781a500 Correlation ID: 3e1913a7-0c1d-44ed-9e66-    3861b2761049 Timestamp: 2024-09-26 23:32:36Z)\n' +
          '    at processResponse (/var/task/node_modules/openid-    client/lib/helpers/process_response.js:38:13)\n' +
      '    at Issuer.discover (/var/task/node_modules/openid-client/lib/issuer.js:151:18)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
      '    at async openidClient (/var/task/node_modules/next-    auth/core/lib/oauth/client.js:13:14)\n' +
      '    at async getAuthorizationUrl (/var/task/node_modules/next-auth/core/lib/oauth/authorization-url.js:58:18)\n' +
      '    at async Object.signin (/var/task/node_modules/next-auth/core/routes/signin.js:31:24)\n'     +
      '    at async AuthHandler (/var/task/node_modules/next-auth/core/index.js:221:26)\n' +
      '    at async NextAuthApiHandler (/var/task/node_modules/next-auth/next/index.js:18:19)\n' +
      '    at async auth (/var/task/.next/server/pages/api/auth/[...nextauth].js:36:379)',
    name: 'OPError'
  },
  providerId: 'azure-ad',
  message: 'invalid_request (AADSTS90112: Application identifier is expected to be a GUID. Trace     ID: 292f0459-1999-44e7-ab91-959cf781a500 Correlation ID: 3e1913a7-0c1d-44ed-9e66-3861b2761049     Timestamp: 2024-09-26 23:32:36Z)'
    }

我尝试用硬值替换 env 变量，并且 vercel 具有来自 Azure 客户端的正确变量。

Answer 1

我使用 Azure Ad 创建了 nextjs 应用程序，并通过 GitHub 存储库部署到

Vercel

。

由于客户端 ID 不正确而出现的错误。 确保您的客户 ID 正确。

在您的代码中，您对 clientId 和 clientsecret 使用

process.env.AZURE_AD_CLIENT_ID

。

客户端密钥应该是这样的

clientSecret:process.env.AZURE_AD_CLIENT_SECRET

下面是我的 AzureAdProvider 完整代码。

src/app/api/auth/[...nextauth]/route.ts:

import NextAuth from "next-auth";
import AzureADProvider from "next-auth/providers/azure-ad";
const { AZURE_AD_CLIENT_ID, AZURE_AD_CLIENT_SECRET, AZURE_AD_TENANT_ID } =
  process.env;
if (!AZURE_AD_CLIENT_ID || !AZURE_AD_CLIENT_SECRET || !AZURE_AD_TENANT_ID) {
  throw new Error("The Azure AD environment variables are not set.");
}
const handler = NextAuth({
  secret: AZURE_AD_CLIENT_SECRET,
  providers: [
    AzureADProvider({
      clientId: AZURE_AD_CLIENT_ID,
      clientSecret: AZURE_AD_CLIENT_SECRET,
      tenantId: AZURE_AD_TENANT_ID,
    }),
  ],
  callbacks: {
    async jwt({ token, account }) {
      if (account) {
        token = Object.assign({}, token, {
          access_token: account.access_token,
        });
      }
      return token;
    },
    async session({ session, token }) {
      if (session) {
        session = Object.assign({}, session, {
          access_token: token.access_token,
        });
        console.log(session);
      }
      return session;
    },
  },
});
export { handler as GET, handler as POST };

请参阅我的 GitHub 存储库 以获取完整代码。

在将 nextjs 应用程序部署到 Vercel 之前，将以下值添加到环境变量中，如下所示。

AZURE_AD_CLIENT_ID=<CLIENT_ID>
AZURE_AD_CLIENT_SECRET=<CLIENT_SECRET>
AZURE_AD_TENANT_ID=<TENANT_ID>
NEXTAUTH_URL=http://localhost:3000

成功部署后，我将 Vercel nextjs 应用程序 URL 添加到应用程序注册中，如下所示。

https://<AppName>.vercel.app/api/auth/callback/azure-ad

Vercel 输出：

参考：SO回答@Dasari kamali。