令牌的 Nuxt 身份验证参数

Question

伙计们！ 目前我在发送令牌请求时遇到问题。 我正在使用 nuxtJS @nuxtjs/auth-next模块。 它工作得很好，但我遇到了不发送client_secret的问题。 此授权请求转至AZURE AD 。 我的配置：

msalAzure: {
    scheme: 'oauth2',
    endpoints: {
      authorization: `${process.env.VUE_APP_AZURE_AUTHORITY}/oauth2/v2.0/authorize`,
      token: `${process.env.VUE_APP_AZURE_AUTHORITY}/oauth2/v2.0/token`,
    },
    token: {
      property: 'access_token',
      type: 'Bearer',
      maxAge: 1800,
      global: true,
    },
    refreshToken: {
      property: 'refresh_token',
      maxAge: 60 * 60 * 24 * 30,
    },
    responseType: 'code',
    responseMode: 'query',
    grantType: 'authorization_code',
    accessType: 'offline',
    // ******** change this for your Application (Client) ID ********
    redirectUri: process.env.VUE_APP_AZURE_REDIRECT_URI,
    clientId: process.env.VUE_APP_AZURE_AD_CLIENT_ID,
    clientSecret: process.env.VUE_APP_AZURE_SECRET,
    codeChallengeMethod: 'S256',
    scope: ['offline_access', 'openid', 'profile', 'User.Read'],
    autoLogout: false,
  },

我需要粘贴client_secret的令牌有效负载：

code: 0.AS8AovV86_Vz5UuO2sAmSstunkCOoPABwrREiFppI0jDAkwvAMU.AgABAAIAAAD--DLA3VO7QrddgJg7WevrAgDs_wQA9P9iCom2SEms5Su-Au0Vl3-GG9W1y4OUDaCIF0y4xmd9H4TIFgNmGW0K425Ji9zN2xAKf6VaQ6q8EiBI9AXdNv8DqZMCDTs9qWBETVF2JftuXIeazYEu-eqmqkNMAp0arJ9Mf7GAnrWHCa5wDYpwXNCI9tQ7nqmuHzp3aRjldsN77_5bq1eqgq7PvU5KaNGmxmkYe96_Xzeqqu-9FlJGpNlJ6y8J1BZtW4wVlRrOn6-n1aIFqOcAGp00kR53uiWExjAIZMdPIdjW8BgD2O6ZY8l_779ArkGrUT6zYEjs_YRb7yg2EqgqnL7ZVBVhoufAxbtsRiGbtvA5_Usp4rPf5Bxft3evNPCYA33PWsJUNSOiq4PeOFfpPHjlA7zwkouwfXnmrswONQatNl8xM3BQuduwf1mAszZQKl-skR9-XlvPxj66aGpdl3_hzIqWCqSbSbmIK0e40-Ob4r7XuNb1qoy7opbJfDp1FmTl6WHRexEE1RPBw_XER7kb6kBrXYnTaYPxHuIcVZeYdYS58o_8kMwVVO-qsTb1N7RyT52DgiHB22yUNZaPwpyB6k1wr9hSbhPT6jkIMbuud__EHrmvRVqQaTY1CHAVG8H1wd3CKJCWTFR9sajos17VybxJ4VT_r7ySRUH2UQarOU0ooTlyO32P7iBO5K9CU3V4XrRAQCiVfIMNcbcU1WWlF_eTkEX9bXnHN6houQtLhVndm8y1XIJ21_qh4pVB3wpm0HrXXSGdYgvrM2Td7zx6EZPKK1CmJMgnEii5w1U09occn-CLHLBZAv6_vE8hNCS3VqN20YAvO2vhiLYalS4JmNHG3Z4CVuJ3K7fz5B23kA
client_id: f0a08e40-c201-44b4-885a-692348c3024c
redirect_uri: http://localhost:8005/login/submit/
response_type: code
audience: 
grant_type: authorization_code 

发送策略请求（此参数仅用于授权）：

@click="$auth.loginWith('msalAzure', { params: { client_secret: process.env.VUE_APP_AZURE_SECRET,},})"

谢谢您的帮助！

Answer 1

您无法在客户端访问您的process.env.VUE_APP_AZURE_SECRET 。 动作点击和事件触发是客户端。

请尝试使用Public Runtime Config进行公共运行时配置 - 客户端和服务器都可以使用 $config 访问此对象的值。

在nuxt.config.js

publicRuntimeConfig: {
  azureClientSecret: process.env.VUE_APP_AZURE_SECRET
}

然后，您可以通过在您的代码中访问$config.azureClientSecret来使用此值，如下所示：

@click="$auth.loginWith('msalAzure', { params: { client_secret: $config.azureClientSecret,},})"

但我认为你应该避免把你的密钥放在客户端。