Angular relogin вызывает непрерывное перенаправление в Firefox

Question

Я работаю над приложением Angular с базовым веб-сайтом ASP. NET для серверной части. Ie. на основе шаблона Angular. NET. Я также использую Auth0.

Поскольку я не хочу, чтобы Angular HTML / Javascript был доступен для всех, кто не вошел в систему, я добавил аутентификацию как для сервера - сторона и интерфейс.

Итак, из-за аутентификации на стороне сервера - как только вы посещаете страницу в первый раз, вы сразу же перенаправляетесь со стороны сервера на Auth0 для входа в систему, а затем вы перенаправляетесь вернуться на сайт. Это работает нормально.

После входа в систему (на стороне сервера) клиентская сторона выполняет следующие действия в конструкторе app.component.ts…

authService.isAuthenticated$.subscribe(value => {
    if (!value)
    authService.login()
})

Обратите внимание, что для клиента -side, я точно выполнил следующие инструкции: https://auth0.com/docs/quickstart/spa/angular2

Итак, authservice в моем примере выше, просто использует authservice с этой страницы быстрого запуска Auth0.

Идея приведенного выше фрагмента заключается в том, что если вы дойдете до этой точки, вы уже вошли в систему из-за перенаправления на стороне сервера, и указанный выше 'this.authService.login ()' будет вызываться только первым time и будет перенаправлен на auth0 и сразу же обратно, потому что вы уже вошли в систему провайдера идентификации auth0. Таким образом, это перенаправление на стороне клиента просто заполняет локальное хранилище браузера.

Это отлично работает в Chrome (хотя перенаправляет на auth0 на дополнительное время, чем я ожидал). Однако в Firefox это постоянно перенаправляет обратно на auth0, обратно на мой сайт, обратно на auth0, et c.

Я предполагаю, что я подхожу к этой проблеме совершенно неверным способом! Может ли кто-нибудь посоветовать лучший способ решения этой проблемы?

Я тоже пробовал сделать то же самое, но с использованием свойства authService.loggedIn. Но это затем постоянно перенаправляет в Chrome и Firefox!

Answer 1

Разобрался, как это сделать ...

this.authService.isAuthenticated$.subscribe(isAuthenticated => {
  if (isAuthenticated) {
    this.updateUserContextState()
  } else {
    if (window.location.search.includes('code=')) {
      // Because not authenticated, but code is in query string - wait for authService to redirect
      this.router.events.pipe(
        filter((e): e is NavigationEnd => e instanceof NavigationEnd)
      )
      .subscribe(x => {
        this.updateUserContextState()
      })
    } else {
      // Because not authenticated, and 'code' isn't in query string - start login. Because the
      // serverside MVC project has already done the Auth0 redirect, Auth0 should redirect straight
      // back to us with the code in the query string, then we'll hit the 'if' part of this 'else' statement.
      this.login()
    }
  }
})

Игнорировать вызов функции updateUserContextState. Это просто функция, которая получает некоторую информацию из моего API после входа пользователя в систему, чтобы определить, что должна отображать панель навигации. Я в основном хочу вызвать это при загрузке страницы, как только я знаю, что пользователь вошел в систему. Игнорируйте этот бит, однако - бит ключа описан ниже ... на мой сайт, я не был авторизован в тот момент (потому что code все еще находится в строке запроса, а библиотека Auth0 еще не обработала его). Итак, в новом фрагменте выше вы можете видеть, что я проверяю наличие code в строке запроса, а затем ожидаю, пока Auth0 выполнит локальное перенаправление (удаляя code из строки запроса). В этот момент я знаю, что пользователь вошел в систему, и Auth0 завершил обработку входа.

Answer 2

Вы можете проверить, разрешены ли сторонние файлы cookie в ваших браузерах, у меня в моем проекте было бесконечное перенаправление (с аутентификацией Auth0), потому что сторонние файлы cookie были заблокированы.