单一登录 (SSO) 快速入门

在本文中,你将使用 Office 加载项的 Yeoman 生成器创建使用单一登录 (SSO) 的 Excel、Outlook、Word 或 PowerPoint 的 Office 外接程序。

注意

Yeoman 生成器提供的 Office 加载项 SSO 模板仅在 localhost 上运行,无法部署。 如果要生成用于生产目的的具有 SSO 的新 Office 外接程序,请按照 创建使用单一登录的 Node.js Office 外接程序中的说明进行作。

先决条件

  • Node.js(最新LTS 版本)。

  • 最新版本的 Yeoman适用于 Office 加载项的 Yeoman 生成器。若要全局安装这些工具,请从命令提示符处运行以下命令。

    npm install -g yo generator-office
    

    注意

    即便先前已安装了 Yeoman 生成器,我们还是建议你通过 npm 将包更新为最新版本。

  • 如果你使用的是 Mac,并且计算机上未安装 Azure CLI,则必须安装 Homebrew。 在此快速入门过程中运行的 SSO 配置脚本将使用 Homebrew 来安装 Azure CLI,然后将使用 Azure CLI 在 Azure 中配置 SSO。

创建加载项项目

提示

Yeoman 生成器可以使用脚本类型为 JavaScript 或 TypeScript 为 Excel、Outlook、Word或 PowerPoint 创建启用了 SSO 的 Office 外接程序。 下列说明指定 JavaScriptExcel,但应选择最适合方案的脚本类型和 Office 客户端应用程序。

运行以下命令,使用 Yeoman 生成器创建加载项项目。 包含项目的文件夹将添加到当前目录。

yo office

注意

运行该yo office命令时,可能会收到有关 Yeoman 和 Office 加载项 CLI 工具的数据收集策略的提示。 根据你的需要,使用提供的信息来响应提示。

出现提示时,请提供以下信息以创建加载项项目。

  • 选择项目类型:Office Add-in Task Pane project supporting single sign-on (localhost)
  • 选择脚本类型:JavaScript
  • 要为外接程序命名什么名称?My Office Add-in
  • 要支持哪一个 Office 客户端应用程序? 选择 ExcelOutlookWordPowerpoint

命令行界面中 Yeoman 生成器的提示和答案。

完成此向导后,生成器会创建项目,并安装支持的 Node 组件。

浏览项目

使用 Yeoman 生成器创建的加载项项目包含适用于启用了 SSO 的任务窗格加载项代码。

配置

以下文件指定外接程序的配置设置。

  • 项目的根目录中的 ./manifest.xmlmanifest.json 文件定义加载项的设置和功能。

  • 项目根目录中的./.ENV文件定义了加载项项目所使用的常量。

任务窗格

以下文件定义加载项的任务窗格 UI 和功能。

  • ./src/taskpane/taskpane.html 文件包含组成任务窗格的 HTML。

  • ./src/taskpane/taskpane.css 文件包含应用于任务窗格中的内容的 CSS。

  • ./src/taskpane/taskpane.js 文件包含用于初始化外接程序的代码,以及使用 Office JavaScript API 库将 Microsoft Graph 中的数据添加到 Office 文档的代码。

身份验证

以下文件可加快 SSO 进程,并将数据写入Office 文档。

  • 在 JavaScript 项目中, ./src/helpers/documentHelper.js 文件包含封装用户个人资料信息以插入当前 Office 文档的代码。 TypeScript 项目中没有此类文件。 相反,收集配置文件信息的代码内联在 ./src/taskpane/taskpane.ts 文件中。

  • ./src/helpers/fallbackauthdialog.html 文件是无 UI 页面,用于加载回退身份验证策略的 JavaScript。 Webpack.config.js <script> 运行时,将加载 JavaScript 的标记插入文件中。

  • ./src/helpers/fallbackauthdialog.js 文件包含用于回退身份验证策略的 JavaScript,该策略使用 msal.js 进行用户登录。

  • ./src/helpers/message-helper.js 文件包含向用户显示或隐藏错误消息的 JavaScript。

  • ./src/helpers/middle-tier-calls.js 文件包含调用 Web API 以提取数据的 JavaScript。

  • ./src/helpers/sso-helper.js 文件包含对 SSO API 的 JavaScript 调用,getAccessToken接收访问令牌,并将其包含在调用 Microsoft Graph 中以获取数据。 如果出现错误或在不支持 SSO 身份验证的情况下,它会调用回退策略。

配置 SSO

