nuxt auth : Google 提供商返回 invalid_request

Posted 2023-02-22

【中文标题】nuxt auth : Google 提供商返回 invalid_request

【英文标题】：nuxt auth : Google provider return 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 有一些问题

【参考方案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"