1

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

概括：

我想在 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 一起工作？

4

3 回答 3

2

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

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

于 2020-02-23T19:31:13.177 回答
1

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

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

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

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

于 2020-02-20T20:38:01.377 回答
0

使用&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...
于 2020-02-23T21:29:37.723 回答