NextJS - 在 getServerSideProps 中获取 url

Question

我正在使用 nextJS，但很难从重定向中获取完整的 URL。

我正在从 Twitch 执行 oauth 流程，经过身份验证后，Twitch 会在 URL 上重定向回我的下一个应用程序，例如http://localhost:3000/auth/twitch/- 它们在该重定向 URL 上包含一堆额外数据，例如 http://localhost:3000/auth/twitch/callback#access_token=4kfdiopdsjendc539c9234&scope=user_read&token_type=bearer

/pages/auth/callback.js

export async function getServerSideProps(context) {
  console.log(context);
  return {
    props: {},
  };
}

我试图从重定向中获取查询参数（例如 access_token），但由于 Twitch 使用 # 将其附加到我的重定向网址上，因此内部context似乎没有检测到它。

我知道如果我手动将#浏览器中的 更改为?thencontext.query就可以了。问题是，我无法决定 Twitch 如何攻击他们的 URL 数据。

如何访问查询参数？

Answer 1

这是 Twitch（以及许多其他 OAuth 提供商）的一项安全功能。来自文档：

访问令牌位于 URL 片段中，而不是查询字符串中，因此它不会显示在发送到服务器的 HTTP 请求中。可以使用 document.location.hash 从 JavaScript 访问 URI 片段。

正如它所说，URL 片段不会发送到服务器，因此无法从getServerSideProps. 相反，您可以使用客户端回调之一，例如useEffect或componentDidMount。

更多讨论请看这里