Spotify web API authorization

Question

I'm trying to authorize Spotify web API according to this: https://developer.spotify.com/web-api/authorization-guide/

However, I got the following error:

search.component.ts (18,5): Supplied parameters do not match any signature of call target

This is my search.component file:

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());
  }

}

Thank you guys in advance.

I'm sorry for unclear question. I just wanted to ask whether my solution for Spotify Web API authorization is in the correct way or not. What do you think of it? — Hoàng Nguyễn, Jul 25 '17 at 21:55
That might be best asked here: [Code Review Stack Exchange](https://codereview.stackexchange.com/) — R. Richards, Jul 25 '17 at 22:39

score 3 · Answer 1 · edited Sep 30 '18 at 14:11

I spend some time researching on how to effectively generate Spotify token so this was my solution:

 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;
            });
    }

The above code will result in:

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

You can now use access_token. In order to avoid cors security, I've used 'https://cors-anywhere.herokuapp.com/' based on the google search results. big thanks to Rob--W/cors-anywhere.

score 3 · Answer 2 · answered May 05 '20 at 14:49

your function in service :

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;',
        }),
    });
}

Then you can call the function from service like :

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

Note : it's not clean code, but quick simple one.

score 0 · Answer 3 · answered Jan 04 '18 at 22:03

0

you should extract 'token' from getToken() to use it later in searchMusic().

answered Jan 04 '18 at 22:03

meisam

465
6
18

Spotify web API authorization

3 Answers3