Защита приложения на Angular/C# с помощью Keycloak и Nginx

Вопрос или проблема

+----------------------+
| (Angular)app/browser |
+----------------------+
           |
         https
           |
   +------------------+
   |    mydomain.net  |
   |      NGINX       |
   |    10.9.8.1      |<------ http -----+
   +------------------+                  |
                                         |
   +---------------+                     |
   |   Keycloak    |<-- аутентификация --+
   +---------------+                     |
           ^                             |
           |                             |
     авторизация                         |
           |                             |
           +------------- Запросы ------+---------------+
           |                 |                           |
           v                 v                           v
   +----------------+  +--------------------+  +--------------------+
   |   C# SignalR   |  |  C# веб-сервисы    |  |      Angular       |
   +----------------+  +--------------------+  +--------------------+

# Прокси для сервера аутентификации (публичный)
location /auth/ {
    proxy_pass http://127.0.0.1:5006/auth/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

# Прокси для административного интерфейса
location /admin/ {
    allow 10.9.8.0/24;
    allow 127.0.0.1;
    deny all;

    proxy_pass http://127.0.0.1:5007/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_buffering off;   # Обеспечить оперативные ответы от Keycloak
}

feature=hostname:v1

# Конфигурация для сервера аутентификации (публичный)
http-enabled=true
http-host=127.0.0.1
http-port=5006

# Конфигурация для административного интерфейса
http-management-port=5007

# Настройки имени хоста
hostname=example.com
hostname-url=https://example.com/auth
hostname-admin-url=https://example.com/admin

Ответ или решение

Для решения вашей проблемы с настройкой приложения Angular и C# с использованием Keycloak и NGINX, давайте рассмотрим несколько возможных причин возникновения описанных вами проблем, а также предложим пути их решения.

1. Настройка NGINX

Ваши правила в конфигурации NGINX выглядят в целом корректными, но давайте убедимся, что пути соответствуют тому, как настроен Keycloak. Ваша конфигурация для Keycloak должна точно соответствовать ожидаемым путям.

Правила для аутентификации (Public)

# Proxy для сервера аутентификации (публичный)
location /auth/ {
    proxy_pass http://127.0.0.1:5006/auth/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Здесь у вас всё верно. Убедитесь, что Keycloak действительно отвечает по этому адресу.

Правила для админ интерфейса

# Proxy для административного интерфейса
location /admin/ {
    allow 10.9.8.0/24;
    allow 127.0.0.1;
    deny all;

    proxy_pass http://127.0.0.1:5007/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_buffering off;   # Убедитесь, что ответы от Keycloak возвращаются быстро
}

Обратите внимание на установку правил доступа. Они выглядят корректно и должны работать, если доступ к серверу производится из указанных диапазонов.

2. Настройка Keycloak

Ваши настройки Keycloak также выглядят верно, важно удостовериться, что они действительно активны.

http-enabled=true
http-host=127.0.0.1
http-port=5006

http-management-port=5007

hostname=example.com
hostname-url=https://example.com/auth
hostname-admin-url=https://example.com/admin

Убедитесь, что http-management-port действительно настроен на 5007, и ваш интерфейс управления Keycloak доступен на этом порту.

3. Проверка логов

Поскольку вы не видите ошибок в логах NGINX, попробуйте проверить логи самого Keycloak. Это поможет понять, обрабатываются ли запросы должным образом. Логи Keycloak обычно находятся в /opt/jboss/keycloak/standalone/log/server.log.

4. Page not found

Ошибка 404 на странице https://example.com/auth/ может указывать на то, что NGINX не может найти соответствующий маршрут в Keycloak или что Keycloak не настроен для обработки этого конкретного URL.

Убедитесь, что вы используете правильный базовый URL для Keycloak и что он соответствует URL, который вы указали в вашем фронтенд-приложении Angular.

Также проверьте, сохранены ли необходимые сущности (например, Realm, Client) в Keycloak, что может быть причиной возникновения проблем при обращении к ресурсу.

5. Проверка конфигурации клиента

Если ваш Angular-приложение использует Keycloak JavaScript адаптер, убедитесь, что настройки клиента совпадают с тем, что определено в ключах конфигурации Keycloak:

• Проверьте, что указаны правильные значения auth-server-url, realm и clientId.

6. Итог

• Проверьте доступность Keycloak на http://127.0.0.1:5006/auth/ и http://127.0.0.1:5007/.
• Убедитесь, что все необходимые настройки в Keycloak и NGINX корректны.
• Изучите логи как NGINX, так и Keycloak для дополнительной информации о состоянии и ошибках.
• Проверьте настройки клиента Angular, чтобы убедиться, что они соответствуют конфигурации Keycloak.

Если после всех этих шагов проблема не решена, возможно, стоит рассмотреть возможность использования Keycloak Pro для большей поддержки и функционала, но это должно быть последним шагом, учитывая, что ключевые функции уже доступны в Open Source версии.