NextJS - 在 getServerSideProps 中获取 url

Question

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

我正在从 Twitch 执行 oauth 流程，经过身份验证后，Twitch 在 URL 上重定向回我的 Next 应用程序，例如 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 使用 # 将其附加到我的重定向 url 中，context 中没有任何内容似乎检测到了。

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

如何访问查询参数？

Answer 1

这是 Twitch（以及许多其他 OAuth 提供商）的安全功能。来自 docs:

The access token is in the URL fragment, not the query string, so it will not show up in HTTP requests to your server. URI fragments can be accessed from JavaScript with document.location.hash.

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

更多关于discussion here

NextJS - 在 getServerSideProps 中获取 url

NextJS - get url in getServerSideProps

next.js

twitch