最近，我正在寻找一个有趣的API来玩，并决定查看Spotify API。 Spotify提供了一个方便的快速入门指南，以帮助开发人员开始使用Web API。 他们建议您使用Node.js，因此，如果尚未安装，请确保从Nodejs.org或通过Homebrew安装它，并在开始之前确认它是否正常工作。
入门很容易-前往Spotify for Developers网站并注册您的应用程序，记下您的客户ID和应用程序密钥。 如果您还没有Spotify帐户，则需要创建一个。
需要注意的一件事是，您将需要添加重定向URI。 授权后，Spotify使用此链接将用户重定向回您的应用程序。 在“重定向URI”下的“编辑设置”中，添加“ http：// localhost：8888 / callback”。
使用Spotify对应用程序进行授权的方式有以下三种：授权码（可刷新的用户授权），隐式授予（临时用户授权）和客户端凭据流（可刷新的应用程序授权）。 感受这些不同流程的最简单方法是克隆Spotify的Web Auth API示例并在本地服务器上运行每个示例。 今天，我将使用授权码流程。
此流程上只有两个文件-“ public”文件夹中的index.html文件和app.js文件。
通过浏览这些文件，可以发现index.html处理登录页面以及在页面上呈现用户信息。 它还包含嵌入式Javascript，包括jQuery ajax API调用，事件侦听器以及与获取和保存访问令牌有关的逻辑。
app.js文件相对较长。 该指南告诉我们，其中包含以下代码：
- 在本地计算机上创建服务器
- 处理用户登录请求
- 指定寻求授权的范围
- 执行访问令牌的授权码交换
- 调用Web API端点
在第16-18行上，有client_id，client_secret和redirect_uri的变量声明。 您将需要用自己的凭据替换这些变量值。 如果您没有记下这些信息，则必须返回到Spotify for Developers仪表板以获取此信息。
var client_id ='CLIENT_ID'; //您的客户编号
var client_secret ='CLIENT_SECRET'; //您的秘密
var redirect_uri ='REDIRECT_URI'; //您的重定向uri
在第49行，有“ scope”变量声明。 这告诉Spotify我们希望用户向我们的应用程序授予哪个权限。 可以在此处找到不同范围的说明。
var scope ='user-read-private user-read-email';
默认情况下，我们要求提供user-read-private （可访问用户的私人播放列表）和user-read-email （可对用户的电子邮件地址进行读访问）。
现在，我们可以在浏览器中查看授权过程。 通过输入“ node app.js”运行您的应用程序。 这将启动本地服务器。
节点app.js
聆听8888
然后，您可以导航到本地主机，该主机将默认为端口8888。
您应该看到以下内容：
如果遇到问题，请检查该端口上是否还没有运行任何东西。
点击蓝色按钮。 如果您登录到Spotify，将看到类似于以下屏幕的内容。 如果没有，系统将提示您登录，然后重定向到此屏幕。
提供授权后，您将看到以下内容：
成功！ 授权流程正在运行，您应该能够看到您的个人用户信息。 现在，我们可以开始使用各种API端点了。
我想查看一下我的顶级播放列表并在浏览器中进行渲染，因此今天我对“获取当前用户的播放列表列表”端点感兴趣。 此处的文档非常有帮助，并告诉我该终结点需要’playlist-read-private’作用域，因此已将其添加到我的作用域变量中：
var scope ='用户读取专用用户读取电子邮件播放列表读取专用';
我还需要API端点https://api.spotify.com/v1/me/playlists。
我正在使用Javascript查询API，实际上已经有了一个包装器，其中包含JMPerez创建的API的帮助器函数。 因此，我决定使用包装纸。
该平台通过其API提供了用于非商业用途的大量功能和大量数据，包括轨道的音频分析和可自定义的建议。
我在索引页面上添加了一个名为“获取热门播放列表”的新按钮，该按钮位于“生成新的访问令牌”按钮旁边。 我需要向该按钮添加事件侦听器，单击该按钮将触发API调用。
document.getElementById（'spotify-button'）。addEventListener（'click'，function（）{$ .ajax（{url：'https://api.spotify.com/v1/me/playlists',headers：{'授权”：“承载者” + access_token}
返回控制台后，我在控制台中登录以查看响应对象。
我们可以看到响应对象包含一个名为“ items”的属性，其中包含20个播放列表对象的数组。
现在，我对响应对象的结构有了一个想法，我可以编写代码以在页面上呈现我的顶级播放列表，并将其链接到我的API调用上。
接下来的第二部分！
