从前端 JavaScript 代码获取 Spotify API 访问令牌
Posted
技术标签:
【中文标题】从前端 JavaScript 代码获取 Spotify API 访问令牌【英文标题】:Getting Spotify API access token from frontend JavaScript code 【发布时间】:2016-01-06 21:01:28 【问题描述】:我有一个网络应用程序,它允许人们生成与特定艺术家相关的艺术家的歌曲列表。我希望能够连接到用户的 Spotify 帐户并从该歌曲列表中为他们创建一个播放列表,但我需要获得一个访问令牌。我有一个开发者帐户和客户端 ID,并且正在尝试完成授权流程,但它对我不起作用。相反,我收到此错误: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
节点模块):
$('#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
节点模块,但我仍然遇到同样的错误。
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);
);
当我直接通过浏览器访问相关 URL 时,它会给我预期的“您是否授权此应用使用您的 Spotify 信息”表单。
我是否应该在 'scripts.js' 中要求 'cors' 才能工作?有人有其他建议吗?
【问题讨论】:
【参考方案1】:我认为这里的问题是您正在尝试从应该引导用户的端点检索 JSON 数据。因此,您应该在页面上提供一个链接到您的https://accounts.spotify.com/authorize/... URL 的按钮,而不是向它发出请求。用户将继续向您的应用程序授予您在scope
参数中指定的权限,并将被引导回您在redirect_uri
参数中指定的URL。这是您获取授权代码的地方,您可以在 https://accounts.spotify.com/api/token/... 端点中使用它。在Authorization Guide 中阅读有关授权码流程的更多信息。
Spotify Web API 支持三种不同的 oAuth 流程,您可能对Implicit Grant 感兴趣。 https://github.com/spotify/web-api-auth-examples 上提供了使用 Node 以 javascript 编写的所有这些流的示例。
【讨论】:
谢谢,这有助于解决这个问题。但是,在我授权该应用使用我的 Spotify 信息后,它会重定向到Cannot GET /callback?code=bunch of random letters and numbers I haven't seen before
,并且此处的任何 oAuth 流程或其他答案似乎都无法很好地解释该问题。我在开发人员设置中将localhost:3000/callback
(3000 是我的服务器端口)列为重定向。在用户点击链接后,我试图通过 getJSON
在不同的函数中检索访问令牌 & json
未定义,这可能是问题吗?
code
参数中的值称为授权码。您的应用程序可以通过向accounts.spotify.com/api/token 发送POST
请求来发送此代码,如developer.spotify.com/web-api/authorization-guide/… 的步骤4 中所述。 (您可能发送的是 GET
而不是 POST
。)确保您的本地 Web 服务器在端口 3000 上运行,以及您在“我的应用程序”中配置的重定向 URI @987654328 @ 也有 3000 端口。
我相信它正在执行 GET 请求而不是 POST...我如何确保不会发生这种情况?
jQuery 文档会有所帮助,api.jquery.com/jquery.post 或许。这是一个单独的问题,所以我认为它需要一个不同的 Stack Overflow 问题。
同意,所以我要关闭这个并接受你的回答——它帮助解决了我眼前的问题!以上是关于从前端 JavaScript 代码获取 Spotify API 访问令牌的主要内容,如果未能解决你的问题,请参考以下文章
golang 服务器上的 CORS 和 javascript 获取前端
前端技能树,面试复习第 52 天—— 手写代码:Javascript 基础考核