“缺少grant_type参数”：Spotify API PKCE OAuth流程故障

dwbf0jvd 于 2023-01-12 发布在其他

关注(0)|答案(5)|浏览(161)

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

我试过在post请求的主体中传递params和url params，结果都一样，正如你所看到的，我提供了一个grant_type，并且使用了指南中提到的值。

oauth-2.0

来源：https://stackoverflow.com/questions/63417948/grant-type-parameter-is-missing-spotify-api-pkce-oauth-flow-troubles

5条答案

按热度按时间

uplii1fm1#

我已经尝试了每一种方法，我能找到在互联网上，似乎没有什么工作，但几个小时后，这成功了：

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

赞(0）回复(0）举报 2023-01-12

kb5ga3dv2#

使用querystringnpm包解析数据，因为我们在头中使用application/x-www-form-urlencoded
并将授权类型更改为授权类型：“客户端凭据”

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，也不要使用params，因为它是一个post请求

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

赞(0）回复(0）举报 2023-01-12

lfapxunr3#

这对我很有效：

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

赞(0）回复(0）举报 2023-01-12

xj3cbfub4#

我遇到了同样的问题，通过对请求主体数据进行字符串化可以解决这个问题

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

赞(0）回复(0）举报 2023-01-12

qxgroojn5#

您是否跟踪了消息并验证了请求正文确实如预期的那样？您的OAuth字段看起来完全正确，所以我怀疑这可能只是一个axios语法问题。
我可能是错的，但是"参数“字段应该被称为”数据“，就像我的这个类一样。

赞(0）回复(0）举报 2023-01-12