现在,加载项项目已创建并包含促进 SSO 过程所需的代码,请完成以下步骤,为外接程序配置 SSO。

  1. 转到项目的根文件夹。

    cd "My Office Add-in"
    
  2. 运行下列命令,为加载项配置 SSO。

    npm run configure-sso
    

    警告

    如果租户已配置为需要双因素验证,则此命令将失败。 在此方案中,需要按照 创建使用单一登录的 Node.js Office 外接程序 教程中的所有步骤手动完成 Azure 应用注册和 SSO 配置步骤。

  3. Web 浏览器窗口将打开,并提示登录 Azure。 使用现有的 Microsoft 365 管理员凭据登录到 Azure。 这些凭据将用于在 Azure 中注册新的应用程序并配置 SSO 所需的设置。

    注意

    在此步骤中,如果使用非管理员凭据登录 Azure,configure-sso 脚本将无法向组织中的用户提供该加载项的管理员许可。 因此,该加载项的用户无法使用 SSO,系统将提示用户登录。

  4. 输入凭据后,关闭浏览器窗口并返回命令提示符。 随着 SSO 配置流程的继续,将看到写入控制台的状态消息。 正如控制台消息所述,加载项项目中的文件会自动更新 SSO 流程所需的数据。

测试加载项

如果已创建 Excel、Word或 PowerPoint 加载项,请完成以下部分中的步骤以试用。 如果已创建 Outlook 加载项,请改为完成 Outlook 部分中的步骤。

Excel、Word 和 PowerPoint

完成以下步骤以测试 Excel、Word或 PowerPoint 加载项。

  1. SSO 配置流程完成后,运行以下命令生成项目、启动本地 Web 服务器,并旁加载之前在 Office 客户端应用程序中选定的加载项。

    注意

    • 即使在开发过程中,Office 外接程序也应使用 HTTPS,而不是 HTTP。 如果在运行以下命令之一后系统提示安装证书,请接受安装 Yeoman 生成器提供的证书的提示。 你可能还必须以管理员身份运行命令提示符或终端才能进行更改。

    • 如果这是你第一次在计算机上开发 Office 加载项,则命令行中可能会提示你授予Microsoft Edge WebView 环回豁免 (“允许 Microsoft Edge WebView 的 localhost 环回?”) 。 出现提示时,输入 Y 以允许豁免。 请注意,需要管理员权限才能允许豁免。 一旦允许,在将来 (旁加载 Office 加载项时,系统就不会提示你获得豁免,除非从计算机) 中删除该豁免。 若要了解详细信息,请参阅加载 Office 外接程序或使用 Fiddler 时,“我们无法从 localhost 打开此外接程序”。

      命令行中允许Microsoft Edge WebView 环回豁免的提示。

    • 首次使用 Yeoman 生成器开发 Office 加载项时,默认浏览器会打开一个窗口,提示你登录到 Microsoft 365 帐户。 如果未显示登录窗口,并且遇到旁加载或登录超时错误,请运行 atk auth login m365

    npm start
    
  2. 运行上一个命令时 Excel、Word 或 PowerPoint 打开时,请确保使用与在上一部分的步骤 3 中配置 SSO 时用于连接到 Azure 的 Microsoft 365 管理员帐户相同的 Microsoft 365 组织成员的用户帐户登录。 执行此操作,将为成功进行 SSO 建立了相应的条件。

  3. 在 Office 客户端应用程序中,选择“ 开始 ”选项卡,然后选择“ 显示任务窗格 ”以打开加载项任务窗格。

    Excel 加载项按钮。

  4. 在任务窗格底部,选择“获取我的用户配置文件信息”按钮以开始 SSO 流程。

  5. 如果对话框窗口显示代表加载项请求权限,则表示 你的方案不支持 SSO,并且加载项已退回至替代的用户身份验证方法。 如果租户管理员未授予加载项访问 Microsoft Graph 的许可,或者用户未使用有效的Microsoft帐户、Microsoft 365 教育版或工作帐户登录到 Office,则可能会出现这种情况。 选择“ 接受” 以继续。

    “请求的权限”对话框,其中突出显示了“接受”按钮。

    注意

    用户接受此权限请求后,以后将不会再收到提示。

  6. 加载项检索已登录用户的配置文件信息并写入至文档中。 下图显示了写入至 Excel 工作表的配置文件信息的实例。

    Excel 工作表中的用户配置文件信息。

  7. 如果要停止本地 Web 服务器并卸载加载项,请按照适用的说明作:

    • 若要停止服务器,请运行以下命令。 如果使用 npm start,则以下命令也会卸载加载项。

      npm stop
      
    • 如果手动旁加载加载项,请参阅 删除旁加载加载项

