如何使用Keycloak对接Angular自定义登录页实现认证与会话管理

为什么直接调用/token端点拿不到Cookie？ #

Keycloak默认登录流程依赖授权码流（Authorization Code Flow）生成KEYCLOAK_SESSION、KEYCLOAK_SESSION_LEGACY等会话Cookie，这些是Keycloak维护用户全局会话的核心标识。你直接用密码流（Resource Owner Password Credentials Flow）调用/token端点，Keycloak不会在浏览器中设置这些Cookie——因为密码流本来是为后端服务间调用设计的，并不适配浏览器端的会话管理需求。浏览器端必须采用授权码流+PKCE，才能让Keycloak正确设置会话Cookie，同时完成令牌的安全分发与管理。

完整集成流程 #

1. Keycloak端配置调整 #

• 进入ruconsole realm，找到你的Angular客户端，将Access Type设为public（单页应用无法安全存储客户端密钥）。
• 开启Standard Flow Enabled（授权码流），关闭Direct Access Grants Enabled（禁用密码流，避免误用）。
• 在Valid Redirect URIs中添加Angular应用地址，比如http://localhost:4200/*；Web Origins设为http://localhost:4200（允许跨域Cookie与请求）。
• 确认LDAP用户联邦配置已完成，能正常通过LDAP账号登录Keycloak。

2. Angular端核心实现 #

依赖安装

使用官方封装的Keycloak Angular库简化集成：

npm install keycloak-angular keycloak-js

初始化Keycloak服务

在app.module.ts中配置全局初始化逻辑：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8080',
        realm: 'ruconsole',
        clientId: '你的Angular客户端ID'
      },
      initOptions: {
        onLoad: 'check-sso', // 页面加载时自动检查用户登录状态
        silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html',
        loginRequiredRedirectUri: '/login' // 未登录时跳转到自定义登录页
      },
      enableBearerInterceptor: true, // 自动给API请求添加Authorization头
      bearerPrefix: 'Bearer'
    });
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, KeycloakAngularModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

创建silent-check-sso.html放在src/assets目录，用于静默会话检查：

<!DOCTYPE html>
<html>
<body>
  <script>
    parent.postMessage(location.href, location.origin);
  </script>
</body>
</html>

自定义登录页实现

1. 在路由中添加登录组件路由，比如{ path: 'login', component: LoginComponent }。
2. 登录组件逻辑（处理表单提交与Keycloak登录）：

import { Component } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  username: string = '';
  password: string = '';
  errorMsg: string = '';

  constructor(private keycloak: KeycloakService) {}

  async submitLogin() {
    try {
      // 通过授权码流提交登录信息，Keycloak自动处理Cookie与令牌
      await this.keycloak.login({
        username: this.username,
        password: this.password,
        redirectUri: window.location.origin
      });
    } catch (err) {
      this.errorMsg = '登录失败：用户名或密码错误';
      console.error(err);
    }
  }
}

登录页HTML示例：

<div class="login-box">
  <h3>系统登录</h3>
  <p class="error" *ngIf="errorMsg">{{ errorMsg }}</p>
  <form (ngSubmit)="submitLogin()">
    <div class="form-item">
      <label>用户名</label>
      <input type="text" [(ngModel)]="username" name="username" required>
    </div>
    <div class="form-item">
      <label>密码</label>
      <input type="password" [(ngModel)]="password" name="password" required>
    </div>
    <button type="submit">登录</button>
  </form>
</div>

3. 会话与令牌管理 #

• 令牌存储：Keycloak Angular默认将access_token、refresh_token、id_token存在sessionStorage中（关闭页面自动清除，安全性更高），也可配置为localStorage。
• 自动刷新令牌：库会自动监听令牌过期时间，调用Keycloak刷新端点获取新令牌，无需手动处理。
• 登录状态检查：通过this.keycloak.isLoggedIn()判断用户是否登录，this.keycloak.loadUserProfile()可获取用户信息（包括LDAP同步的属性）。
• 登出操作：调用this.keycloak.logout(window.location.origin)会清除Keycloak会话Cookie与本地令牌，完成全局登出：

async logout() {
  await this.keycloak.logout(window.location.origin);
}

4. 关键注意事项 #

• 必须使用授权码流+PKCE，禁止用密码流，否则无法生成Keycloak会话Cookie，也无法实现单点登出等功能。
• 生产环境必须启用HTTPS，避免令牌与Cookie被明文传输窃取。
• 跨域场景下，Keycloak的Web Origins必须包含Angular应用地址，否则Cookie无法正常设置。

内容的提问来源于stack exchange，提问作者Syed Abdul Hannan