正在播放:将Spotify的Awesome API与React结合使用

让房间中的所有人成为DJ。

或者,请朋友将歌曲添加到您的旅行播放列表中。 或者,也许找到任何艺术家与Kanye West之间的分离程度。 这些只是您可以使用SpotifyAPI轻松完成的无数操作中的一些,今天,我将向您展示如何开始使用非常简单的方法。 然后,您将准备好像许多人一样拥有疯狂的创意。

打开您的桌面Spotify应用,或访问Web Player并播放您喜欢的歌曲。 在玩吗 好的,您刚刚完成了此5步教程的第一步。 您可以根据需要暂停它,但不要关闭该应用程序。

我们将制作一个超级简单的React应用,向我们显示当前正在播放的歌曲的名称和专辑封面。

“ TLDR。 你好烂。 我只想要代码。”

很好:( ..这是仓库。

如果您喜欢通过视频学习,我会在YouTube上制作一个教程,并按照以下步骤进行操作:

如果您曾经使用过并且要求您使用Facebook,Google等登录的应用程序,那么您已经使用过Oauth。 基本上,它允许您的应用获得Spotify的授权,并使用访问代码返回到应用的重定向URI,这将使您的应用可以访问该用户的Spotify信息。

然后,您将转到Spotify并将该授权代码交换为access_token,该代码用于进行API调用。

注意:令牌将在60分钟后过期。 您最初在其中获得令牌的响应对象还包含刷新令牌。 您可以使用它来请求新的访问令牌。 我们不会在这里这样做,但是我们将克隆的存储库中有一个示例,您可以使用和修改它,甚至可以设置为在令牌即将到期时自动运行。 本教程将使您花费不到一个小时的时间,但是以防万一,只需再次登录就足以获取新令牌。

步骤1 —打开您的Spotify应用并播放歌曲

您已经做到了,所以您处于领先地位。

第2步-注册您的应用

访问Spotify的开发人员网站,转到“我的应用程序”,单击“创建应用程序”。 命名并描述您想要的应用程序。

在以下屏幕上,我们将找到您新应用的详细信息。

添加重定向URI。 这是Spotify在将用户授权后安全地发送回您的应用程序所需的链接。 输入http://localhost:8888/callback 。 点击底部的“保存更改”按钮。

抄下客户端ID,客户端密钥和您的重定向URI。 您需要将它们放入服务器代码中才能正常工作。 下面的屏幕快照中的内容不适用于您,因为在编写本教程后我重新生成了它们。

3 —设置服务器

创建一个名为spotify-api-intro的文件夹并导航至该文件夹。

我们将使用和修改Spotify提供的示例。 当您在Spotify的开发人员站点上时,单击Web-api->代码示例和库->示例应用程序代码,您应该找到此存储库。 克隆并安装依赖项

  git clone https://github.com/spotify/web-api-auth-examples.git auth-server 
CD认证服务器
npm安装

您会注意到它分为三个目录,每个授权流程一个。 由于我们将使用authorisation_code,因此请导航至该代码并在您喜欢的代码编辑器中打开app.js。 在导入的正下方,我们需要设置三个变量,client_id,client_secret和redirect_uri。 粘贴您先前复制的文本。

  / *认证服务器/authorization_code/app.js * / 
  var client_id ='CLIENT_ID';  //您的客户编号 
var client_secret ='CLIENT_SECRET'; //您的秘密
var redirect_uri ='REDIRECT_URI'; //您的重定向uri

通过运行`nodeauthorization_code / app.js`来启动它。 打开浏览器,您应该会看到一个登录按钮。

单击它时,它将带您到Spotify的登录页面。 登录后,它将把您发送回您的重定向URI。 然后,您应该看到您的Spotify帐户信息以及访问令牌和刷新令牌。

如果您想更详细地了解正在发生的事情,请再次运行该过程,这次要特别注意地址栏。 请注意,每个步骤都将变量传递到查询字符串中。 然后,查看示例服务器代码(app.js),并将其与授权流程图进行比较,确定代码的哪些部分与授权流程的哪些部分相对应。 不必担心“作用域”,我们将在下一步中讨论它。