Nuxt OpenID-Connect
用於 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,這會在頁面重新整理後保留使用者驗證資訊。類似於這裡。
為何使用此模組
如何使用此模組
- 新增至專案
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 - 用 💚 製作