Angular集成Keycloak与Azure时，能否跳过登录页并实现域名输入跳转？

1. 自定义Angular登录页面 #

先在Angular项目中创建自定义登录组件，替代默认的Keycloak登录页：

• 生成组件：ng generate component custom-login
• 在组件模板（custom-login.component.html）添加域名输入表单：

<div class="login-box">
  <h3>请输入公司域名</h3>
  <form (ngSubmit)="handleDomainSubmit()">
    <input 
      type="text" 
      [(ngModel)]="companyDomain" 
      name="domain" 
      placeholder="例如：xyz.com" 
      required
    >
    <button type="submit">前往登录</button>
  </form>
</div>

• 在组件类（custom-login.component.ts）中处理提交逻辑，根据域名映射Keycloak的Azure身份提供商，直接构造跳转链接：

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

@Component({
  selector: 'app-custom-login',
  templateUrl: './custom-login.component.html',
  styleUrls: ['./custom-login.component.css']
})
export class CustomLoginComponent {
  companyDomain: string = '';

  constructor(private keycloakService: KeycloakService) {}

  handleDomainSubmit() {
    const providerId = this.matchProviderByDomain(this.companyDomain);
    if (!providerId) {
      alert('该域名未配置登录渠道');
      return;
    }

    // 构造直接跳转Azure登录的Keycloak授权链接
    const redirectUri = window.location.origin + '/';
    const keycloakInstance = this.keycloakService.getKeycloakInstance();
    const loginUrl = `${keycloakInstance.authServerUrl}/realms/[你的Realm名称]/protocol/openid-connect/auth?client_id=[你的客户端ID]&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=openid&kc_idp_hint=${providerId}`;
    
    window.location.href = loginUrl;
  }

  private matchProviderByDomain(domain: string): string | null {
    // 这里维护域名与Keycloak中Azure身份提供商Alias的映射关系
    const domainProviderMap = {
      'xyz.com': 'microsoft-azure-main', // 替换为Keycloak里Azure提供商的实际Alias
      'abc.com': 'microsoft-azure-abc'
    };
    return domainProviderMap[domain.toLowerCase()] || null;
  }
}

2. 修改Keycloak初始化配置 #

调整Angular的Keycloak初始化参数，关闭自动跳转Keycloak登录页：

import { KeycloakService } from 'keycloak-angular';

export function keycloakInitializer(keycloak: KeycloakService) {
  return () => keycloak.init({
    config: {
      url: 'http://localhost:8080/auth',
      realm: '你的Realm名称',
      clientId: '你的客户端ID'
    },
    initOptions: {
      onLoad: 'check-sso', // 仅检查登录状态，不自动跳转Keycloak登录页
      silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html'
    },
    enableBearerInterceptor: true,
    bearerExcludedUrls: []
  });
}

3. 调整Angular路由与守卫 #

修改路由配置，将自定义登录页设为未登录用户的跳转目标：

import { Routes } from '@angular/router';
import { CustomLoginComponent } from './custom-login/custom-login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './auth.guard';

export const routes: Routes = [
  { path: '', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: CustomLoginComponent },
  { path: '**', redirectTo: '' }
];

• 更新AuthGuard逻辑，未登录时重定向到自定义登录页：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { KeycloakService } from 'keycloak-angular';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private keycloak: KeycloakService, private router: Router) {}

  async canActivate(): Promise<boolean> {
    const isLoggedIn = await this.keycloak.isLoggedIn();
    if (!isLoggedIn) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

4. Keycloak后台配置确认 #

• 进入Keycloak后台，找到对应Realm的「身份提供商」→「Microsoft」，记录该提供商的Alias（即前面代码中用到的providerId）
• 确保该Azure提供商的配置正确，通过kc_idp_hint参数可以直接触发跳转至Azure登录面板

完成以上配置后，用户访问localhost:4200会先看到自定义域名输入页，输入对应域名后直接跳转Microsoft Azure登录面板，完成凭据验证后自动返回Angular应用。

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