Next.js next-auth.js with Azure Active Directory B2C未注册重定向URI

lndjwyie  于 2023-05-28  发布在  其他
关注(0)|答案(1)|浏览(110)

我在使用next-auth.js通过Azure AD B2C登录时遇到“redirect_uri_mismatch”错误。错误描述如下:“请求中提供的重定向URI 'http://localhost:3000/api/auth/callback/azure-ad-b2c'未为客户端ID 'c716 xxx 8406'注册。”
我已将项目配置如下
下一认证路由

const handler = NextAuth({
        AzureADB2CProvider({
            tenantId: process.env.AZURE_AD_B2C_TENANT_NAME,
            clientId: process.env.AZURE_AD_B2C_CLIENT_ID!,
            clientSecret: process.env.AZURE_AD_B2C_CLIENT_SECRET!,
            primaryUserFlow: process.env.AZURE_AD_B2C_PRIMARY_USER_FLOW,
            authorization: { params: { scope: "offline_access openid" } },
        })
    ],
    pages: {
        signIn: '/'
    }
})
export { handler as GET, handler as POST }

登录按钮组件

export default function Home() {
  const { data: session } = useSession()

  return (
    <main className={styles.main}>
      <p>
        Signed in as {session?.user?.email ?? ''}
      </p>
      <button onClick={() => signIn('azure-ad-b2c')}>sign az</button>
      <button onClick={() => signOut()}>sign out</button>
    </main>
  )
}

Azure应用注册和next.js项目目录x1c 0d1x

错误消息

我还需要配置其他东西吗?
next.js版本:13.4.1 next-auth.js版本:4.22.1

piwo6bdm

piwo6bdm1#

我刚刚遇到这个问题。
在Azure中进行应用注册的Web重定向URI应同时具有NextAuth回调URL(http://localhost:3000/api/auth/callback/azure-ad-b2c)以及您用于B2C用户流的身份提供程序的Callback URL。您可以在Azure AD B2C租户的身份提供程序页面上的“配置”面板中找到此URL。它应该看起来像这样:

Callback URL
https://TENANT-NAME.b2clogin.com/TENANT-NAME.onmicrosoft.com/oauth2/authresp

在相关的说明中,我看到您正在使用自定义的signIn页面。在NextAuth中使用自定义signIn页面会带来一个问题,即根据您调用signIn函数的方式,重定向并不总是被正确处理。signIn("azure-ad-b2c"))。查看我在这个GitHub问题中的评论以了解更多细节。在撰写本文时,NextAuth文档中没有任何地方提到这种边缘情况。
我终于能够让AzureADB 2C NextAuth提供商工作了,一旦我添加了两个重定向URI到我的应用程序注册,并添加了一些额外的代码到我的项目来处理认证后的OAuth2重定向(这不起作用,因为我通过设置AuthOptions.pages.signIn使用自定义signIn页面)。
希望这对某人有帮助,祝你好运!

相关问题