“grant_type 参数丢失”：Spotify API PKCE OAuth 流程问题答案

【问题标题】："grant_type parameter is missing": Spotify API PKCE OAuth Flow Troubles“grant_type 参数丢失”：Spotify API PKCE OAuth 流程问题
【发布时间】：2020-12-04 15:32:23
【问题描述】：

我正在开发一个使用 Spotify API 的 React 应用程序我无法弄清楚为什么我在尝试使用 API 的 PKCE OAuth 流获取访问令牌时收到此错误。

{
   error: "unsupported_grant_type",
   error_description: "grant_type parameter is missing"
}

我完全按照guide 的指示进行操作，并且能够很好地获得授权码。这是我试图获取令牌的电话。

let res = await axios.post("https://accounts.spotify.com/api/token", {}, {
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    params: {
        "grant_type": "authorization_code",
        "code": data.code,
        "redirect_uri": redirectUri,
        "code_verifier": verifier,
        "client_id": clientId
      }
    }).catch(err => console.error(err));

我尝试在发布请求的正文中传递参数并作为 url 参数传递，两者都产生相同的结果。如您所见，我显然提供了grant_type，并且我使用的是指南所说的值。

【问题讨论】：

标签： javascript reactjs oauth-2.0 pkce

【解决方案1】：

使用 querystring npm 包来解析数据，因为我们在标题中使用 application/x-www-form-urlencoded

并将 grant_type 更改为 grant_type: "client_credentials"

var querystring = require('querystring');

const headers = {
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  }
};

let data = {
  grant_type: "client_credentials",
  code: data.code,
  redirectUri: "http://localhost:8000/callback",
  client_id: your_client_id,
  client_secret: your_client_secret,
};

我们对 data 使用 query.stringify() 因为内容类型是 application/x-www-form-urlencoded 也不要使用参数，因为它是发布请求

axios
  .post(
    "https://accounts.spotify.com/api/token",
    querystring.stringify(data),
    headers
  )
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

【讨论】：

【解决方案2】：

我已经尝试了我在互联网上找到的所有方法，似乎没有任何效果，但几个小时后，这成功了：

const headers = {
  Authorization:
    'Basic ' +
    new Buffer(CLIENT_ID + ':' + CLIENT_SECRET).toString('base64'),
}

const { data } = await axios.post(
  'https://accounts.spotify.com/api/token',
  'grant_type=client_credentials',
  headers: { headers },
)

this.token = data.access_token

在此之后，您可以简单地使用任何端点，如 Spotify API 示例中所示。

【讨论】：

【解决方案3】：

您是否跟踪了消息并验证了请求正文是否完全符合预期？您的 OAuth 字段看起来完全正确，所以我怀疑这可能只是 axios 语法问题。

我可能是错的，但应该将“params”字段改为“data”，如this class of mine。

【讨论】：

谢谢！是的，我需要将参数格式化为查询字符串并将其作为请求的正文传递。

【解决方案4】：

这对我有用：

const headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
  Authorization:
    'Basic ' +
    Buffer.from(this.clientId + ':' + this.clientSecret).toString('base64'),
};

this.http.post(
  'https://accounts.spotify.com/api/token',
  'grant_type=client_credentials',
  { headers },
).subscribe(data => {
  console.log(data);
});

【讨论】：

【解决方案5】：

我也有同样的问题，通过字符串化请求正文数据解决了

const requestAccessToken = ({
  code,
  grantType = "authorization_code",
  redirectUri = `${APP_BASE_URL}/callback`,
}) => {
  const data = qs.stringify({ //query-string library
    code,
    grant_type: "client_credentials",
    redirect_uri: redirectUri,
  });
  return axios.post(
    [SPOTIFY_ACCOUNTS_BASE_URL, SPOTIFY_ACCOUNTS_TOKEN_URI].join(""),
    data,
    {
      headers: {
        Authorization: `Basic ${Buffer.from(
          `${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`,
        ).toString("base64")}`,
        "Content-Type": "application/x-www-form-urlencoded",
      },
    },
  );
};

【讨论】：