Spotify JWT 流程

Question

技术栈：NodeJS后端Angular10前端

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

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

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

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

选项 (1)

以某种方式使用 Iframe hack 在我的运行我的前端的另一个选项卡中设置存储项目；我不喜欢这个，因为它很老套，而且我觉得处理这个问题的方法不对。

选项(2)

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

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

所以这里总结了这个问题，我如何 return 将 JWT 发送给客户端而不做一些骇人听闻的事情？下面的代码 return 将此代码发送给客户端，但将我们带到上面的选项 (1)，显然 return 是一种模板样式，这是不受欢迎的，因为我有一个客户端呈现的应用程序！；我想要干净专业的东西，谢谢。

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.." });
        });
})

Answer 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** <- 这可以是你想要的！并且可以在你的回调中检索它 URL 像这样坐在你的 NodeJS 服务器上..

const spotifyCode: string = req.query.code; //智威汤逊 const 用户 ID：字符串 = req.query.state； // 你传入的值

Spotify JWT 流程

Spotify JWT Flow

node.js

jwt

spotify

websecurity