Контейнер хранилища Azure для хостинга приложений Angular - сбой обратного вызова и маршрутизации для проверки подлинности Azure

Я разработал приложение Angular 8 с NgxAdmin и разместил его как веб-приложение Azure. Он использует аутентификацию Azure AD Oauth2 с помощью NbAuthModule. Все нормально работает. Теперь я попытался разместить тот же SPA в учетной записи хранения Azure. Я добавил новый URL-адрес обратного вызова в регистрацию приложения для рекламы Azure и обновил redirectUri в методе NbOAuth2AuthStrategy.setup.

Когда я вызываю базовый URL-адрес статического приложения (https://<projectname>.z6.web.core.windows.net), он правильно перенаправляет на 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... и должно быть перенаправление на ранее определенный URL-адрес возврата /pages/dashboard. Но все, что я получаю, это 404 по ссылке обратного вызова.

Кроме того, если я попытаюсь позвонить, например, https://<projectname>.z6.web.core.windows.net/auth/login напрямую, он возвращает 404 (если я сделаю то же самое с веб-приложением, отобразится компонент входа в систему).

Что я делаю неправильно? Внесены ли в мой код Angular дополнительные изменения, чтобы маршрутизация выполнялась в учетной записи хранения Azure?

Источник

2 ответа

Решение

Похоже, вы не используете HashLocationStrategy, поэтому ошибка 404, вероятно, связана с тем, что на веб-сервере нет папок / файлов вauth/callback. У вас есть два варианта:

  1. Настройте свой веб-сервер для перенаправления на {root}/index.html когда он получает дополнительный маршрут, например auth/callback
  2. Используйте 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 { }
Источник

Вам необходимо переписать URL-адреса, чтобы использовать маршруты при развертывании приложений angular на сервере. Я предполагаю, что вы используете сервер 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>

Источник

Или вы можете добавить стратегию Hash Location, которая дает # перед началом маршрута (например: https://sample.com/)

В app.module.ts

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

После импорта добавьте в провайдеров следующую строку.

{provide: LocationStrategy, useClass: HashLocationStrategy}

пример:

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

Источник

Надеюсь, это помогло. Спасибо

Источник
Другие вопросы по тегам