Azure Сбой OAuth2 с Angular HashLocationStrategy

Question

Это дополнительный вопрос к Angular Хостинг приложений Azure Контейнер хранения - Azure Сбой аутентификации Обратный вызов и маршрутизация .

Резюме:

Я хочу разместить свое приложение Angular 8 в учетной записи хранения Azure. Чтобы заставить работать маршрутизацию, мне пришлось включить 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...

Но то, что он делает, это this:

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

Он просто проглатывает часть URL обратного вызова и добавляет часть access_token непосредственно за базовым URL. Сбой перенаправления.

Есть ли способ заставить Azure OAuth2 работать с HashLocationStrategy?

Answer 1

Я не исследовал все аспекты вашего вопроса, и мне не нужно было использовать HashLocationStrategy, но в сегментах S3 мы указали пользовательскую страницу 404 для указания на индексный файл. html, аналогично предложению в Angular Развертывание документация для использования в stati c GitHub Pages.

В Azure Stati c хостинг веб-сайтов в Azure Хранилище страница, это означает, что можно указать пользовательскую страницу 404. Вы также можете попытаться указать файл index. html. Это эффективно «активирует» маршрутизатор Angular на хостинге без перезаписи URL - по крайней мере, это работало на хостинге сайтов S3 stati c.

Answer 2

Боюсь, вы пытаетесь поместить квадратный колышек в круглое отверстие!

Вы пытались использовать HashLocationStrategy, потому что вы не можете перенаправить Angular маршруты на index.html при использовании Azure Хранилище как веб-сервер.

Однако вы используете OAuth, который всегда предоставляет токен во фрагменте URL. Это должно держать access_token подальше от сервера приложений, так как браузер вообще не отправляет его после получения в перенаправлении от провайдера идентификации.

Я не вижу никакого обходного пути Я надеюсь, вам придется разместить приложение на веб-сервере с поддержкой перезаписи URL.

Answer 3

Использовать &response_mode=query вместо значения по умолчанию фрагмент .

https://docs.microsoft.com/en-us/azure/active-directory/azuread-dev/v1-protocols-openid-connect-code#send -вопрос-запрос

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