Angular приложение не может перенаправить после входа в OAuth2 при использовании HashLocationStrategy - PullRequest
Новая
       54

Angular приложение не может перенаправить после входа в OAuth2 при использовании HashLocationStrategy

2 голосов
/ 10 января 2020

Я работаю над существующим производственным приложением Angular 7. Моя задача - перейти от локальной схемы аутентификации к существующему провайдеру идентификации в масштабах всей компании. Поставщик удостоверений совместим с OAuth2. Я использую библиотеку oid c -client, чтобы попытаться выполнить sh this.

Приложение Angular использует HashLocationStrategy, и Я вполне уверен, что это требование не может измениться, Я не был первоначальным автором этого приложения, поэтому я не знаю точных причин для выбора HashLocationStrategy вместо стандартного PathLocationStrategy. Прямо сейчас, я бы не стал go спускаться по кроличьей норе, переходя на PathLocationStrategy. Я мог бы попросить больше проблем.

Поставщик удостоверений не разрешит использовать символ ha sh в URI перенаправления, как указано в OAuth 2.0 spe c здесь: https://tools.ietf.org/html/rfc6749#section -3.1.2 («URI конечной точки НЕ ДОЛЖЕН включать компонент фрагмента.»).

Для разработки я хочу, чтобы URI перенаправления после успешного входа в систему был "http://localhost: 8080 / # / dashboard", но из-за вышеуказанного ограничения я не могу этого сделать. Разработчики, которым принадлежит API провайдера идентификации, сказали мне кодировать символ ha sh в URI перенаправления, например: «http://localhost: 8080 /% 23 / dashboard ». Я пробовал это, но когда мое приложение сталкивается с перенаправлением, оно не декодирует его, и поэтому я получаю эту ошибку:

Cannot GET /% 23 / dashboard

URL перенаправления после входа в систему вернулся в приложение от взглядов поставщика удостоверений, как это:

1025 *http://localhost: 8080 /% 23 / приборная панель код = 7d25a8af920d219631a15019fc243ca2 и состояние = 9821f4153a1b45d3b6ed9a6813bd70c9 & session_state = 5c59c99f31156aa805b7267f82b0aa8e499d3f81cf5caab0335595c6e397bbf8.8_QJpOLj75eOfarD091Snw 1030 * Функция входа в систему моего authservice выглядит следующим образом, чтобы вызвать страницу входа в систему: 
  login() {
    const idSettings = {
      scope: 'openid',
      response_type: 'code',
      authority: this.baseUrl,
      client_id: this.clientId,
      redirect_uri: 'http://localhost:8080/%23/dashboard', // This is what the ID provider will allow.
    };
    this.userManager = new UserManager(idSettings); // oidc-client UserManager
    return this.userManager.signinRedirect();
  }

Мой вопрос: есть ли событие, которое я могу прослушать в приложении Angular для захвата и декодирования после URL перенаправления входа в систему перед попыткой направить туда? Если это так, я могу просто преобразовать% 23 в # и продолжить перенаправление.

Или, альтернативно, есть ли способ временно приостановить использование HashLocationStrategy для этого одного маршрута? Если бы это было возможно, я мог бы использовать «http://localhost: 8080 / панель инструментов » для моего URI перенаправления и все равно получить его для маршрутизации на правильный компонент.

У меня есть Я искал в Интернете, но до сих пор все Angular примеров, которые я видел, используют PathLocationStrategy вместо HashLocationStrategy.

Я также искал здесь и не обнаружил вопрос, точно такой же, как мой. Поэтому я не думаю, что это дублирующий вопрос.

Спасибо за любой совет.

ОБНОВЛЕНИЕ : Из-за того, что это стоит, я так и не смог решить эту проблему за исключением того, что приложение изменено с использования HashLocationStrategy на использование PathLocationStrategy. Итак, вот что я сделал. Я провел еще несколько исследований нашего управления исходным кодом и выяснил, кто и когда сделал изменение в HashLocationStrategy, и на основании этого я предполагаю, что первоначальный автор не осознавал, что для поддержки PathLocationStrategy необходима некоторая конфигурация на веб-сервере, и (надеюсь) это единственная причина, по которой он решил использовать HashLocationStrategy. Мы используем dev-сервер webpack для наших веб-серверов разработки (localhost), поэтому добавить «historyApiFallback: true» в файл webpack.config. js было достаточно просто для поддержки перезагрузки того же URL-адреса. Когда я получу доступ к нашим промежуточным и рабочим серверам, использующим nginx, я надеюсь внести аналогичные изменения в конфигурацию.

...