了解如何自定义 Office 加载项

已完成

Office 加载项平台可自定义加载项。 在本模块中，将了解如何通过保持状态并使用 Fluent UI 和 Microsoft Graph 来自定义加载项。 在此模块结束时，你应该知道如何使用保持状态、Fluent UI 和 Microsoft Graph 来自定义 Office 加载项。

了解用于保持状态和设置的选项

Office 加载项平台为加载项提供了几种保持状态和设置的方法。 提供的选项取决于你计划支持的 Office 应用程序以及计划开发的加载项类型。

用于保持状态和设置的选项

Office JavaScript API 为你的加载项提供了对象，用于跨用户会话保存状态。 下表列出了各个选项，以及支持的加载项类型和 Office 主机应用程序。

Office API 对象	支持的加载项类型	支持的 Office 主机	存储信息
CustomProperties	MailApp	Outlook	项目数据存储在加载项正在处理的邮件或约会中。*
CustomXmlParts	TaskPaneApp	Excel（特定于主机的 Excel JavaScript API） Word（Office JavaScript 通用 API）	数据存储在文档或工作簿的自定义 XML 部分。
RoamingSettings	MailApp	Outlook	数据存储在用户的 Exchange 邮箱中，并与特定的加载项相关联。*
设置	ContentApp、TaskPaneApp	Excel、PowerPoint、Word	数据存储在加载项正在处理的文档、工作簿或演示文稿中。*

*存储在属性包中的名称/值对中的数据

你还可以使用 HTML5 Web 存储和通过加载项的基础浏览器控件提供的其他技术。

重要

不要在用户设备上存储密码和敏感个人身份信息 (PII)。

了解 Office 加载项中的 Fluent UI

构建加载项时，需要考虑许多 UI 设计因素。 Fluent UI 提供彰显 Office 品牌的元素，以便加载项看起来是 Office 的自然扩展。

注意

使用 UI Fabric 是可选的，但建议使用。

关于 Fluent UI

Fluent UI 有两个 (2) 主要区域:

• Fabric Core - 提供字体、图标和颜色等基本元素
• Fabric React 组件 - 包括 Fabric Core 元素，并且添加了输入、导航和通知组件等

Fabric Core

Core 提供体现或与 Office 品牌同步的基本设计元素。

如要开始使用 Fabric Core，请在你的 HTML 页面中引用 CSS，如下代码所示。

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">

然后可使用 Fabric 图标、字体和颜色。 以下示例显示如何在 Office 应用程序的主要主题颜色中包含超大表图标。

<i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>

Fabric 组件

Fabric React 为输入、导航、通知和其他类别提供了 UX 组件。 它基于 Fabric Core 构建并且包含 Fabric Core。

可在加载项中使用的推荐组件如下所示：

• 痕迹导航栏
• 按钮
• 复选框
• ChoiceGroup
• 下拉列表
• 标签
• 列表
• 透视
• 文本字段
• 切换

提示

可以使用 Office 加载项的 Yeoman 生成器创建引用 Fabric React 的项目。 可用的项目类型是使用 React 框架的 Office 加载项任务窗格项目。

了解何时以及如何在 Office 加载项中使用 Microsoft Graph

加载项可连接到 Microsoft Graph 并访问用户数据，以便完成更有用且更有效的方案。 示例任务包括：

• 从 OneDrive 读取文件
• 获取电子邮件附件
• 获取用户的个人资料

为何使用 Microsoft Graph

Microsoft Graph REST API 为加载项提供了一种访问服务中的用户数据的方式，例如：

• Microsoft Entra ID
• Microsoft 365 服务
• 企业移动性 + 安全性服务
• Windows 10 服务
• Dynamics 365

如何向 Microsoft Graph 授权

若要连接并使用 Microsoft Graph，你的加载项需要：

• 对用户进行身份验证
• 获得代表用户执行操作的授权

身份验证

当用户登录后，加载项可以从 Microsoft Entra ID 获取访问令牌。 Microsoft Entra ID 不允许其登录页在 iframe 中打开，当加载项在 Office 网页版中启动时，加载项任务窗格是 iframe。 因此，使用 Office JavaScript 对话框 API 显示 Microsoft Entra 登录表单。 如果你的加载项包含需要向 Microsoft Graph 授权的自定义函数，请使用自定义函数对话框 API 显示登录窗体。

授权

用户登录后，你的加载项将获得访问令牌，用于以后对 Microsoft Graph 进行 API 调用。 该访问令牌绝不会向加载项授予比用户更多或更大的权限。 用户通常只对自己的相关数据、自己的文件和电子邮件以及与他们共享的对象拥有权限。 如果你的加载项获得有关多个用户的 Microsoft Graph 数据，则只有具有管理员级别权限的用户才能成功使用该加载项。

推荐的库

根据你的开发选择，你可以根据需要使用以下库之一进行身份验证和授权。

• 你的服务器端位于基于 .NET 的框架（例如 .NET Core 或 ASP.NET）上：请使用 MSAL.NET
• 服务器端基于 node.js：使用 Passport Microsoft Entra ID
• 你的加载项使用隐式流，请使用 msal.js

摘要

Office 加载项平台可自定义加载项。 在本模块中，探索了如何通过持久化状态来自定义加载项，并使用 Fluent UI 和 Microsoft Graph。 在此模块结束时，你应该知道如何使用保持状态、Fluent UI 和 Microsoft Graph 来自定义 Office 加载项。

自定义 Office 加载项

1.

Outlook 加载项需要存储数据。 加载项开发人员可能会使用什么 Office JavaScript 对象？

CustomProperties

CustomXmlParts

设置

2.

Joe 已决定在加载项中使用 Fluent UI。 这样做的好处是什么？

Fabric 有三个 (3) 主要领域。

Fabric Core 构建于 Fabric React 之上。

Fabric 反映了 Office 品牌。

3.

Joe 在加载项中连接 Microsoft Graph。 加载项应在何处为 Office 网页版用户显示 Microsoft Entra 登录表单？

自定义函数

对话框

任务窗格

在检查工作前，必须回答所有问题。

继续