Как мне реализовать неявный поток OAuth в SPA?

Question

Мое веб-приложение настроено следующим образом:

• Сервер ресурсов с API-интерфейсами (использует Spring Security)
• Сервер авторизации (Spring Security OAuth), на котором размещена страница формы входа
• Клиент SPA (библиотека Angular 6 / routing / angular-oauth-oidc)
• Я использую неявный поток

Я пытаюсь найти лучший способ реализовать поток входа в систему. Как у меня сейчас, когда пользователь пытается получить доступ к защищенному маршруту и ​​не имеет токена, он перенаправляется в форму входа на сервер авторизации (через сторож). Если вход выполнен успешно, браузер перенаправляет обратно на защищенный маршрут углового приложения. Страж разрешает доступ, поскольку у пользователя теперь есть токен.

Проблема в том, что я пытаюсь понять, что мое угловое приложение дважды: один раз перед тем, как я вошел в систему, и снова после. Современные браузеры будут кешировать фактические ресурсы SPA (.js, .html, .css. И т. Д.), Чтобы не было другого попадания на сервер. Но приложения Angular загружаются не тривиально, и в этом процессе SPA загружается дважды.

Есть ли способ сделать это так, чтобы приложение Angular загружалось только один раз?

Answer 1

Вы можете использовать всплывающее окно, как предложил cgTag, но всплывающие окна проблематичны на небольших устройствах, и, по моему опыту, людям обычно они не нравятся даже на настольных компьютерах. Вы не можете использовать iframe, так как пользователь должен увидеть URL-адрес и сертификат сервера аутентификации.

Я думаю, что лучший способ решить эту проблему - это оптимизировать SPA для более быстрой загрузки. Вам все равно это нужно для загрузки первой страницы. Есть несколько способов ускорить загрузку - преждевременная компиляция (AOT), встряхивание дерева, отложенная загрузка, предварительный рендеринг на стороне сервера и так далее. Если вы используете Angular CLI , в него встроена поддержка некоторых из них, поэтому легко попробовать и посмотреть, принесут ли они какие-то улучшения.