javascripthtmlajaxxmlhttprequestspotify

How can I get an access token Spotify API?


I've been looking at the Spotify api for a few days now and example source code and I still can't figure out how to get an access token to access a user's playlist data. I've gotten to the point where I pull up the login window, the user logs in, and then I receive an authorization code. At this point, I tried doing things like:

window.open("https://accounts.spotify.com/api/token?
grant_type=authorization_code&code="+code+"&redirect_uri=myurl&client_id=3137b15
2f1424defa2c6020ae5c6d444&client_secret=mysecret");

and

$.ajax(
    {
      url: "https://accounts.spotify.com/api/token?grant_type=authorization_code&code="+code+"&redirect_uri=myurl&client_secret=mysecret&client_id=myid", 
      success: function(result){
        alert("foo");
      }
    }
);

But either way I get a result like:

{"error":"server_error","error_description":"Unexpected status: 405"}

instead of a token. I'm sure this is simple but I'm terrible at JS. Please help! Thank you!

(edit) I forgot to mention:

Link to api authentication guide: https://developer.spotify.com/web-api/authorization-guide/

I'm stuck on step 4. I see that there is an alternative method on sending a "header parameter" or cURL request which might work. But seing as how I have no idea how to do these things I've stuck with sending the client_id and client_secret as body request parameters like I did before for the user login/code.

PS: I'm only using this application I'm writing for myself. Is there a way I could hardcode a token in without going through this process instead?


Solution

  • When the authorization code has been received, you will need to exchange it with an access token by making a POST request to the Spotify Accounts service, this time to its /api/token endpoint:

    So you need to make a POST request to the Spotify API, with the parameters in the request body:

    $.ajax(
      {
        method: "POST",
        url: "https://accounts.spotify.com/api/token",
        data: {
          "grant_type":    "authorization_code",
          "code":          code,
          "redirect_uri":  myurl,
          "client_secret": mysecret,
          "client_id":     myid,
        },
        success: function(result) {
          // handle result...
        },
      }
    );
    

    (As a sidenote, "Unexpected status: 405" refers to the HTTP status code 405 Method Not Allowed, which indicates that the request method you tried—a GET request—is not allowed on that URL.)