如何在NuxtJS项目中配置前端接入Azure AD B2C完成身份认证配置

你已经拿到了所有必需的核心参数，按以下步骤操作即可完成B2C基础配置，不需要额外实现完整认证逻辑：

第一步：安装官方认证模块 #

Nuxt生态下直接使用成熟的auth模块完成配置，执行安装命令：

npm install @nuxtjs/auth-next @nuxtjs/axios
# 或使用yarn/pnpm
pnpm add @nuxtjs/auth-next @nuxtjs/axios

第二步：修改项目配置文件 #

打开项目根目录下的nuxt.config.ts（如果是JS项目则为nuxt.config.js），在modules和auth配置项中添加对应参数：

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],
  axios: {
    baseURL: '你的投诉平台后端接口地址' // 无后端可先占位
  },
  auth: {
    strategies: {
      azureB2C: {
        scheme: 'oauth2',
        endpoints: {
          authorization: '你拿到的authorization入口地址',
          token: '你拿到的token endpoint地址',
          logout: '你拿到的end session endpoint地址',
          userinfo: false // 暂时不需要获取用户信息可先关闭，后续要加再配置
        },
        clientId: '你拿到的clientID',
        responseType: 'code',
        grantType: 'authorization_code',
        redirectUri: '你的投诉平台首页地址（比如http://localhost:3000）',
        logoutRedirectUri: '你的投诉平台登出后跳转地址',
        scope: ['openid', 'profile'], // 可根据需要追加额外权限scope
        codeChallengeMethod: 'S256',
        jwksUri: '你拿到的jwks uri地址'
      }
    },
    redirect: {
      login: '/',
      logout: '/',
      home: '/'
    }
  }
})

第三步：验证配置有效性 #

在任意页面添加测试按钮，触发登录跳转验证配置是否正确：

<template>
  <button @click="handleLogin">测试B2C登录跳转</button>
</template>

<script setup>
const { $auth } = useNuxtApp()
const handleLogin = () => {
  $auth.loginWith('azureB2C')
}
</script>

点击按钮如果能正常跳转到Azure B2C的登录页，输入账号登录后能正常跳转回你的Nuxt项目，且控制台能打印出获取到的token，说明B2C配置已经完成。

注意事项 #

• 配置前需要先在Azure AD B2C后台的应用注册中，把你配置里的redirectUri和logoutRedirectUri添加到「重定向URI」列表中，否则会出现跳转报错
• 要实现主应用登录后投诉平台自动免登，需要确保两个应用使用同一个B2C租户、同一个用户流，两个应用的重定向域名根域名保持一致即可

内容的提问来源于stack exchange，提问作者Tiberius