Angular App Hosting Azure存储容器-Azure身份验证回调和路由失败 [英] Angular App Hosting Azure Storage Container - Azure Authentication Callback and Routing fails

问题描述

我使用NgxAdmin开发了Angular 8应用程序，并将其托管为Azure Web App.它在NbAuthModule的帮助下使用Azure AD Oauth2身份验证.一切正常.现在，我尝试在Azure存储帐户上托管相同的SPA.我将新的回调URL添加到Azure广告应用程序注册中，并在NbOAuth2AuthStrategy.setup-method中更新了redirectUri.

I developed an Angular 8 App with NgxAdmin and hosted it as Azure Web App. It uses Azure AD Oauth2 Authentication with the help of NbAuthModule. Everything works fine. Now I tried to host the same SPA on an Azure Storage Account. I added the new callback url to the Azure Ad App Registration and updated the redirectUri in the NbOAuth2AuthStrategy.setup-method.

当我调用静态应用程序的基本URL( https://< projectname> .z6.web.core.windows.net )时，它会正确地重定向到 https://<项目名称> .z6.web.core.windows.net/auth/login?return =％2Fpages％2Fdashboard .我可以通过Azure广告登录.然后，URL更改为 https://< projectname> .z6.web.core.windows.net/auth/callback#access_token = eyJ0eXAiOiJKV1Q ... ，并且应该重定向到之前的版本定义的返回网址/pages/dashboard .但是我得到的只是回调链接上的404.

When I call the base url of the static app (https://<projectname>.z6.web.core.windows.net), it correctly redirects to https://<projectname>.z6.web.core.windows.net/auth/login?return=%2Fpages%2Fdashboard. I can login via Azure Ad. Then the url changes to https://<projectname>.z6.web.core.windows.net/auth/callback#access_token=eyJ0eXAiOiJKV1Q... and there should be a redirect to the previously defined return-url /pages/dashboard. But all I get is a 404 on the callback link.

此外，如果我尝试致电直接 https://< projectname> .z6.web.core.windows.net/auth/login ，它会返回404(如果我对Web应用程序执行相同操作，则登录组件为显示).

Additionally, if I try to call e.g. https://<projectname>.z6.web.core.windows.net/auth/login directly, it returns a 404 (if I do the same with the web app, the login component is displayed).

我做错了什么?我的Angular代码中是否需要进行其他更改以使路由在Azure存储帐户中运行?

What am I doing wrong? Are there additional changes to made in my Angular code to make the routing run in Azure Storage Account?

推荐答案

您似乎没有使用

It looks like you're not using the HashLocationStrategy, so the 404 is likely because the webserver doesn't have any folder/files in auth/callback. You have two options:

1. 配置您的网络服务器，使其在收到诸如 auth/callback
之类的子路由时重定向到 {root}/index.html
2. 使用HashLocationStrategy ，它将为您的路线添加#，例如:

1. Configure your webserver to redirect to {root}/index.html when it gets a sub route like auth/callback
2. Use the HashLocationStrategy, which will prefix your routes with #, for example:

https://<项目名称> .z6.web.core.windows.net/#/auth/callback?access_token = eyJ0eXAiOiJKV1Q

https://<项目名称> .z6.web.core.windows.net/#/auth/login?return =/#/pages/dashboard

以下是启用哈希定位策略的方法:

Here's how you can enable hash location strategy:

@NgModule({   
    imports: [
      /* more imports here */
      RouterModule.forRoot(routes, { useHash: true })
    ],   
    declarations: [
       /* components here */ 
    ],
    providers: [   
       /* services here */ 
    ],
    bootstrap: [ AppComponent ]
 }) 
 export class AppModule { }

这篇关于Angular App Hosting Azure存储容器-Azure身份验证回调和路由失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！