Ошибка Azure OAuth2 с Angular HashLocationStrategy

Question

Ошибка Azure OAuth2 с Angular HashLocationStrategy

Это следующий вопрос к контейнеру хранилища Azure для хостинга приложений Angular - сбой обратного вызова и маршрутизации для проверки подлинности 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...

Но вот что он делает:

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

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

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

1

angular oauth-2.0 azure-active-directory azure-blob-storage hash-location-strategy

Источник

user9888512 11 фев '20 в 11:29

3 ответа

Решение

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

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

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

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

1

Источник

user3738171 20 фев '20 в 23:38

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

https://docs.microsoft.com/en-us/azure/active-directory/azuread-dev/v1-protocols-openid-connect-code

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

0

Источник

user336378 24 фев '20 в 00:29

Другие вопросы по тегам angular oauth-2.0 azure-active-directory azure-blob-storage hash-location-strategy

user2307877 23 фев '20 в 22:31 2020-02-23 22:31 · Accepted Answer · 2020-02-23 22:31

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

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