Spotify 智威汤逊流答案

【问题标题】：Spotify JWT FlowSpotify 智威汤逊流
【发布时间】：2021-07-15 05:59:47
【问题描述】：

技术栈： NodeJS 后端 Angular10 前端

我正在将Spotify API 实现到我的应用程序中。我遇到了一些流程问题。

首先，我在验证或检索令牌时没有问题，但在弄清楚如何处理它时遇到了问题。假设我们了解 Spotify 流程并且在同一页面上，那么客户端呈现的应用程序会出现一个问题，那就是如何将我们的 JWT 放入存储中。

这是一个问题的原因是因为 Spotify 限制我们的流程，它需要一个回调，其中令牌作为查询参数传入。

这个回调在我的后端 NodeJS 服务器上，端点运行正常，但这个问题从这里开始 - 我无法传递我的 user_id 或任何其他用户信息，此时它只是返回一个 JWT，我唯一能做的就是发送客户端的模板，但它属于不同的域。

选项 (1)

不知何故，使用 iframe hack 在我运行前端的另一个选项卡中设置存储项；我不喜欢这个，因为它很老套，而且感觉不是处理这个问题的正确方法。

选项 (2)

执行某种 hack，将用户 ID 从初始请求映射并将正确的用户 ID 映射到正确的令牌，然后以某种方式将其发送到客户端（数据库然后 GET）我也不喜欢这样，它很hacky

我们不希望在前端保留客户端机密和其他凭据，就像我看到的一些示例一样，这对于个人资料来说很好，但由于非常明显的原因不适用于真正的应用程序。所有客户端机密和密码应该在后端永远不会只向客户端发送他们的用户 JWT

所以这里总结的问题，我如何将 JWT 返回给客户端而不做一些 hacky？下面的代码将其返回给客户端，但将我们带到上面的选项 (1) 并且显然返回了一个不受欢迎的模板样式，因为我有一个客户端呈现的应用程序！；我想要一些干净和专业的东西，谢谢。

router.get('/musicAuthCallback', function (req, res) {
    const spotifyCode: string = req.query.code;
    if (production.ROUTE_LOGGING) {
        routeLogger.info('Spotify endpoint callback hit');
    }
    const _spotifyService = new SpotifyService();
    _spotifyService.tradeSpotifyAuthToken(spotifyCode)
        .then((jwt: any) => {
            if (jwt === false) {
                res.send({ "message": "Unable to get JWT for Spotify", "status": REQUEST_FAILED, "title": "Authentication Error" });
            } else {
                const template = `<h1>  Success! </h1>  <script>
                var main=window.open("http://localhost:4200/");
                main.setItem('spotify_jwt', ${jwt});
              </script>`
                res.send(template)
            }
        })
        .catch((error) => {
            logger.error(error);
            res.send({ "message": "Something went really wrong..", "status": REQUEST_FAILED, "title": "Please Try Again.." });
        });
})

【问题讨论】：

标签： node.js jwt spotify websecurity

【解决方案1】：

这很愚蠢，但有点虚幻，直到您更多地浏览文档.. 文档没有让我清楚我可以使用“状态”作为查询参数.. 在这个我能够将用户 ID 传递到这里是 &state=600 并且这被传递到用户回调 URL 中，这使得可以将用户附加到 Spotify 给出的特定 JWT

https://accounts.spotify.com/authorize?client_id=5fe01282e94241328a84e7c5cc169164&redirect_uri=http:%2F%2Fexample.com%2Fcallback&scope=user-read-private%20user-read-email&response_type=token&**state=123**

const spotifyCode: string = req.query.code; // jwt 常量用户 ID：字符串 = req.query.state； // 你传入的值

【讨论】：