如何在Angular应用中通过MSAL获取Entra ID登录日志并展示？

核心思路 #

通过Microsoft Graph API的/auditLogs/signIns端点获取登录日志，结合MSAL Angular完成身份认证与权限校验，最终在前端展示日志数据。

步骤1：配置Entra ID应用权限 #

• 登录Entra ID门户，找到你的应用注册
• 进入「API权限」页面，点击「添加权限」→ 选择「Microsoft Graph」
• 若允许管理员用户以自身权限查看日志，选择委托权限，搜索并添加AuditLog.Read.All；若需应用后台直接拉取（无需用户上下文），选择应用权限，添加AuditLog.Read.All
• 点击「授予管理员同意」，完成权限生效

步骤2：在Angular中集成Graph API调用 #

1. 安装依赖

确保已安装MSAL Angular和Graph API客户端：

npm install @azure/msal-angular @microsoft/microsoft-graph-client

2. 配置MSAL获取访问令牌

如果用委托权限（基于管理员用户上下文），在组件中通过MSAL服务获取Graph API的访问令牌：

import { MsalService } from '@azure/msal-angular';

constructor(private msalService: MsalService) {}

async getGraphToken(): Promise<string> {
  const account = this.msalService.instance.getAllAccounts()[0];
  const response = await this.msalService.instance.acquireTokenSilent({
    account: account,
    scopes: ['https://graph.microsoft.com/AuditLog.Read.All']
  });
  return response.accessToken;
}

如果用应用权限（后台无用户上下文调用），需在你的后端服务中实现令牌获取逻辑（禁止在前端直接处理，避免泄露客户端密钥），前端通过调用自有后端接口间接获取日志。

3. 调用Graph API获取登录日志

使用Graph客户端发起请求：

import { Client } from '@microsoft/microsoft-graph-client';
import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
import { AccessTokenCredential } from '@azure/identity';

async fetchSignInLogs() {
  const token = await this.getGraphToken();
  const credential = new AccessTokenCredential(token);
  const authProvider = new TokenCredentialAuthenticationProvider(credential, {
    scopes: ['https://graph.microsoft.com/.default']
  });

  const client = Client.initWithMiddleware({ authProvider });
  try {
    const logs = await client.api('/auditLogs/signIns').get();
    // 可添加日期筛选，比如：.filter("createdDateTime ge 2024-01-01T00:00:00Z")
    return logs.value;
  } catch (error) {
    console.error('获取登录日志失败:', error);
    throw error;
  }
}

步骤3：前端展示日志数据 #

将获取到的日志数据绑定到Angular模板，用表格展示关键字段：

<table>
  <thead>
    <tr>
      <th>登录时间</th>
      <th>用户邮箱</th>
      <th>登录状态</th>
      <th>客户端应用</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let log of signInLogs">
      <td>{{ log.createdDateTime | date:'yyyy-MM-dd HH:mm:ss' }}</td>
      <td>{{ log.userPrincipalName }}</td>
      <td>{{ log.status.displayName }}</td>
      <td>{{ log.appDisplayName }}</td>
    </tr>
  </tbody>
</table>

关键注意事项 #

• 权限管控：在前端校验用户角色声明，确保只有管理员（如全局管理员、安全管理员）能访问日志页面
• 分页处理：Graph API默认分页返回数据，需处理@odata.nextLink实现分页加载
• 性能优化：通过$filter参数添加日期范围筛选，减少单次请求的数据量
• 安全规范：应用权限模式下，令牌获取逻辑必须放在后端，前端仅调用后端接口，杜绝客户端密钥泄露

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