如何使用 Spotify Web API 完成身份验证答案

【问题标题】：How do I complete authentication using the Spotify Web API如何使用 Spotify Web API 完成身份验证
【发布时间】：2020-12-31 12:18:18
【问题描述】：

我正在尝试生成访问令牌以访问 SpotifyWebApi 的网络播放器并在浏览器中播放音乐。即使在尝试了几件事之后，包括阅读 Spotify 的授权代码流程授权文档，我仍然被卡住并且无法获得访问代码。该文档概述了一个 3 步过程。只有第一部分对我有用，我被困在第二步。（Spotify 文档：https://developer.spotify.com/documentation/general/guides/authorization-guide/）

这是我所做的：

第 1 步：

export const authEndpoint = "https://accounts.spotify.com/authorize";
const redirectUri = "http://localhost:3000/";
const clientID = "[redacted]";
const clientSecret = "[redacted]";
const scopes = [
  "user-library-read",
  "user-library-modify",
  "user-read-playback-state",
  "user-read-currently-playing",
  "user-read-recently-played",
  "user-top-read",
  "user-modify-playback-state"
];
export const loginUrl = `${authEndpoint}?client_id=${clientID}&response_type=code&redirect_uri=${redirectUri}&scopes=${scopes.join(
  "%20"
)}&show_dialog=true`;

const ACCESS_CODE = getCodeFromUrl();

第 2 步：

const POST_OBJECT_BODY = {
  grant_type: "authorization_code",
  code: ACCESS_CODE,
  redirect_uri: redirectUri,
  client_id: clientID.toString("base64"),
  client_secret: clientSecret.toString("base64"),
};

fetch("https://accounts.spotify.com/api/token", {
  mode: "no-cors",
  method: "POST",
  body: JSON.stringify(POST_OBJECT_BODY),
}).then((response) => {
  console.log("Response: ", response);
});

我不得不添加“no-cors”部分，因为我遇到了 CORS 错误。

我尝试了其他身份验证方法，它们似乎有效，但我没有获得正确的访问令牌。我这样说是因为我无法播放音乐 - 尽管我有适当的范围，但它一直说“缺少权限”。

任何有关上述内容的帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript reactjs spotify

【解决方案1】：

请注意，您在第 2 步中使用的重定向 uri 必须进行编码。

【讨论】：