如何在带.NET Core 3后端与OAuth认证的Angular 10应用中嵌入可编辑Excel

场景概述 #

基于Angular 10前端、.NET Core 3后端，通过Azure AD OAuth（MSAL.js实现认证）的应用，需集成应用内无缝编辑Excel文件的功能，支持实时/按需保存更改。

已尝试方案 #

• 通过Microsoft Graph API访问Excel文件，由.NET Core 3后端处理OAuth令牌
• 在iframe中嵌入Excel Online，使用访问令牌管理认证
• 探索Office JavaScript API及第三方库实现Excel文件操作

核心需求 #

• 用户可在Angular应用内无缝编辑Excel文件
• 前后端基于OAuth令牌实现安全认证集成
• Excel文件更改支持实时或按用户操作保存

1. 嵌入可编辑Excel的最佳实践 #

结合你的技术栈，iframe嵌入Excel Online + Microsoft Graph API辅助是最优方案，核心优势是复用原生Excel编辑体验、开发成本低、兼容性强，具体实施要点：

1. 后端令牌转换：通过.NET Core后端使用On-Behalf-Of流，将前端传入的用户ID令牌转换为Microsoft Graph API的访问令牌（需提前申请Files.ReadWrite或Sites.ReadWrite委派权限）
2. 前端嵌入配置：将后端获取的Graph令牌传入Excel Online的嵌入URL，格式如下：

   https://excel.officeapps.live.com/x/_layouts/xlviewer.aspx?edit=1&access_token={graph_access_token}&src={file_absolute_url}
   

3. 保存策略：
   • 实时保存：依赖Excel Online自身的自动保存机制，无需额外开发
   • 按需保存：通过Office JavaScript API监听用户自定义保存操作，触发后端调用Graph API的PUT /me/drive/items/{item-id}/content接口，生成文件版本或覆盖原文件

对比其他方案的不足：

• 纯Microsoft Graph API：需自行实现Excel UI渲染和编辑逻辑，开发成本极高，体验远不如原生Excel
• 第三方库（如SheetJS）：仅支持简单表格操作，复杂Excel特性（如宏、条件格式、高级公式）无法兼容

2. 适配技术栈的特定库/API #

• MSAL Angular v1：适配Angular 10的Azure AD认证库，负责前端令牌的获取、缓存和刷新，支持OAuth 2.0授权码流
• Microsoft Graph SDK for .NET：.NET Core 3后端调用Graph API的官方SDK，简化Excel文件的读写、权限管理、版本控制等操作，无需手动拼接HTTP请求
• Office JavaScript API：若需在嵌入的Excel中实现自定义交互（如监听编辑事件、添加自定义功能按钮），可通过该API与Angular应用通信，实现业务逻辑联动
• Microsoft Identity Web：.NET Core后端简化Azure AD认证的库，内置On-Behalf-Of流的实现，快速完成令牌转换逻辑

3. OAuth令牌安全管理实用技巧 #

• 前端令牌存储：使用MSAL.js的sessionStorage存储令牌（避免localStorage的跨标签页泄露风险），同时启用Angular的DomSanitizer处理iframe的URL，防止XSS攻击
• 令牌流转规范：前端仅传递ID令牌给后端做身份校验，后端通过On-Behalf-Of流自行获取Graph API的访问令牌——绝对不要让前端直接传递Graph令牌给后端，避免令牌泄露滥用
• 权限最小化：Azure AD应用注册仅申请必要的委派权限（如Files.ReadWrite.All仅针对OneDrive/SharePoint文件），后端请求Graph API时限定最小权限范围，避免过度授权
• 令牌缓存与过期：后端缓存On-Behalf-Of流获取的Graph令牌，减少Azure AD请求频次；依赖MSAL.js自动处理前端令牌的刷新，避免手动处理过期逻辑
• iframe安全配置：嵌入Excel Online时设置合理的sandbox属性，示例：

  <iframe sandbox="allow-scripts allow-same-origin allow-popups allow-top-navigation" [src]="sanitizedExcelUrl"></iframe>
  

  限制iframe的权限，防止恶意操作；确保所有请求通过HTTPS传输，避免令牌明文泄露

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