Question

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

我正在执行来自Twitch的oauth流程，经过身份验证后，Twitch会通过http://localhost:3000/auth/twitch/之类的URL重定向回我的Next应用程序-它们在该重定向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: {},
  };
}

我正在尝试从重定向对象中获取queryparams（例如access_token），但是由于Twitch使用＃将其附加到我的重定向URL上，context内的任何内容似乎都无法检测到它。

我知道是否可以在浏览器中手动将#更改为?，然后context.query可以工作。问题是，我无法确定Twitch如何将其数据攻击到URL。

如何访问查询参数？

Answer 1

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

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

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

有关discussion here的更多信息

NextJS-在getServerSideProps中获取URL

1 个答案: