ng-book-2 Angular 4 Spotify API 提供的书中的示例代码答案

【问题标题】：ng-book-2 Angular 4 Spotify API Example code from book providedng-book-2 Angular 4 Spotify API 提供的书中的示例代码
【发布时间】：2018-02-01 19:15:35
【问题描述】：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

/**
 * SpotifyService works querying the Spotify Web API
 * https://developer.spotify.com/web-api/
 */

@Injectable()
export class SpotifyService {
  static BASE_URL = 'https://api.spotify.com/v1';

  constructor(private http: Http) {
  }

  query(URL: string, params?: Array<string>): Observable<any[]> {
    let queryURL = `${SpotifyService.BASE_URL}${URL}`;
    if (params) {
      queryURL = `${queryURL}?${params.join('&')}`;
    }

    return this.http.request(queryURL).map((res: any) => res.json());
  }

  search(query: string, type: string): Observable<any[]> {
    return this.query(`/search`, [
      `q=${query}`,
      `type=${type}`
    ]);
  }

  searchTrack(query: string): Observable<any[]> {
    return this.search(query, 'track');
  }

  getTrack(id: string): Observable<any[]> {
    return this.query(`/tracks/${id}`);
  }

  getArtist(id: string): Observable<any[]> {
    return this.query(`/artists/${id}`);
  }

  getAlbum(id: string): Observable<any[]> {
    return this.query(`/albums/${id}`);
  }
}

export const SPOTIFY_PROVIDERS: Array<any> = [
  { provide: SpotifyService, useClass: SpotifyService }
];

那是我的 spotify.service.ts 文件。控制台给了我这个错误：

加载资源失败：服务器响应状态为 401（未授权） core.es5.js:1084 错误响应标头：标头 {_headers: Map(1), _normalizedNames: Map(1)}ok: falsestatus: 401statusText: "Unauthorized"type: 2url: "https://api.spotify.com/v1/search?q=eminem&type=track"_body: "{↵"错误”：{↵“状态”：401，↵“消息”：“未提供令牌”↵ }↵}“proto：Bodyconstructor：ƒ Response(responseOptions)toString：ƒ ()原型：对象 defaultErrorLogger@core.es5.js:1084

我可以假设这是因为我没有 API 密钥吗？这是直接从书中提供的示例代码。如果我需要一个密钥，我将如何实现它？

【问题讨论】：

我看到，截至 2017 年 5 月 29 日，他们对每个请求都需要一个 api 密钥。这本书是 2017 年出版的，所以它是一个非常近期的变化。我是否只需在 BASE_URL 末尾添加我的密钥？

标签： javascript angular

【解决方案1】：

来自 Spotify documentation

2017 年 5 月 29 日，/search /tracks /albums /artists 和 /users（以及相关）端点将开始需要访问令牌...

要获得令牌，请在 spotify 开发网站here 中注册并创建一个应用程序。希望这会有所帮助。

【讨论】：

我在之前的评论中说过。我该如何添加密钥？我只是在我的 BASE_URL 之后添加密钥吗？

【解决方案2】：

正如@brijmcq 所述，Spotify 已为几乎所有 api 启用了访问令牌，这里有一个简单的教程来获取临时有效的 access_token。

注意：这里仅用于学习Angular时在ngbook中运行示例，生产环境获取access_token请参考Spotify官方授权指南：https://developer.spotify.com/documentation/general/guides/authorization-guide/。

在浏览器中打开 https://developer.spotify.com/dashboard/，注册一个新的 Spotify 帐户或使用您现有的帐户登录。
登录后，点击https://developer.spotify.com/dashboard/applications的CREATE A CLIENT ID按钮
点击您刚刚创建的应用。

3.5 你可以在左上角找到你自己的CLIENT_ID，下一步会用到。

单击 EDIT SETTINGS 按钮（LOGOUT 按钮左侧）
用一些有效的 url 填充重定向 URI，例如“http://www.google.com”，然后点击添加
别忘了保存
在浏览器中打开“https://accounts.spotify.com/en/authorize?client_id=CLIENT_ID&response_type=token&redirect_uri=http://www.google.com”

CLIENT_ID 在 3.5 中提及。

redirect_uri 应该与您之前保存的重定向 URI 匹配。

用任意Spotify账号登录，点击AGREE按钮，浏览器会重定向你之前保存的带有access_token和token过期时间的url，比如'https://www.google.com/#access_token=CyOWA36wg&token_type=Bearer&expires_in=3600'

access_token 这里是你想要得到的。

您现在可以像“curl https://api.spotify.com/v1/albums/2Ti79nwTsont5ZHfdxIzAm?access_token=BQAyClDejfK”一样访问 Spotify api。
在 ngbook 音乐搜索示例中修改您的 SpotifyService，将“access_token”参数添加到每个 Spotify 查询。
如果access_token过期后出现401，需要再次重复第8步获取新的access_token，生产环境不推荐使用本教程。

（您可以复制第 8 步中提到的自己的 url 以进行重新认证）

【讨论】：