处理Spotify Web API
#javascript #网络开发人员 #教程 #spotify

Spotify API是API世界中使用最广泛的API之一。由于音乐是我们生活中的主要部分，因此该API用作工具，可将个人从我们的私人空间扩展到任何可以流式传输我们喜欢的艺术家的应用程序。

根据Spotify开发人员团队授予您授予的权限和访问权限，您可以抓住并操纵任何授权用户的数据以适合您的应用程序的需求。

例如，诸如Discord，last.fm，and many more之类的应用程序利用Spotify API为其用户提供很大的个性化聆听体验。

这些公司如何访问和操纵API以满足您要求的需求？答案很简单。

发送请求，获取答复。

虽然重要的是要注意，您的用例将确定您将使用哪些端点，但Web应用程序通常会使用某些东西来利用Spotify Web API，您需要熟悉自己。

您需要了解如何执行可以使用API​​执行的常见CRUD操作，可以使用Postman详细了解

共享的端点

要开始使用Spotify API，您需要登录spotify developer dashboard并创建一个新项目。

单击Create-New-App后，您将看到一个模式，要求您​​输入：项目的规格，主机URL和其他详细信息。

Project creation modal

当您击中保存时，您的项目将被创建，应该看起来像这样。这是为了让Spotify知道向其服务器提出请求的URL已识别并与您提供的信息匹配。现在我们可以继续处理API。

your created project

身份验证和授权

要通过API的端点访问用户的数据，我们首先需要对用户进行身份验证。

此过程以所需的参数向spotify account url提出请求，并将hash令牌发送到您的窗口URL作为响应。

每次向Spotify API提出请求时，发送给您的URL的这个令牌将用于授权用户。是的。每一次。
最好的部分？它在3600毫秒内到期。

要成功提出您需要提供的请求：

  1. 客户ID
  2. 重定向URL（您的网站URL或Local -Host URL）
  3. Spotify授权URL和
  4. 您的请求范围

login.js 

 function handleLogin() {
    const clientId = "aa7a764r6d6sd63t186314717ds7715318c";
    const redirectUrl = "http://localhost:3000";
    const apiUrl = "https://accounts.spotify.com/authorize";
    const scope = [
      "user-read-email",
      "user-read-private",
      "user-modify-playback-state",
      "user-read-currently-playing",
      "user-read-playback-state",
      "user-read-recently-played",
      "user-read-playback-position",
      "user-top-read",
    ];

    window.location.href = `${apiUrl}?client_id=${clientId}&redirect_uri=${redirectUrl}&scope=${scope.join(
      " "
    )}&response_type=token&show_dialog=false`;

    localStorage.clear();
  }
// Notice i set the dialog=false. If you set it to true you will be redirected to the spotify login page. If not, you continue like a boss.
// Also notice i cleared the local storage after logging in the user. I would explain why in a bit.

稍安毋躁。

登录用户后，您会注意到将hash-token发送到窗口URL。我们不需要整个哈希，我们只需要一部分（令牌）。因此，我们将从窗口URL中获取哈希，并在其上执行操作以使用正则表达式获得令牌。当我们获得令牌时，我们将其提供给我们的全球状态，以便在整个应用程序中访问它。

对于我的应用程序，我将USECONTEXT和用户挂钩用于全局状态管理。因此，当我获得令牌时，它会立即派往我的全球状态，并在整个应用程序中访问。

由于本文不涵盖React中的国家管理。我的一位前同事的This article应该详细解释使用还原器挂钩以及如何在国家管理中使用它。


  const [{ token }, dispatch] = useStateProvider();
  useEffect(() => {
    if (localStorage.getItem("spotify-token") === null || undefined) {
      localStorage.clear();
      const hash = window.location.hash;
      const token = hash.substring(1).split("&")[0].split("=")[1];
      window.localStorage.setItem("spotify-token", token);
      dispatch({ type: reducerCases.SET_TOKEN, token });
      window.location.hash = "";
    }
    const route = window.location.pathname;
    if (
      route === "/library" ||
      route === "/" ||
      route === "/home" ||
      route === "/search"
    ) {
      const token = localStorage.getItem("spotify-token");
      dispatch({ type: reducerCases.SET_TOKEN, token });
    }
  }, [token, dispatch]);

本地存储和芝麻广场

如果您记得我早些时候清理了当地的存储空间，那么您应该得到一瓶葡萄酒！

但是我为什么要这样做？

