0

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

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

我完全按照指南中的指示进行操作，并且能够很好地获得身份验证代码。这是我试图获取令牌的电话。

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 参数传递，两者都产生相同的结果。如您所见，我显然提供了 agrant_type并且我正在使用指南所说的值。

4

5 回答 5

2

使用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,
};

我们使用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);
  });
于 2021-01-29T12:02:54.767 回答
1

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

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 示例中所示。

于 2021-12-03T12:24:53.667 回答
0

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

我可能错了，但应该将“参数”字段称为“数据”，就像在我的此类中一样。

于 2020-08-16T17:49:27.283 回答
0

这对我有用：

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);
});
于 2021-12-27T14:01:59.837 回答
0

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

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",
      },
    },
  );
};
于 2022-01-23T15:46:18.520 回答