如何在Nuxt.js中配置Azure B2C身份认证并通过Nuxt Auth处理授权码？

1. 安装依赖 #

首先安装Nuxt Auth模块及Axios：

npm install @nuxtjs/auth-next @nuxtjs/axios

2. 配置Nuxt Auth与Azure B2C #

在nuxt.config.js中添加模块并配置Azure B2C的OAuth2策略：

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],
  axios: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000'
  },
  auth: {
    strategies: {
      azureB2C: {
        scheme: 'oauth2',
        endpoints: {
          // 替换为你的Azure B2C租户、策略名称
          authorization: `${process.env.AZURE_B2C_TENANT}.b2clogin.com/${process.env.AZURE_B2C_TENANT}.onmicrosoft.com/${process.env.AZURE_B2C_POLICY}/oauth2/v2.0/authorize`,
          token: `${process.env.AZURE_B2C_TENANT}.b2clogin.com/${process.env.AZURE_B2C_TENANT}.onmicrosoft.com/${process.env.AZURE_B2C_POLICY}/oauth2/v2.0/token`,
          userInfo: `${process.env.AZURE_B2C_TENANT}.b2clogin.com/${process.env.AZURE_B2C_TENANT}.onmicrosoft.com/${process.env.AZURE_B2C_POLICY}/openid/v2.0/userinfo`
        },
        clientId: process.env.AZURE_B2C_CLIENT_ID,
        clientSecret: process.env.AZURE_B2C_CLIENT_SECRET, // 授权码流程必填
        redirectUri: process.env.AZURE_B2C_REDIRECT_URI || 'http://localhost:3000/callback',
        responseType: 'code',
        grantType: 'authorization_code',
        scope: ['openid', 'offline_access', process.env.AZURE_B2C_API_SCOPE], // 按需添加API权限
        codeChallengeMethod: 'S256' // 可选，启用PKCE增强安全性
      }
    },
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/callback',
      home: '/'
    }
  }
}

3. 触发登录流程 #

在登录页面或组件中，通过$auth.loginWith触发Azure B2C登录：

<template>
  <button @click="handleLogin">登录</button>
</template>

<script>
export default {
  methods: {
    async handleLogin() {
      await this.$auth.loginWith('azureB2C')
    }
  }
}
</script>

4. 自动处理授权码交换 #

配置完成后，Nuxt Auth会自动完成以下流程：

• 跳转至Azure B2C登录页
• 登录成功后携带授权码跳转至callback页面
• 自动调用token端点交换授权码为access_token、id_token
• 将token和用户信息存入Vuex store及本地存储

你无需手动编写中间件解析授权码、发送token请求——Nuxt Auth的OAuth2 scheme已经封装了这些逻辑。

5. 验证集成效果 #

在任意页面可直接获取用户信息和token：

<script>
export default {
  mounted() {
    console.log('当前用户:', this.$auth.user)
    console.log('Access Token:', this.$auth.strategies.azureB2C.token.get())
  }
}
</script>

6. 自定义登录后逻辑（可选） #

若需在登录成功后执行自定义操作，可通过Auth插件的onLogin钩子实现：

1. 在nuxt.config.js中添加插件：

auth: {
  // ...其他配置
  plugins: [{ src: '~/plugins/auth.js', mode: 'client' }]
}

2. 创建plugins/auth.js：

export default function ({ $auth }) {
  $auth.onLogin(({ user, token }) => {
    // 自定义逻辑，比如调用后端API存储用户信息
    console.log('登录完成:', user, token)
  })
}

注意事项 #

• 确保Azure B2C应用注册的重定向URI与配置的redirectUri完全一致
• 权限scope需在Azure B2C应用中提前配置并授予
• 生产环境必须使用HTTPS，避免安全风险

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