Пожалуйста, проверьте эту обновленную статью - в ней рассказывается о многих функциях, а также поддерживается NgRx и Angular 4/5.

Если вы читаете это, скорее всего, вы уже видели демонстрационное приложение от сообщества keycloack (Демо-приложение Keycloak Angular2) и JS-приложение keycloak (Keycloak Javascript - Github), которое обеспечивает базовую функциональность для входа в систему через keycloak. Проблема с этим приложением заключается в том, что вам нужно войти в keycloak, прежде чем вы сможете получить доступ к своему приложению angular 2.

Как видно из приведенного выше примера, пользователи должны пройти аутентификацию против keycloak, прежде чем даже инициализировать приложение angular 2. Я думаю, что это не лучший способ инициализации приложения angular 2. Это создает зависимость / тесную связь между Angular 2 и Keycloak.

Это также создало бы проблемы с

  1. Тестирование - тестирование приложения Angular 2 за пределами keycloak невозможно. Конечно, я мог бы закомментировать код, который инициализирует keycloak для тестирования и снова включить его, но тогда он не так элегантен, и это также приводит ко второй проблеме.
  2. Приложение со смешанным содержимым - что делать, если у меня есть несколько страниц, к которым можно получить свободный доступ без входа в систему, и после входа в систему требуется доступ только к определенным функциям.

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

Шаг 1. Сначала давайте вернем Angular 2 под контроль.

Теперь этот плащ убран с дороги, он выглядит намного лучше! Давайте изменим keycloak.js, чтобы добавить новые функции. keycloak.js имеет много неявных вызовов функций, что создает проблемы для нашего варианта использования. Давайте сделаем их явными.

Шаг 2. Основное изменение коснется function setupCheckLoginIframe()

Здесь мы переместили неявную интервальную проверку check = function(){...} в явную функцию checkLogin(), а начальная setTimeout(check, loginIframe.interval * 1000); удалена. Также в messageCallback function promise.setSuccess теперь возвращает логическое значение со статусом входа в систему. Мы используем это значение позже, чтобы правильно инициализировать объект keycloak.

Шаг 3. После внесения вышеуказанных изменений давайте добавим немного новых функций в keycloak. Мы добавим 3 новые функции

kc.isLoggedIn - проверяет вход при инициализации приложения angular (либо через authguard, либо на странице входа. Это также полностью зависит от вас, как вы хотите его реализовать).

kc.watchLogin - Если пользователь успешно вошел в систему, мы добавляем интервальное наблюдение, чтобы каждые несколько секунд пользователь аутентифицировался.

function checkIsLoggedIn - содержит логин для обработки логина. Это модифицированная версия (я знаю СУХОЙ и т. Д., Сохранил ее на потом) function processInit.

Шаг 4: Теперь вы почти закончили. Итак, давайте посмотрим, как теперь на странице angular может использоваться вход по запросу. создать папку login и создать обычный login.component.ts | html | css. Я не буду здесь вдаваться в подробности. Создайте кнопку для входа в систему. Создайте login.service.ts, который выполняет фактическую операцию. Также давайте преобразуем ответ keycloak в наблюдаемое.

Вот и все, теперь у вас есть приложение angular 2 со входом в систему по требованию с помощью keycloak. Позже я опубликую полную демонстрацию приложения в моем Github и свяжу его с этим постом. Так что следите за ним, если он вам нужен;).