使用 Auth0 和 Google 时，有没有办法将哈希值保留在 url 中？答案

【问题标题】：Is there a way to keep the hash in a url when using Auth0 and Google?使用 Auth0 和 Google 时，有没有办法将哈希值保留在 url 中？
【发布时间】：2020-12-08 18:07:06
【问题描述】：

我正在使用 Auth0 来保护网站。当我向某人发送 mywebsite.com/home#subtitle 之类的链接时，我希望他们登录，然后立即查看 #subtitle 部分（这只是纯 HTML：<a id="subtitle">Subtitle</a>）。

如果用户使用电子邮件地址和密码登录，这适用于 Auth0。但如果他们选择“Google”（目前我支持的唯一社交服务提供商），当他们从用户名转移到密码屏幕时，#subtitle 部分会丢失。

这是他们首先看到的（注意#subtitle 仍然存在于浏览器中）：

然后他们选择了谷歌并看到了这个：

好的，#subtitle 仍在浏览器中。现在他们输入他们的电子邮件地址并转换到密码屏幕：

#subtitle 已经消失，当它们继续时，它们最终被重定向到 https://mywebsite.com/home 而不是 https://mywebsite.com/home#subtitle。

有没有办法避免这种情况，或者这正是 Google 的工作方式？我无法在重定向之前捕获#subtitle，因为我正在重定向服务器端并且#subtitle 没有发送到服务器（据我所知）。

【问题讨论】：

标签： oauth oauth-2.0 google-oauth auth0

【解决方案1】：

哈希片段是一个客户端概念，您不能依赖服务器端技术来为您维护它们。使用服务器端 Web 技术的后果之一是您会遇到这种可用性问题：

服务器端安全性可能与尝试使用现代 Web 技术客户端发生冲突
会话突然到期和丢失数据/位置等方面的潜在问题
使用临时 cookie 的区域可能出现问题，例如登录后的返回导航

使用 OIDC 客户端库等客户端技术，您只需在登录前后编写几行代码，如 my code sample：

// Triggering a login redirect
const data = {
  hash: location.hash,
};
await this._userManager.signinRedirect({state: JSON.stringify(data)});

// Processing a login response
const user = await this._userManager.signinRedirectCallback();
const data = JSON.parse(user.state);
history.replaceState({}, document.title, data.hash);

使用服务器端技术可能仍然可以解决您的问题，但您需要构建代码以从 Javascript 启动登录。不过，此代码可能很棘手/复杂。

【讨论】：