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クッキーの暗号化。
ブラウザのlocalStorageにuserInfoを保存するサポート。ページリロード後もユーザー認証情報を保持します。こちらと同様です。

このモジュールを使用する理由

公式の認証モジュールは、まだNuxt 3.0をサポートしていません。
nuxt-oidcもNuxt 3.0をサポートしていません。

このモジュールの使用方法

プロジェクトに追加

npx nuxi@latest module add nuxt-openid-connect

次に、nuxt.config.tsにnuxt-openid-connectモジュールを追加し、設定(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 - 💚を込めて作成