如何使用 Spotify Web API 完成身份驗證

Question

我正在嘗試生成訪問令牌來訪問 SpotifyWebApi 的 web 播放器並在瀏覽器中播放音樂。 即使嘗試了幾件事，包括閱讀 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 錯誤。

我嘗試了其他身份驗證方法，它們似乎有效，但我沒有獲得正確的訪問令牌。 我這樣說是因為我無法播放音樂 - 盡管我有適當的范圍，但它一直說“缺少權限”。

任何有關上述內容的幫助將不勝感激。 謝謝！

Answer 1

只是一個小注釋，您在步驟 2 中使用的重定向 uri 必須進行編碼。