Question

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 ERROR Responseheaders：Headers {_headers：Map（1），_ normalizedNames：Map（1）} ok：falsestatus：401statusText：“Unauthorized”type：2url：“https://api.spotify.com/v1/search?q=eminem&type=track”_ body：“{ ↵“错误”：{↵“status”：401，↵“message”：“没有提供令牌”↵}↵}“ proto ：Bodyconstructor：ƒResponse（responseOptions）toString：ƒ（）< strong> proto ：对象 defaultErrorLogger @ core.es5.js：1084

我是否认为这是因为我没有API密钥？这是本书直接提供的示例代码。如果我需要密钥，我将如何实现它？

Answer 1

来自Spotify documentation

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

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

Answer 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
单击刚刚创建的应用。

3.5您可以在左上角找到自己的CLIENT_ID，下一步将需要它。

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

在3.5中提到了

CLIENT_ID 。

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

使用任何Spotify帐户登录，单击“同意”按钮，浏览器将使用access_token和令牌到期时间重定向您之前保存的网址，例如“ 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，为每个Spotify查询添加“ access_token”参数。
如果您在access_token过期后退出401，则需要再次重复步骤8以获取新的access_token，在生产环境中不建议使用此教程。

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

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

2 个答案: