如何在Azure AD认证的Angular 13应用中通过Graph API获取用户上次登录日期

前置权限配置 #

• 进入Azure门户中你的Angular应用对应的应用注册页，找到API权限配置板块，添加Microsoft Graph的委托权限：AuditLog.Read.All、User.Read，配置完成后授予租户管理员同意，否则接口调用会报403权限错误。

注意：登录审计相关接口不支持个人Microsoft账号（MSA）调用，如果你的应用面向个人账号用户，直接跳过Graph调用方案，用本地/业务库自存储的方式实现即可。

具体实现步骤 #

• 先确认项目已经正常集成@azure/msal-angular完成认证流程，登录成功后可以正常获取到带Graph权限的访问令牌，且能从MSAL实例中拿到当前登录用户的对象ID（即oid字段，存在登录成功返回的用户claim中）。
• 在顶部公共组件的初始化生命周期（ngOnInit）中，调用Microsoft Graph接口拉取当前用户的最新登录记录，请求格式如下：

GET /v1.0/auditLogs/signIns?$filter=userId eq '{当前用户oid}'&$top=1&$orderby=createdDateTime desc

请求的基地址为Microsoft Graph的官方服务地址，直接用项目中已配置的MSAL拦截器自动附加授权头即可，不需要手动拼接令牌。

• 接口返回的结果数组中，第一条数据的createdDateTime字段就是UTC标准格式的上次登录时间，拿到后直接用Angular内置的Date管道转换为符合产品要求的时间格式，渲染到页面顶部位置即可。

备选方案（无Graph权限场景） #

如果你的租户没有开启登录审计日志、或者不方便申请AuditLog相关权限，可以直接在登录成功的回调逻辑中做自定义记录：

• 用户完成凭据校验跳转到着陆页的回调逻辑里，拿到登录成功事件后，把当前时间戳存到浏览器localStorage或者你的后端业务库对应用户的字段中
• 页面加载时直接读取存储的时间值做格式转换后展示即可
• 这个方案不需要额外申请Graph权限，实现成本更低，缺点是无法同步用户在其他设备、其他浏览器上的登录时间，可根据业务场景选择。

避坑提示 #

• 不要尝试从Azure AD签发的id_token、access_token的claim中取上次登录时间，默认token payload中不会携带这个字段，没有现成的声明可以直接使用。
• 调用审计日志接口时必须加$orderby=createdDateTime desc排序条件，否则返回的第一条数据不是最新的登录记录，会出现时间展示错误。

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