Spotify 网络 API 授权答案

【问题标题】：Spotify web API authorizationSpotify 网络 API 授权
【发布时间】：2017-12-29 10:25:37
【问题描述】：

我正在尝试根据以下方式授权 Spotify Web API： https://developer.spotify.com/web-api/authorization-guide/

但是，我收到以下错误：

search.component.ts (18,5)：提供的参数与调用目标的任何签名都不匹配

这是我的 search.component 文件：

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SpotifyService {
  private searchUrl: string;
  private redirect_uri:string;
  private client_id ='f716e056b5944d9bba2340802a7f88be';
  private client_secret = 'acac31590ceb4da38a123253a8c87cc9';
  private access_token:string;
  private encoded = btoa(this.client_id + ':' + this.client_secret);


  constructor(private http: Http) { }

  getToken(){
    let params = ('grant_type=client_credentials');
    let headers = new Headers();
    headers.append( 'Authorization', 'Basic ' + this.encoded);
    headers.append('Content-Type' , 'application/x-www-form-urlencoded');
    return this.http.post('https://accounts.spotify.com/api/token', params , {headers : headers})
        .map(res=> res.json());
  }

  searchMusic(str: string, type = "artist", token: string){
    this.searchUrl = 'https://api.spotify.com/v1/search?query=' + str + '&offset=0&limit=20&type=' + type + '&market=US';
    let headers = new Headers();
    headers.append('Authorization' , 'Bearer ' + token);
    return this.http.get(this.searchUrl, {headers: headers})
      .map((res: Response) => res.json());
  }

}

提前谢谢你们。

【问题讨论】：

第 18 行有一个明显的问题需要修复。
对于不清楚的问题，我深表歉意。我只是想问一下我的 Spotify Web API 授权解决方案是否正确。你怎么看？
最好在这里问：Code Review Stack Exchange

标签： angular-cli spotify-app

【解决方案1】：

我花了一些时间研究如何有效地生成 Spotify 令牌，所以这是我的解决方案：

 getToken(){
        let params = ('grant_type=client_credentials');
        let client_id = 'CLIENT_ID'; // Your client id
        let client_secret = 'CLIENT_SECRET'; // Your secret
        let encoded = btoa(client_id + ':' + client_secret);
        let headers = new Headers();
        headers.append( 'Authorization', 'Basic ' + encoded);
        headers.append('Content-Type' , 'application/x-www-form-urlencoded');
        let proxy = 'https://cors-anywhere.herokuapp.com/';
        let uurl = 'https://accounts.spotify.com/api/token';

        return this.http.post(proxy + uurl, params , {headers : headers})
            .map(res=> {
                let data = res.json()
                 return data;
            });
    }

上面的代码会导致：

access_token: "BQDicb7m3tP19xehFdU_MJgN4sw-X0ZSa_p9vX6tp_xCILKSLOJMkwwZfyBI6IoMuR6luhpQKh9IduQaTeg"
expires_in: 3600
scope: ""
token_type: "Bearer"

您现在可以使用 access_token。为了避免 cors 安全，我根据谷歌搜索结果使用了“https://cors-anywhere.herokuapp.com/”。非常感谢 Rob--W/cors-anywhere。

【讨论】：

【解决方案2】：

您的服务职能：

clientId = 'yours';
clientSecret = 'yours';
login() {
    const authorizationTokenUrl = `https://accounts.spotify.com/api/token`;
    const body = 'grant_type=client_credentials';
    return this.http.post(authorizationTokenUrl, body, {
        headers: new HttpHeaders({
            Authorization:
                'Basic  ' + btoa(this.clientId + ':' + this.clientSecret),
            'Content-Type': 'application/x-www-form-urlencoded;',
        }),
    });
}

然后您可以从服务中调用该函数，例如：

this.authService.login().subscribe(data => {
        this.accessToken = data['access_token'];
        this.tokenType = data['token_type'];
    });

注意：这不是干净的代码，而是快速简单的代码。

【讨论】：

【解决方案3】：

您应该从 getToken() 中提取 'token' 以便稍后在 searchMusic() 中使用它。

【讨论】：