使用Auth0和Google时,是否可以将哈希保留在网址中?

问题描述

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

如果用户使用电子邮件地址和密码登录,则此方法可与Auth0一起使用。但是,如果他们选择“ Google”(目前是我唯一支持的社交服务提供商),那么当他们从用户名转移到密码屏幕时,#subtitle部分就会丢失。

这是他们首先看到的内容(注意#subtitle在浏览器中仍然存在):

Choosing login mechanism

然后他们选择Google并看到以下内容

Enter email

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

Enter password

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

是否有避免这种情况的方式,或者这仅仅是Google工作的方式吗?在重定向之前,我无法捕获#subtitle,因为我正在重定向服务器端,而#subtitle没有发送到服务器(据我所知)。

解决方法

哈希片段是一个客户端概念,您不能依靠服务器端技术来为您维护它们。使用服务器端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启动登录。但是,用于此的代码可能很棘手/很复杂。