这是因为我需要将令牌存储在本地存储中，以便在刷新页面后能够访问它。刷新页面后，API将发送带有令牌的请求，以获取应用程序的用户数据。如果该令牌在应用程序的状态中可用，则您的请求将成功，如果没有，他们将不成功，您将被登录并发送回第1正方形。

因此，我清除了本地存储，以便使用token值为spotify-token键做好准备，以便每当我刷新页面并将其分配到应用程序状态时，我都可以访问它。

简单的innit？太好了！

数据获取和样本响应

正如我们前面提到的，每次向API提出请求以获取响应时，您都需要Spotify访问令牌。这必须异步发生，因为您将要确保在加载页面上的所有其他项目之前都有响应。

获取用户的公共播放列表

Image description

为了获取用户的所有播放列表，我们将使用Get Playlists Items端点"https://api.spotify.com/v1/me/playlists"，该端点"https://api.spotify.com/v1/me/playlists"出现在Spotify Developers Platform上，而无需https://api.spotify.com/v1/playlists。此请求将通过授权和内容类型标头发送，以确保连接安全。

playlists.js 


export default function Playlists() {
  const [{ token, playlists }, dispatch] = useStateProvider();
  useEffect(() => {
    const getPlaylistData = async () => {
      const response = await axios.get(
        "https://api.spotify.com/v1/me/playlists",
        {
          headers: {
            Authorization: "Bearer " + `token`,
            "Content-Type": "application/json",
          },
        }
      );
      const { items } = response.data;
      const playlists = items.map(({ name, id, images }) => {
        images = images[0].url;
        return { name, id, images };
      });
      dispatch({ type: reducerCases.SET_PLAYLISTS, playlists });
    };
    getPlaylistData();
  }, [token, dispatch]);

}

将播放列表数据访问到应用程序状态后，您将能够访问整个应用程序的数据。这是如果您将前两个播放列表数据（从我的帐户）记录到控制台时，您会得到的响应：


0: 

id: "0RGvWGzBsi9XE200cmpRpE"
images : 
"https://mosaic.scdn.co/640/ab67616d0000b27306728f8480e37e0c4321b1f0ab67616d0000b273131635f182833dfee67ec2beab67616d0000b2738a96302eb81c56c50491b958ab67616d0000b273ec3de434caed2b0e969da43f"
name: "Party 💃🏼"
[[Prototype]] : Object

1 : 

id : "6o5RV6butrAw2Hl2CRkxlx"
images : "https://mosaic.scdn.co/640/ab67616d0000b2731e340d1480e7bb29a45e3bd7ab67616d0000b2734640a26eb27649006be29a94ab67616d0000b2734891d9b25d8919448388f3bbab67616d0000b273d1243ff8852e722747ead762"
name : "Spanish dance hits 💃🏼"

[[Prototype]] : Object

播放列表响应

由于我们仅从返回对象中解构了图像，ID和标题值，这就是我们从API响应中获得的。否则，我们将获得与每个播放列表对象关联的每个值。看起来像这样。


collaborative : false
description :  ""
external_urls :  { spotify : 'https://open.spotify.com/playlist/0RGvWGnHCSi9XE200cmpRpE'
}
href : "https://api.spotify.com/v1/playlists/0RGvWGzBsi9XE200cmpRpE"
id : "0RGvWGzBsi9XE0220cmpRpE"
images : 
(3) [{…}, {…}, {…}]
name : "Party 💃🏼"
owner : 
{
  display_name: 'Heleen Mas Opor Poel', 
  external_urls: {…}, 
  href: 'https://api.spotify.com/v1/users/21wga7eqgd237q2l227zl4eppyhi', 
  id: '21wg3ez7e4q2l227zl4eppyhi', 
  type: 'user', 
  …
}

primary_color : null
public : false
snapshot_id : "MzU5LDUxYmNjZaacbKJCAHCOHADASI0ZDY1ZDdlN2FkMzgyOWM1ZTk4YWU2Njc="
tracks : 
{. 
href: 'https://api.spotify.com/v1/playlists/afuuq3811ydb81y01/tracks', total: 314}
type : "playlist"
uri : "spotify:playlist:0RGvWGzBsi9XE200cmpRpE"

这是如何直接从Spotify API提出请求并获得响应的简单示例。如果您喜欢这篇文章，请给出一个类似的信息，并在...哦，等等，没有YouTube频道。

稍后再见！

increases volume