从前端JavaScript代码获取Spotify API访问令牌 [英] Getting Spotify API access token from frontend JavaScript code

问题描述

我有一个网络应用程序，允许人们生成与特定艺术家相关的艺术家的歌曲列表。我希望能够连接到用户的Spotify帐户，并从该歌曲列表中为他们创建一个播放列表，但是我需要获取访问令牌。我有一个开发人员帐户和一个客户ID，并且正在尝试完成授权流程，但对我来说不起作用。相反，我收到此错误： XMLHttpRequest无法加载https://accounts.spotify.com/authorize/?client_id=d137fe25b31c4f3ba9e29d85f…:3000/callback&scope=user-read-private%20user-read- email& state = 34fFs29kd09。所请求的资源上没有 Access-Control-Allow-Origin标头。因此，不允许访问源'http：// localhost：3000'。

I have a web app that allows people to generate a list of songs by artists that are related to a particular artist. I want to be able to connect to the user's Spotify account and create a playlist for them from that list of songs, but I need to get an access token. I have a developer account and client ID and am trying to work through the Authorization Flow, but it's not working for me. Instead, I get this error: XMLHttpRequest cannot load https://accounts.spotify.com/authorize/?client_id=d137fe25b31c4f3ba9e29d85f…:3000/callback&scope=user-read-private%20user-read-email&state=34fFs29kd09. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

这是我的一部分scripts.js 文件（我正在使用 spotify-web-api-js 节点模块）：

This is a portion of my scripts.js file (i'm using the spotify-web-api-js node module):

$('#spotify').on('click', function() {
    $.support.cors = true;
    $.getJSON("https://accounts.spotify.com/authorize/?client_id=d137fe25b31c4f3ba9e29d85f4e47c66&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&scope=user-read-private%20user-read-email&state=34fFs29kd09", function(json2){
    $.getJSON("https://accounts.spotify.com/api/token/?grant_type=authorization_code&code=" + json2.code + "&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fcallback&client_id=d137fe25b31c4f3ba9e29d85f4e47c66&client_secret={...}", function(json3) {
      s.setAccessToken(json3.access_token);
      });
    });
  });
});

根据我的研究，这是一个与CORS相关的问题。我正在对ExpressJS服务器进行编辑以解决此跨域问题，并安装了 cors 节点模块，但仍然出现相同的错误。

According to my research, it's a CORS-related issue. I'm making edits to my ExpressJS server to remedy this cross-origin problem and installed the cors node module, but I'm still getting the same error.

index.js 服务器：

var express = require('express');
var cors = require('cors');
var app = express();
var port = 3000;

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});


 app.use(express.static(__dirname + '/public')); // looks in public directory, not root directory (protects files)

 app.get('/', function(req, res) {
     res.send(__dirname + '\\index.html')
});

app.listen(port, function() {
          console.log('CORS-enabled web server listening on port ' + port);
});

当我直接通过浏览器访问相关网址时，它给了我预期的授权此应用使用您的Spotify信息表格。

When I go to the URL in question directly through my browser, it gives me the expected "Do you authorize this app to use your Spotify information" form.

我需要在 scripts.js中使用 cors才能正常工作吗？有人有其他建议吗？

Should I require 'cors' in 'scripts.js' for it to work? Does anyone have any other suggestions?

推荐答案

我相信这里的问题是您正在尝试从端点检索JSON数据。您应该在哪里指导用户。因此，您无需在页面上提出请求，而应在页面上提供一个链接到您的 https：// accounts的按钮.spotify.com / authorize / {...} URL。用户将继续按照 scope 参数中的指定为您的应用程序授予您所请求的权限，并将其重定向回您在<$中指定的URL。 c $ c> redirect_uri 参数。这是您获得授权码的地方，您可以在 https://accounts.spotify.com中使用该授权码。 / api / token / {...}端点。在授权指南。

I believe the issue here is that you're attempting to retrieve JSON data from the endpoint where you should direct your users. So instead of making a request to it, you should supply a button on your page that links to your https://accounts.spotify.com/authorize/{...} URL. The user will proceed to give your application the permissions you've requested as specified in the scope parameter, and will be directed back to the URL you've specified in the redirect_uri parameter. This is where you get the authorization code, which you can use in the https://accounts.spotify.com/api/token/{...} endpoint. Read more about the Authorization Code flow in the Authorization Guide.

Spotify Web API支持三种不同的oAuth流，您可能对隐式授予。使用Node用Javascript编写的所有这些流的示例可在 https://github.com上获得。 / spotify / web-api-auth-examples 。

Spotify Web API support three different oAuth flows, and you might be interested in Implicit Grant. Examples of all of these flows written in Javascript using Node is available at https://github.com/spotify/web-api-auth-examples.

这篇关于从前端JavaScript代码获取Spotify API访问令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！