asp.net web api - Spotify Auth + frontend JavaScript + Client Credential Flow

Question

Using these information
https://developer.spotify.com/web-api/authorization-guide

I am trying to implement the 'Client Credentials Flow' to automate the authentication process. But somehow I got the error below.

XMLHttpRequest cannot load https://accounts.spotify.com/api/token?grant_type=client_credentials. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'websiteURL' is therefore not allowed access.

    $http.get('https://accounts.spotify.com/api/token?grant_type=client_credentials', {
        headers: {
            'Authorization': 'Basic ' + key)
        }
    }).success(function(r) {
        console.log('got access token', r);
    }).error(function(err) {
        console.log('failed to get access token', err); 
    });     

I have also tried it via Ajax / Jquery and other methods but still have this one 'Access-Control-Allow-Origin'.

I have read a lot of stuffs regarding this about CORS, Angular, Node, etc. And honestly I'm confused which of these should I use and I don't have an idea how to. Can someone simplify this for me please?

Answer 1

This is not the flow you're looking for - The Client Credential flow is meant for communication between servers.

Instead, have a look at the Authorization Code Flow, and why not Jose Perez's excellent JavaScript wrapper for front-ends working with Spotify's Web API.

This flow allows your application's users to authenticate and authorize your application to act on their behalf (e.g. add tracks to playlists, create playlists, and so forth). Access tokens retrieved using the Client Credentials flow isn't connected to a specific user, which limits what your application can do using it.