Outlook

完成以下步骤以试用 Outlook 加载项。

  1. SSO 配置过程完成后,运行以下命令生成项目并启动本地 Web 服务器。

    注意

    • 即使在开发过程中,Office 外接程序也应使用 HTTPS,而不是 HTTP。 如果在运行以下命令之一后系统提示安装证书,请接受安装 Yeoman 生成器提供的证书的提示。 你可能还必须以管理员身份运行命令提示符或终端才能进行更改。

    • 如果这是你第一次在计算机上开发 Office 加载项,则命令行中可能会提示你授予Microsoft Edge WebView 环回豁免 (“允许 Microsoft Edge WebView 的 localhost 环回?”) 。 出现提示时,输入 Y 以允许豁免。 请注意,需要管理员权限才能允许豁免。 一旦允许,在将来 (旁加载 Office 加载项时,系统就不会提示你获得豁免,除非从计算机) 中删除该豁免。 若要了解详细信息,请参阅加载 Office 外接程序或使用 Fiddler 时,“我们无法从 localhost 打开此外接程序”。

      命令行中允许Microsoft Edge WebView 环回豁免的提示。

    • 首次使用 Yeoman 生成器开发 Office 加载项时,默认浏览器会打开一个窗口,提示你登录到 Microsoft 365 帐户。 如果未显示登录窗口,并且遇到旁加载或登录超时错误,请运行 atk auth login m365

    npm start
    
  2. Outlook 将启动并旁加载加载项。 确保用于登录 Outlook 的用户与在上一节第 3 步中配置 SSO 时用于连接至 Azure 的 Microsoft 365 管理员帐户是同一 Microsoft 365 组织的成员。 执行此操作,将为成功进行 SSO 建立了相应的条件。

  3. 在 Outlook 中,撰写一封新邮件。

  4. 在邮件撰写窗口中,选择“ 显示任务窗格 ”按钮以打开加载项任务窗格。

    Outlook 撰写邮件窗口中突出显示的加载项功能区按钮。

  5. 在任务窗格底部,选择“获取我的用户配置文件信息”按钮以开始 SSO 流程。

  6. 如果对话框窗口显示代表加载项请求权限,则表示 你的方案不支持 SSO,并且加载项已退回至替代的用户身份验证方法。 如果租户管理员未授予加载项访问 Microsoft Graph 的许可,或者用户未使用有效的Microsoft帐户、Microsoft 365 教育版或工作帐户登录到 Office,则可能会出现这种情况。 选择“ 接受” 以继续。

    “请求的权限”对话框,其中突出显示了“接受”按钮。

    注意

    用户接受此权限请求后,以后将不会再收到提示。

  7. 加载项检索已登录用户的配置文件信息并写入至电子邮件的正文中。

    Outlook 撰写邮件窗口中的用户配置文件信息。

  8. 如果要停止本地 Web 服务器并卸载加载项,请按照适用的说明作:

    • 若要停止服务器,请运行以下命令。 如果使用 npm start了 ,则以下命令还应卸载加载项。

      npm stop
      
    • 如果手动旁加载加载项,请参阅 删除旁加载加载项

后续步骤

祝贺你成功创建了可能使用 SSO 的任务窗格加载项,并在不支持 SSO 时,使用替代用户身份验证方法。 若要了解如何自定义加载项以添加需要不同权限的新功能,请参阅 “自定义启用了 Node.js SSO 的加载项”。

疑难解答

  • Yo Office 执行的自动 npm install 步骤可能会失败。 如果在尝试运行 npm start时看到错误,请在命令提示符中导航到新创建的项目文件夹并手动运行 npm install。 有关 Yo Office 的详细信息,请参阅 使用 Yeoman 生成器创建 Office 外接程序项目
  • 运行 Yeoman 生成器或项目时 npm install ,可能会看到生成警告。 在大多数情况下,可以放心地忽略这些警告。 有时,依赖项将弃用,并且项目所依赖的其他包不支持其替换项。 若要解决这些警告,请使用 npm-check-updates 工具。
    • 在根项目目录中的命令提示符下,运行 npm i -g npm-check-updates。 这会全局安装该工具。
    • 运行 ncu -u。 这会提供所有包及其将更新的版本的报告。
    • 运行 npm install 以更新所有包。

另请参阅