CODEWITHSUNDEEP
javascriptajaxcorsaccess-tokenspotify
meisam
meisam

Reputation: 485

Spotify application requests authorization

I am trying to get 'access token' from Spotify with the following code.

var encoded = btoa(client_id+':'+client_secret);
function myOnClick() {
   console.log('clikced!');
   $.ajax({
   url: 'https://accounts.spotify.com/api/token',
   type: 'POST',
   data: {
        grant_type : "client_credentials",
       'Content-Type' : 'application/x-www-form-urlencoded'
   },
   headers: {
       Authorization: 'Basic ' + encoded
   },
   dataType: 'json'
   }).always((data)=> console.log(data));
   }

However I keep getting errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://accounts.spotify.com/api/token.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

and

readyState: 0, status: 0

Upvotes: 4

Views: 2940

Answers (2)

Antoine Boucher
Antoine Boucher

Reputation: 85

const result = await axios({
  url: this.apiLoginUrl,
  method: 'post',
  data: "grant_type=client_credentials",
  headers: {
    'Authorization': `Basic ${Buffer.from(this.clientId + ":" + this.clientSecret).toString('base64')}`,
  },
});

Upvotes: 0

arirawr
arirawr

Reputation: 1275

Arielle from Spotify here.

Looks like you're using the Client Credentials Flow, which is one of 3 Authentication flows you can use with the Spotify API. (You can check out all 3 here)

Client Credentials is meant for server-side use only, and should not be used on the front-end, as it requires a client secret which you shouldn't be exposing!

You should use the Implicit Grant flow, which is made for use in the browser, instead. It's easy to get up and running, too!

// Get the hash of the url
const hash = window.location.hash
.substring(1)
.split('&')
.reduce(function (initial, item) {
  if (item) {
    var parts = item.split('=');
    initial[parts[0]] = decodeURIComponent(parts[1]);
  }
  return initial;
}, {});
window.location.hash = '';

// Set token
let _token = hash.access_token;

const authEndpoint = 'https://accounts.spotify.com/authorize';

// Replace with your app's client ID, redirect URI and desired scopes
const clientId = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const redirectUri = 'http://localhost:8888';
const scopes = [
  'user-read-birthdate',
  'user-read-email',
  'user-read-private'
];

// If there is no token, redirect to Spotify authorization
if (!_token) {
  window.location = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join('%20')}&response_type=token`;
}

Gist: https://gist.github.com/arirawr/f08a1e17db3a1f65ada2c17592757049

And here's an example on Glitch, that you can "Remix" to make a copy and start making your app: https://glitch.com/edit/#!/spotify-implicit-grant

Hope that helps - happy hacking! 👩🏼‍💻

Upvotes: 5

Related Questions