Azure OAuth2 因 Angular HashLocationStrategy 而失败

Question

这是的后续问题。

总结：

我想在 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 部分，并直接在基础 url 后面添加了 access_token 部分。重定向失败。

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

Answer 1

恐怕你是想把方钉子插进圆孔里！

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

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

我没有看到任何解决方法来帮助您实现您正在尝试的目标，恐怕您必须在 "URL rewriting capable" 网络服务器上托管该应用程序。

Answer 2

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

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

Answer 3

使用 &response_mode=query 而不是默认的片段 .

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...

Azure OAuth2 因 Angular HashLocationStrategy 而失败

Azure OAuth2 fails with Angular HashLocationStrategy

angular

oauth-2.0

azure-active-directory

azure-blob-storage

hash-location-strategy