nuxt auth : Google 提供商返回 invalid_request答案

【问题标题】：nuxt auth : Google provider return invalid_requestnuxt auth : Google 提供商返回 invalid_request
【发布时间】：2021-04-28 15:33:51
【问题描述】：

我尝试使用 Nuxt Auth 模块设置 google 身份验证，但我从 google 收到以下错误：

Error 400 : invalid_request
Parameter not allowed for this message type: nonce

这是我的配置

// nuxt.config.js
modules: ["@nuxtjs/axios", "@nuxtjs/auth-next"],
auth: {
  router: {
    middleware: ["auth"],
  },
  redirect: {
    login: "/login",
    logout: "/",
    callback: false,
    home: "/",

  },
  strategies: {
         google: { clientId: "MyClientID", codeChallengeMethod: "" }
  }
}

以及我如何在组件中调用 google auth：

login(){
   this.$auth.loginWith("google").then( result => console.log(result) )
}

我也尝试从这里运行官方演示： https://github.com/nuxt-community/auth-module/tree/dev/demo 但是我遇到了同样的错误。

【问题讨论】：

我也遇到了同样的问题
@Abid 你试过切换nuxt auth 版本吗？
是的。 V5 有一些问题

标签： javascript vue.js nuxt.js nuxtjs nuxt-auth

【解决方案1】：

有同样的问题，但设置 ~~responseType: 'code'~~ 对我有用。

编辑：将responseType: "id_token token" 设置为隐式授权流程，并使用 Google 的访问令牌重定向到您的 Nuxt 应用。整个 OAuth 主题对我来说一直很困惑，并且在安全方面有太多关于该做什么和不该做什么的错误信息。我发现以下文章非常有帮助并揭开了各种 OAuth 流程的神秘面纱：https://itnext.io/an-oauth-2-0-introduction-for-beginners-6e386b19f7a9 但是，如果您不想在前端公开访问令牌，而是在后端获取它，那么您必须使用 代码授权流程通过设置responseType: "code" 并正确设置您的后端。我最终使用了代码授权流程，但我认为大多数人发现隐式授权流程更方便。

这是完整的 sn-p：

export default {
  modules: ["@nuxtjs/axios", "@nuxtjs/auth-next"],
  auth: {
    strategies: {
      google: {
        clientId: process.env.GOOGLE_CLIENT_ID,
        redirectUri: `${process.env.BASE_URL}/auth/google/callback`,
        codeChallengeMethod: "",
        responseType: "id_token token",
      },
    },
  },
  router: {
    middleware: ["auth"],
  },
};

【讨论】：

如果您将 responseType 更改为 code，那么您将能够选择一个 gmail 帐户，但从 /login 到 /home（或您拥有的任何东西）的重定向不再起作用
@DamianPerez 我已经编辑了我的答案，我希望它现在能更清楚。如果您将响应类型更改为responseType: "id_token token"，那么您应该被重定向到您的 Nuxt 应用程序。

【解决方案2】：

在 auth-next 和 auth0 中 responseType 的设置让我绕过这个问题，我的工作配置如下：

auth0: {
  logoutRedirectUri: process.env.BASE_URL,
  domain: String(process.env.AUTH0_DOMAIN).replace(/(^\w+:|^)\/\//, ''),
  clientId: process.env.AUTH0_CLIENT_ID,
  scope: ['read:reports', 'read:roles', 'create:client_grants', 'offline_access'], // 'openid', 'profile', 'email' default added
  audience: process.env.AUTH0_AUDIENCE,
  responseType: 'token',
  accessType: 'offline',
  grantType: 'client_credentials',
  redirectUri: process.env.BASE_URL + '/callback',
  codeChallengeMethod: 'S256'
}

【讨论】：

【解决方案3】：

好像和Nuxt Auth的版本有关。

也许@nuxtjs/auth-next这个功能还没有准备好

所以我跑了

npm install @nuxtjs/auth@latest --save

然后更新 nuxt.config.json

将@nuxtjs/auth-next 替换为@nuxtjs/auth
将clientId 替换为client_id

// nuxt.config.js
modules: ["@nuxtjs/axios", "@nuxtjs/auth"],
auth: {
  router: {
    middleware: ["auth"],
  },
  redirect: {
    login: "/login",
    logout: "/",
    callback: false,
    home: "/",

  },
  strategies: {
         google: { client_id: "MyClientID"}
  }
}

【讨论】：