如何在Nuxt.js中为OpenID Connect实现PKCE？技术求助

错误1：Invalid configuration. Value of scheme option scope is not supported #

排查与解决： #

• 验证授权服务器支持的Scope：访问你的ENDPOINTS_CONFIG对应的OpenID配置端点（如https://你的SSO地址/.well-known/openid-configuration），查看scopes_supported字段，确认你配置的openid、email、profile、offline_access全部在列表中，注意大小写和拼写（部分服务器可能将offline_access简写为offline）。
• 调整Scope格式：将auth策略中的scope从字符串改为数组，避免库在拆分字符串时出现异常：

  scope: ['openid', 'email', 'profile', 'offline_access']
  

• 确保Discovery配置生效：显式设置discovery: true，让auth-next正确从配置端点拉取服务器信息：

  auth: {
    strategies: {
      oidcmock: {
        scheme: 'openIDConnect',
        discovery: true, // 新增此配置
        // 其他配置...
      }
    }
  }
  

错误2：TypeError: Cannot read properties of null (reading 'common') #

排查与解决： #

• 锁定兼容Nuxt2的auth-next版本：部分新版auth-next侧重支持Nuxt3，Nuxt2需使用特定版本，在package.json中指定：

  "@nuxtjs/auth-next": "5.0.0-1648802546.c9880dc"
  

  之后执行npm install或yarn install更新依赖。
• 补充完整端点配置（可选）：若自动Discovery未正常获取端点，可手动补充：

  endpoints: {
    configuration: process.env.ENDPOINTS_CONFIG,
    authorization: `${process.env.SSO_API}/authorize`,
    token: `${process.env.SSO_API}/token`,
    userInfo: `${process.env.SSO_API}/userinfo`,
    logout: `${process.env.SSO_API}/logout`
  }
  

• 配置回调页面逻辑：确保redirectUri对应的/login/sso/callback页面存在，并处理认证回调：

  <!-- pages/login/sso/callback.vue -->
  <script>
  export default {
    async mounted() {
      await this.$auth.loginWith('oidcmock')
      this.$router.push('/') // 登录成功后跳转首页
    }
  }
  </script>
  

• 确认auth模块已注册：检查nuxt.config.js的modules数组是否包含@nuxtjs/auth-next：

  modules: [
    '@nuxtjs/auth-next',
    // 其他模块...
  ]
  

更简单的替代方案：继续使用oidc-client添加PKCE #

既然旧的oidc-client代码已稳定，可直接开启PKCE支持，无需切换到auth-next：
修改你的oidcSettings配置：

import { UserManager, UserManagerSettings } from 'oidc-client'

export const oidcSettings: UserManagerSettings = {
  authority: process.env.SSO_API,
  client_id: process.env.SSO_CLIENT_ID,
  redirect_uri: process.env.SSO_LOGIN_REDIRECT_URI,
  response_type: 'code',
  scope: 'openid offline email profile offline_access',
  post_logout_redirect_uri: process.env.SSO_LOGOUT_REDIRECT_URI,
  pkce: true, // 开启PKCE
  code_challenge_method: 'S256' // 指定PKCE算法
}

export const oidcUser = new UserManager(oidcSettings)

此方案无需改动Nuxt配置，直接复用原有登录逻辑，快速满足PKCE要求。

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