Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12 日至 13 日。

nuxt-openid-connect

Nuxt 3.0 的 OpenID-Connect(OIDC) 集成模块。

Nuxt OpenID-Connect

npm version

Nuxt 3.0 的 OpenID-Connect(OIDC) 集成模块。(V0.4.0+ 支持 nuxt 3.0.0-stable。)

特性

  • 一个 Nuxt 3 模块(注意:不支持 nuxt 2.x)。
  • OIDC 集成(基于 openid-client 的实现)。
  • 状态管理,共享登录用户信息。
  • OIDC 提供程序配置。
  • 加密 userInfo cookie。
  • 支持浏览器 localStorage 存储 userInfo,这可以在页面刷新后保留用户身份验证信息。类似于

为什么要使用此模块

  • 官方的 auth 模块尚不支持 Nuxt 3.0。
  • nuxt-oidc 也不支持 Nuxt 3.0。

如何使用此模块

  • 添加到项目中
npx nuxi@latest module add nuxt-openid-connect
  • 然后,将 nuxt-openid-connect 模块添加到 nuxt.config.ts 中,并更改为您的配置 (openidConnect)
export default defineNuxtConfig({
  // runtime config for nuxt-openid-connect example -- you can use env variables see .env.example
  runtimeConfig: {
    openidConnect: {
      op: {
        issuer: '',
        clientId: '',
        clientSecret: '',
        callbackUrl: '',
      },
      config: {
        cookieFlags: {
          access_token: {
            httpOnly: true,
            secure: false,
          }
        }
      }
    },
  },
  
  // add nuxt-openid-connect module here... 
  modules: [
    'nuxt-openid-connect'
  ],

  // configuration for nuxt-openid-connect
  openidConnect: {
    addPlugin: true,
    op: {
      issuer: 'your_issuer_value',
      clientId: 'your_issuer_clientid',
      clientSecret: 'secret',
      callbackUrl: '',   // deprecated from 0.8.0
      scope: [
        'email',
        'profile',
        'address'
      ]
    },
    config: {
      debug: false, // optional, default is false
      response_type: 'id_token', // or 'code'
      secret: 'oidc._sessionid',
      isCookieUserInfo: false, // whether save userinfo into cookie.
      cookie: { loginName: '' },
      cookiePrefix: 'oidc._',
      cookieEncrypt: true,
      cookieEncryptKey: 'bfnuxt9c2470cb477d907b1e0917oidc', // 32
      cookieEncryptIV: 'ab83667c72eec9e4', // 16
      cookieEncryptALGO: 'aes-256-cbc',
      cookieMaxAge: 24 * 60 * 60, //  default one day
      cookieFlags: { // default is empty 
        access_token: { 
          httpOnly: true,
          secure: false,
        }
      }
    }
  }
})
  • 在 setup 中使用。
const oidc = useOidc()

这是一个 使用示例

💻 开发

  • 克隆仓库
  • 使用 yarn install 安装依赖项。
  • 运行 yarn dev:prepare 生成类型存根。
  • 使用 yarn run 以开发模式启动 playground

许可证

MIT - 带着 💚 制作