如何在React+Node外部网站嵌入SharePoint文件夹/列表并实现CRUD？

以下是几种适配你技术栈的可行实现方式：

1. 基于Microsoft Graph API自定义开发（推荐，完全可控） #

这种方式可完全自定义UI，避免跳转，且灵活支持CRUD操作：

前端React部分 #

• 使用@azure/msal-react和@azure/msal-browser实现Azure AD单点登录，获取访问SharePoint的令牌。
• 借助@microsoft/microsoft-graph-client调用Graph API完成核心操作：
  • 获取文件/文件夹列表：调用GET /sites/{site-id}/drive/root/children
  • 上传文件：用PUT /sites/{site-id}/drive/root:/{目标文件路径}:/content接口，结合react-dropzone实现拖拽上传
  • 修改/重命名：通过PATCH /sites/{site-id}/drive/items/{文件ID}更新文件属性
  • 删除文件：调用DELETE /sites/{site-id}/drive/items/{文件ID}
• 自行构建文件管理器UI：用react-table做文件列表展示，添加文件夹导航、文件预览、操作按钮（新建/删除/重命名）等组件。

后端Node.js部分 #

• 用@azure/msal-node和@microsoft/microsoft-graph-client搭建后端代理，处理令牌刷新、权限校验，或者封装复杂的批量操作接口。
• 通过后端转发Graph API请求，避免前端直接暴露敏感权限，提升安全性。

2. 嵌入SharePoint原生文件管理器（iframe方式） #

如果想快速复用SharePoint原生UI，可通过iframe嵌入实现无跳转：

• 构造SharePoint文档库的嵌入URL，格式示例：https://{你的租户}.sharepoint.com/sites/{站点名}/_layouts/15/.aspx?id={文档库URL}&embed=1
• 在React组件中用<iframe>标签嵌入该URL，注意配置iframe的宽高、sandbox属性确保安全。
• 提前配置Azure AD单点登录，让用户在自有网站登录后自动授权iframe内的SharePoint内容，避免重复登录；同时将自有网站域名加入SharePoint的信任跨域列表，解决跨域问题。
• 原生UI自带完整CRUD功能，无需额外开发操作逻辑。

3. 第三方React组件库（快速集成） #

部分npm包已封装SharePoint文件管理功能，可直接集成到React项目：

• 寻找专注于SharePoint集成的React组件（如react-sharepoint-file-manager类的包），这类组件通常已封装好Graph API调用和基础UI，只需配置Azure AD授权即可快速启用CRUD功能。
• 注意评估组件的维护状态、安全性，确保符合业务需求。

关键注意事项 #

• 身份认证：必须通过Azure AD OAuth 2.0授权，根据场景选择授权码流（推荐）、客户端凭证流等，确保用户拥有Files.ReadWrite.All等必要的SharePoint权限。
• 权限控制：在Azure AD应用中配置精细权限，或在代码中限制用户仅能操作指定文件夹/文件。
• 性能优化：针对大量文件场景，实现分页加载、虚拟滚动，减少API请求压力。

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