Azure OAuth2 因 Angular HashLocationStrategy 失败

Question

这是Angular App Hosting Azure Storage Container - Azure Authentication Callback and Routing fails 的后续问题。

总结：

我想在 Azure 存储帐户上托管我的 Angular 8 应用程序。为了使路由工作，我必须打开 HashLocationStrategy。这个策略在路由前加上这样的标签：https://<projectname>.z6.web.core.windows.net/#/auth/login

路由现在可以正常工作，但 Azure OAuth2 进程也使用井号标签将访问令牌信息添加到基本 URL：<baseurl>/<callbackurl>#access_token=eyJ0eXAiOiJKV1Q...。 不使用 HashLocationStrategy 的路由是这样的（回调路由是/auth/callback）：

https://<projectname>.z6.web.core.windows.net/auth/callback#access_token=eyJ0eXAiOiJKV1Q...

使用 HashLocationStrategy 应该是这样的：

https://<projectname>.z6.web.core.windows.net/#/auth/callback#access_token=eyJ0eXAiOiJKV1Q...

但它的作用是这样的：

https://<projectname>.z6.web.core.windows.net/#access_token=eyJ0eXAiOiJKV1Q...

它只是吞下回调 url 部分并将 access_token 部分直接添加到基本 url 后面。重定向失败。

有没有办法让 Azure OAuth2 与 HashLocationStrategy 一起工作？

Answer 1

我没有调查您问题的所有方面，也不需要利用 HashLocationStrategy，但在 S3 存储桶上，我们已指定自定义 404 页面指向 index.html 文件，类似于 Angular 中的建议Deployment 用于静态 GitHub 页面的文档。

在Azure的Static website hosting in Azure Storage页面中，表示可以指定自定义404页面。您也可以尝试指定 index.html 文件。这有效地“激活”了非 URL 可重写托管上的 Angular 路由器 - 至少这在 S3 静态站点托管上有效。

Answer 2

使用 &response_mode=query 代替默认的 fragment。

https://docs.microsoft.com/en-us/azure/active-directory/azuread-dev/v1-protocols-openid-connect-code#send-the-sign-in-request

GET https://login.microsoftonline.com/{tenant}/oauth2/authorize?
client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&response_type=id_token
&redirect_uri=https://<projectname>.z6.web.core.windows.net/auth/callback // escape this..
&response_mode=query
&scope=openid
&state=12345
&nonce=7362CAEA-9CA5-4B43-9BA3-34D7C303EBA7

您的回复现在应该如下所示：

https://<projectname>.z6.web.core.windows.net/auth/callback?access_token=eyJ0eXAiOiJKV1Q...

Answer 3

恐怕你想把方形钉子放在圆孔里！

您尝试使用 HashLocationStrategy，因为在将 Azure 存储用作 Web 服务器时，您无法将 Angular 路由重定向到 index.html。

但是，您使用的是 OAuth，它始终在 URL 片段中提供令牌。这是为了使access_token 远离应用服务器，因为浏览器在从身份提供者的重定向中接收到它之后根本不发送它。

我没有看到任何解决方法可以帮助您实现您的目标，恐怕您必须将应用程序托管在“支持 URL 重写”的网络服务器上。