Angular集成Shibboleth与ADFS认证后如何获取用户数据？

核心思路 #

ADFS登录成功后，Shibboleth会通过SAML断言把用户数据传递给前端，你可以在Angular的回调页面（也就是/home）直接捕获并解析这些数据，无需后端中转。

具体实现步骤 #

1. 捕获SAML响应数据

从ADFS跳转回/home时，Shibboleth通常会把SAML断言放在URL的SAMLResponse参数里，或者嵌入页面的隐藏DOM元素中。你可以在HomeComponent里读取这些数据：

import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  userInfo: any = {};

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 方式1：读取URL参数中的SAML响应
    this.route.queryParams.subscribe(params => {
      const samlResp = params['SAMLResponse'];
      if (samlResp) {
        const decodedAssertion = atob(samlResp);
        this.extractUserInfo(decodedAssertion);
      }
    });

    // 方式2：读取页面隐藏元素中的断言（部分Shibboleth部署会这么做）
    const assertionEl = document.getElementById('shibboleth-user-assertion');
    if (assertionEl?.textContent) {
      this.extractUserInfo(assertionEl.textContent);
    }
  }

  extractUserInfo(assertionXml: string): void {
    // 解析XML格式的SAML断言，提取用户属性
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(assertionXml, 'text/xml');
    
    // 示例：获取用户唯一标识、邮箱、姓名
    this.userInfo.userId = xmlDoc.querySelector('saml:NameID')?.textContent;
    this.userInfo.email = xmlDoc.querySelector('saml:Attribute[Name="mail"] saml:AttributeValue')?.textContent;
    this.userInfo.name = xmlDoc.querySelector('saml:Attribute[Name="displayName"] saml:AttributeValue')?.textContent;
    
    // 存储到本地，方便全局使用
    localStorage.setItem('loggedUser', JSON.stringify(this.userInfo));
  }
}

2. 配置Shibboleth传递用户属性

要确保Shibboleth的SP（服务提供者）配置里，已经把你需要的用户属性（比如邮箱、姓名、工号）从ADFS拉取并包含在SAML响应中：

• 修改Shibboleth的attribute-map.xml，映射ADFS返回的属性到SP的属性名；
• 在shibboleth2.xml的ApplicationDefaults节点中，添加attributePrefix="none"，避免属性名被前缀污染，方便前端解析。

3. 安全注意事项

• 解析XML时要做节点校验，只提取预期的属性，避免XML注入攻击；
• SAML断言的有效期较短，不要长期存储在localStorage，可以用sessionStorage或者Angular的BehaviorSubject管理会话；
• 确保Shibboleth的回调URL严格设置为你的Angular应用/home地址，防止非法回调。

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