尝试使用 OAuth 2.0 令牌获取时，从 spotify web api 获取状态代码 403

Question

我正在使用 Spotify Web API，我正在尝试获取我最常播放的歌曲。我正在使用客户端凭据 OAuth 流程（您可以在 https://developer.spotify.com/documentation/general/guides/authorization/client-credentials/ 阅读更多相关信息）来获取访问令牌，以便我可以创建请求。我得到的访问令牌很好，但是当我尝试使用令牌获取数据时，我收到 403，表明我的请求未被授权。错误代码：

GET https://api.spotify.com/v1/me/top/tracks 403

我正在使用 React，所以我使用 useEffect 在页面加载时获取数据。

API 文件 (spotify.ts)

import { Buffer } from 'buffer';

const clientId = "" // omitted for privacy
const clientSecret = "" // omitted for privacy

const getToken = async (): Promise<string> => {
    const res = await fetch('https://accounts.spotify.com/api/token', {
        method: 'POST',
        headers: {
            'Authorization': 'Basic ' + Buffer.from(clientId + ':' + clientSecret).toString('base64'),
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            grant_type: 'client_credentials',
            scope: 'user-top-read',
        }),
    });
    const data = await res.json();
    return data.access_token;
};

const getMostRecentSong = async (token: string) => {
    const res = await fetch('https://api.spotify.com/v1/me/top/tracks', {
        headers: {
            'Authorization': `Bearer ${token}`,
        },
    });
    const data = await res.json();
    return data;
}

App.tsx

import React, { useEffect } from 'react'
import { getToken, getMostRecentSong } from './services/spotify'

const App = () => {
   useEffect(() => {
      const getData = async () => {
         const accessToken = await getToken();
         const data = await getMostRecentSong(accessToken);
         console.log(data);
      }
      getData();
   }, [])

   return (
      ...
   )
}

为了方便起见，我也包含了我的 App.tsx 文件，但我遇到的唯一错误是请求本身。非常感谢任何帮助:)

Answer 1

/me/top/{type} route requires the user-top-read scope, so using the Client Credentials flow 总是会导致错误。以下是客户端凭据流程的摘要：

The Client Credentials flow is used in server-to-server authentication. Since this flow does not include authorization, only endpoints that do not access user information can be accessed.

相反，您将需要使用 Authorization Code flow and proxy the Spotify requests using a request mechanism that isn't restricted by CORS (e.g. a server or serverless function), or use the Implicit Grant flow，它可以在没有额外合作进程的情况下实现（您可以在客户端 React 应用程序中完成所有操作）。

尝试使用 OAuth 2.0 令牌获取时，从 spotify web api 获取状态代码 403

getting a status code of 403 from spotify web api when trying to fetch with OAuth 2.0 Token

fetch

spotify

typescript

reactjs

API 文件 (spotify.ts)

App.tsx