Angular 应用托管 Azure 存储容器 - Azure 身份验证回调和路由失败

Question

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

当我调用静态应用程序 (https://<projectname>.z6.web.core.windows.net) 的基础 url 时，它正确地重定向到 https://<projectname>.z6.web.core.windows.net/auth/login?return=%2Fpages%2Fdashboard。我可以通过 Azure Ad 登录。然后 url 更改为 https://<projectname>.z6.web.core.windows.net/auth/callback#access_token=eyJ0eXAiOiJKV1Q... 并且应该重定向到先前定义的 return-url /pages/dashboard。但我得到的只是回调 link.

的 404

另外，如果我试着打电话给https://<projectname>.z6.web.core.windows.net/auth/login 直接，它 return 是 404（如果我对 Web 应用程序执行相同操作，则会显示登录组件）。

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

Answer 1

您似乎没有使用 HashLocationStrategy，因此 404 可能是因为网络服务器在 auth/callback 中没有任何 folder/files。您有两个选择：

将您的网络服务器配置为在获得像 auth/callback

{root}/index.html

Use the HashLocationStrategy，这将为您的路线添加前缀 #，例如：

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

https://<projectname>.z6.web.core.windows.net/#/auth/login?return=/#/pages/dashboard

以下是启用哈希位置策略的方法：

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

Answer 2

在将 angular 应用程序部署到服务器时，您需要重写 URL 才能使用路由。我假设您使用的是 iis 服务器并将以下内容添加到 web.config

<system.webServer>
 <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Source

或者您可以添加 Hash Location 策略，这会在路由开始前生成一个 #（例如：https://sample.com/#/login）

在app.module.ts

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

导入后向提供程序添加以下行。

{provide: LocationStrategy, useClass: HashLocationStrategy}

例如：

providers: [AuthService, 
            AuthGuard, 
            FlxUiDataTable,
            {provide: LocationStrategy, useClass: HashLocationStrategy}]

Source

希望这对您有所帮助。谢谢

Angular 应用托管 Azure 存储容器 - Azure 身份验证回调和路由失败

Angular App Hosting Azure Storage Container - Azure Authentication Callback and Routing fails

azure

azure-storage-account

azure-authentication

angular