Передача токена аутентификации в заголовке при перенаправлении на новую страницу SPA

Question

Предположим, что:

       A -----------------------> B
(Sender website)          (Angular website)

Мы реализовали нормальный Angular SPA (B) , что его индекс. html и другие ресурсы просто размещены в IIS и есть простое правило перезаписи для обработки маршрутов в Angular. Пользователи в Angular должны войти в систему, и они получают токен JWT, который хранится в хранилище браузера.

Существует веб-сайт (A) , который хочет перенаправить пользователей на Angular веб-сайт, но мы хотим также передать токен JWT от A к B, потому что токены одинаковы, и мы хотим предотвратить повторный вход пользователя.

Веб-сайт A может отправить токен в сообщении заголовок request , в то время как перенаправляет на B. Проблема в том, что JS (Angular) не может напрямую получить параметры заголовка, потому что они отправляют в IIS.

Вопрос:

1. Есть ли способ в IIS, мы могли бы получить токен из запроса и установить его в атрибуте html при получении индекса. html? тогда JS может проверить его html элементов и найти токен.

2. Правильно ли приведенный выше метод? если нет, не могли бы вы дать свое предложение?

Answer 1

Мой мыслительный процесс заключается в том, чтобы перенаправить пользователя на страницу angular с параметром запроса или параметром маршрута. Это так же безопасно / ненадежно, так как любой может видеть значения заголовка (если вы беспокоитесь о том, чтобы показать свой JWT конечному пользователю.

Я бы заставил вашу страницу входа принять JWT (или любую вашу страницу, которая перенаправляется to is)

Итак, допустим, вы делаете https://myangularsite.com/login?jwt=JWTTOKEN

Затем на своей странице входа вы можете получить этот токен JWT с URL

const jwt = ActivatedRoute.snapshot.queryParamMap.get('jwt');

Теперь вы можете поместить это значение в localStorage:

localStorage.setItem('jwt', jwt);

Затем в Angular просто создайте HttpInterceptor который берет этот токен JWT из localStorage и применяет его к заголовку для каждого запроса:

const jwt = localStorage.getItem('jwt');
const request = req.clone({ withCredentials: true, headers: jwt });

Вы можете думать об этом так же, как когда вы подписываетесь на какую-то услугу, и они отправляют вам ссылка по электронной почте для подтверждения вашей электронной почты. Эта ссылка, по которой вы переходите, возвращает вас на их сайт с токеном подтверждения электронной почты. Когда вы заходите на этот сайт с помощью этого токена, он знает, кто вы из этого токена.

Пример: http://facebook.com/confirm?token=emailconfirmtoken