通过VPN远程访问本地服务器中采用Keycloak认证的应用的问题咨询

方案1：配置Keycloak动态地址识别（推荐） #

问题根因是当前Keycloak的跳转地址被硬编码为服务器本地IP，可通过动态适配访问源地址解决，步骤如下：

• 第一步：修改Angular应用的Keycloak初始化配置
  取消硬编码的认证服务地址，改为根据当前应用访问地址动态拼接Keycloak路径：

const keycloakConfig = {
  // 假设后续通过反向代理把Keycloak服务挂载到/auth路径
  url: `${window.location.origin}/auth`, 
  realm: "你的实际realm名称",
  clientId: "你的实际客户端ID"
}

• 第二步：服务器侧配置Nginx统一反向代理
  用Nginx做入口，按路径分流Angular应用和Keycloak请求，示例配置片段：

server {
  listen 80;
  server_name _; # 适配所有IP/域名访问
  # Angular应用路径
  location / {
    proxy_pass http://127.0.0.1:4200; # 替换为你的Angular应用实际运行端口
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
  # Keycloak服务路径
  location /auth/ {
    proxy_pass http://127.0.0.1:8080/; # 替换为你的Keycloak容器实际映射端口
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

• 第三步：修改Keycloak启动参数，开启代理地址自动识别
  启动Keycloak容器时添加对应环境变量，取消固定前端地址配置：

docker run -d -p 8080:8080 \
-e KEYCLOAK_PROXY_ADDRESS_FORWARDING=true \
-e KEYCLOAK_FRONTEND_URL=null \
quay.io/keycloak/keycloak:latest start

配置完成后，本地访问服务器本地IP时，Keycloak跳转地址自动适配为本地IP；远程通过VPN IP访问时，跳转地址自动适配为VPN IP，两边都可正常完成认证流程。

方案2：hosts绑定适配（临时方案） #

不想修改服务端配置可采用本方案，分别修改不同访问设备的hosts文件：

• 本地访问设备添加记录：服务器本地IP keycloak.internal
• 远程VPN访问设备添加记录：VPN分配的服务器IP keycloak.internal
  之后把Angular应用和Keycloak的前端地址统一配置为http://keycloak.internal/auth即可，缺点是每台访问设备都需要修改hosts配置。

方案3：多环境打包部署 #

如果上述方案都不适用，可给Angular应用打两套部署包：

• 本地访问包：Keycloak地址写死服务器本地IP，部署到根路径
• VPN访问包：Keycloak地址写死VPN分配IP，部署到/vpn子路径
  本地和远程用户分别访问对应路径即可，缺点是需要维护两套部署资源。

内容的提问来源于stack exchange，提问作者Medard