开发服务器上的 Vuex-OIDC

Question

在我的应用程序上，我安装了 Vuex-oidc 包来使用我从后端获得的端点实现身份验证，并且在我的机器上一切正常，但我收到了修改 oidc 设置的请求，因为现在 auth 只能在语言环境中工作，而不是在开发服务器上工作，所以我被要求将这些设置从我的 config/oidc.js 文件移动到 Nuxt“运行时”。

这是我的 config/oidc.js 文件：

export const oidcSettings = {
  authority: 'https://***/***.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=B2C_***_SIGNUPORSIGNIN',
  clientId: '************',
  token_endpoint: 'https://***/***.onmicrosoft.com/oauth2/v2.0/token?p=B2C_***_SIGNUPORSIGNIN',
  redirectUri: 'http://localhost:3000/oidc-test/oidc-callback',
  responseType: 'id_token ',
  scope: 'https://***.onmicrosoft.com/***/Read openid'
}

然后我在商店中有这个 oidc.js 文件，它正在使用我的 oidcSettings:

import { vuexOidcCreateStoreModule } from 'vuex-oidc'
import { oidcSettings } from '~/config/oidc'

const storeModule = vuexOidcCreateStoreModule(
  oidcSettings,
  {
    namespaced: true,
    dispatchEventsOnWindow: true,
    publicRoutePaths: ['/', 'oidc-callback-error']
  },
  // Optional OIDC event listeners
  {
    userLoaded: user => console.log('OIDC user is loaded:', user),
    userUnloaded: () => console.log('OIDC user is unloaded'),
    accessTokenExpiring: () => console.log('Access token will expire'),
    accessTokenExpired: () => console.log('Access token did expire'),
    silentRenewError: () => console.log('OIDC user is unloaded'),
    userSignedOut: () => console.log('OIDC user is signed out')
  }
)

export const state = () => (storeModule.state)

export const getters = storeModule.getters

export const actions = storeModule.actions

export const mutations = storeModule.mutations

我不确定我应该使用什么或做什么来完成请求，我想引入一个 .env 并从那里检索 oidcSetting。这会是个好主意吗？

我还看到 Nuxt 有自己的运行时，可以在 nuxt.config.js 中声明，例如“publigRuntimeConfig：{}”和“privateRuntimeConfig：{}”，但我找不到太多，只是使用它们的基本方法，但我不确定我的哪些设置应该是私有的，哪些应该是 public，而且我也不确定如何在我的 store/oidc.js 文件中调用它们.

有什么建议吗？

Answer 1

你有这些设置吗

  export const oidcSettings = {
  authority: 'https://your_oidc_authority',
  clientId: 'your_client_id',
  redirectUri: 'http://localhost:1337/oidc-callback',
  responseType: 'id_token token',
  scope: 'openid profile'
}

我只能建议去看看https://github.com/perarnborg/vuex-oidc/wiki

Answer 2

我不确定这是获得我想要的结果的最佳做法，但它有效：

我所做的是使用 .env 文件并在其中保存所有信息：

AUTHORITY = https://***/***.onmicrosoft.com/v2.0/.well-known/...
CLIENT_ID = ************
TOKEN_ENDPOINT = https://***/***.onmicrosoft.com/oauth2/v2.0/token?...
REDIRECT_URI = http://localhost:3000/oidc-test/oidc-callback
RESPONSE_TYPE = id_token
SCOPE = https://***.onmicrosoft.com/***/Read openid

然后在我的 nuxt.config.js 中，我在文件的最顶部添加了 require('dotenv').config()（必须安装 @nuxtjs/dotenv 和 dotenv 包，@nuxtjs/dotenv 必须在 nuxt.config.js)

的模块和 buildModules 中声明

现在您可以删除 config/oidc.js 文件，您可以编辑 store/oidc.js：而不是：

import { oidcSettings } from '~/config/oidc'

你可以这样写：

const oidcSettings = {
  authority: process.env.AUTHORITY,
  clientId: process.env.CLIENT_ID,
  token_endpoint: process.env.TOKEN_ENDPOINT,
  redirectUri: process.env.REDIRECT_URI,
  responseType: process.env.RESPONSE_TYPE,
  scope: process.env.SCOPE
}

开发服务器上的 Vuex-OIDC

Vuex-OIDC on the dev server

authentication

nuxt.js

runtime

openid-connect