Azure部署的Angular 14应用集成现有SAML身份验证方案咨询

推荐工具包 #

以下是适配Angular 14、适合Azure环境的SAML集成工具包：

• angular-auth-oidc-client：支持SAML与OIDC协议，社区活跃度高，适配Angular全版本，能快速对接各类SAML身份提供者（包括Azure AD）
• keycloak-angular：如果你的身份系统基于Keycloak SAML，这个官方包集成更便捷，自带路由守卫、用户信息管理等功能
• @okta/okta-angular：Okta官方提供的Angular集成包，若身份认证基于Okta SAML，这个是最优选择，文档完善，适配性强

代码实现片段（以angular-auth-oidc-client为例） #

1. 安装依赖 #

npm install angular-auth-oidc-client --save

2. 认证模块配置（app.module.ts） #

import { NgModule } from '@angular/core';
import { AuthModule, LogLevel } from 'angular-auth-oidc-client';

@NgModule({
  imports: [
    AuthModule.forRoot({
      config: {
        authority: '你的SAML身份提供者地址', // 例如Azure AD的SAML元数据端点或第三方IDP地址
        redirectUrl: window.location.origin,
        postLogoutRedirectUri: window.location.origin,
        clientId: '你的应用在IDP中注册的客户端ID',
        scope: 'openid profile email',
        responseType: 'id_token token',
        silentRenew: true,
        useRefreshToken: true,
        logLevel: LogLevel.Warn,
        // 针对SAML IDP的自定义请求参数（按需添加）
        customParamsAuthRequest: {
          acr_values: 'urn:oasis:names:tc:SAML:2.0:ac:classes:PasswordProtectedTransport'
        }
      }
    })
  ],
  exports: [AuthModule]
})
export class AuthConfigModule { }

3. 认证服务封装（auth.service.ts） #

import { Injectable } from '@angular/core';
import { OidcSecurityService } from 'angular-auth-oidc-client';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  constructor(private oidcSecurityService: OidcSecurityService) {}

  // 初始化认证状态，应用启动时调用
  initAuth(): Observable<boolean> {
    return this.oidcSecurityService.checkAuth();
  }

  // 触发登录跳转至SAML IDP页面
  login(): void {
    this.oidcSecurityService.authorize();
  }

  // 执行登出操作，清除会话并跳转回首页
  logout(): void {
    this.oidcSecurityService.logoff();
  }

  // 获取当前登录用户的信息
  getUserInfo(): Promise<any> {
    return this.oidcSecurityService.getUserData();
  }

  // 监听认证状态变化
  isAuthenticated(): Observable<boolean> {
    return this.oidcSecurityService.isAuthenticated$;
  }
}

4. 路由守卫实现（auth.guard.ts） #

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { map } from 'rxjs/operators';

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

  canActivate() {
    return this.authService.isAuthenticated().pipe(
      map(isAuth => {
        if (!isAuth) {
          this.authService.login();
          return false;
        }
        return true;
      })
    );
  }
}

5. 组件中使用示例（header.component.ts） #

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-header',
  template: `
    <div class="header-auth">
      <ng-container *ngIf="isAuthenticated$ | async">
        <span class="user-name">欢迎，{{ userInfo?.name }}</span>
        <button class="logout-btn" (click)="logout()">登出</button>
      </ng-container>
      <button *ngIf="!(isAuthenticated$ | async)" class="login-btn" (click)="login()">登录</button>
    </div>
  `
})
export class HeaderComponent implements OnInit {
  isAuthenticated$: Observable<boolean>;
  userInfo: any;

  constructor(private authService: AuthService) {}

  ngOnInit(): void {
    this.isAuthenticated$ = this.authService.isAuthenticated();
    this.authService.getUserInfo().then(info => {
      this.userInfo = info;
    });
  }

  login(): void {
    this.authService.login();
  }

  logout(): void {
    this.authService.logout();
  }
}

Azure部署关键注意事项 #

• 在Azure App Service的配置中，确保重定向URL已在SAML身份提供者的后台完成注册
• 若使用Azure AD作为SAML IDP，需在Azure门户中配置应用的SAML断言属性，匹配前端所需的用户字段（如姓名、邮箱）
• 强制开启Azure App Service的HTTPS访问，SAML协议要求加密传输，未开启HTTPS会导致认证失败

内容的提问来源于stack exchange，提问作者Riyaz Venur Yakub