"grant_type parameter is missing": Spotify API PKCE OAuth 流程问题

Question

我正在开发一个使用 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));

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

Answer 1

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

我可能是错的，但 'params' 字段应该被称为 'data'，如 this class of mine.

Answer 2

使用 querystring npm 包来解析数据，因为我们在 header 中使用 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 也不要t 使用参数，因为它是一个 post 请求

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

Answer 3

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

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 示例中看到的任何端点。

Answer 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);
});

Answer 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",
      },
    },
  );
};

"grant_type parameter is missing": Spotify API PKCE OAuth 流程问题

"grant_type parameter is missing": Spotify API PKCE OAuth Flow Troubles

javascript

oauth-2.0

reactjs

pkce