快速入门：使用 VS Code 生成第一个应用

适用于： 开发 人员

使用 SharePoint Embedded Visual Studio Code 扩展为第一个应用创建标准容器类型。 该扩展还配置拥有的应用，附加Azure计费，并注册容器类型。 然后创建容器并运行本地示例应用。

本文开始生成之旅。 有关更多计费指南，请参阅 创建和配置容器类型。

先决条件

在开始之前，请确保：

• 已安装Visual Studio Code。
• 对 Microsoft 365 租户的管理访问权限。
• SharePoint 可用租户。
• 帐户可以访问的Azure订阅和资源组。
• Azure订阅的所有者或参与者权限。
• 为示例应用安装了 Node.js 和 npm。
• 在 Microsoft Entra ID 中授予管理员同意的权限。

重要

需要对 Microsoft 365 租户进行管理访问权限。 如果没有租户，请使用 Microsoft 365 开发人员计划、Microsoft客户数字体验或Microsoft 365 E3试用版。

安装扩展

1. 打开 Visual Studio Code。
2. 从活动栏中打开 “扩展 ”。
3. 搜索 SharePoint Embedded。
4. 选择“安装”。
5. 如果已安装扩展，请更新它。
6. 选择活动栏中的 SharePoint Embedded 图标。

登录

1. 在 SharePoint Embedded 视图中，选择登录操作。
2. 使用 Microsoft 365 管理员帐户。
3. 在浏览器中完成身份验证。
4. 查看请求的权限。
5. 选择“ 接受 ”以授予管理员同意。
6. 重定向时返回到Visual Studio Code。

重要

仔细查看同意提示。 扩展需要租户权限才能配置开发资源。

登录后，扩展会显示 SharePoint Embedded 主页视图。

创建标准容器类型

容器类型定义一组 SharePoint Embedded 容器的关系、访问权限、计费责任和所选行为。

1. 选择“ 创建容器类型”。
2. 对于计费方法，请选择“ 标准”。
3. 输入容器类型名称。
4. 按照提示操作，直到创建完成。

当拥有应用程序的组织为 SharePoint Embedded 使用量付费时，请使用标准容器类型。 对于评估，请选择 “试用”。 对于客户租户计费，请选择使用计费分类的 directToCustomer 直通选项。

创建或选择拥有的应用

每个容器类型都有一个拥有Microsoft Entra ID应用程序。

1. 创建新的Microsoft Entra ID应用程序或选择现有应用程序 ID。
2. 如果创建新应用程序，请输入其名称。
3. 让扩展配置开发设置。

警告

如果选择现有应用程序，扩展会更新该应用的配置。 请勿在本快速入门中使用生产应用。 有关模型，请参阅 SharePoint Embedded 应用体系结构。

配置标准计费

Standard容器类型需要Azure计费。 该扩展使用帐户可以访问的Azure订阅和资源组附加计费。

1. 选择Azure订阅。
2. 选择资源组。
3. 等待扩展注册 Microsoft.Syntex 资源提供程序并附加计费。

如果跳过计费设置或没有所需的Azure权限，则树将显示“未设置计费”。 若要稍后完成设置，请右键单击容器类型。 然后选择“ 附加计费”。

在本地注册容器类型

必须先在使用租户中注册容器类型，然后应用才能创建容器或访问内容。

1. 创建后，按照提示在本地租户中注册容器类型。
2. 如果提示不可见，请右键单击容器类型，然后选择“ 注册”。
3. 查看权限。
4. 在浏览器中授予管理员同意。
5. 返回到Visual Studio Code。 注册配置拥有的应用可以对容器类型的容器使用的权限。

创建第一个容器

1. 在 SharePoint Embedded 树中，展开容器类型。
2. 右键单击“ 容器”。
3. 选择“ 创建容器”。
4. 输入容器名称。
5. 确认容器显示在树中。

容器是 SharePoint Embedded 中的基本存储单元和安全边界。

加载示例应用

1. 在 SharePoint Embedded 视图中，选择“ 加载示例应用程序”。
2. 选择 SharePoint Embedded 示例。

1. 查看有关本地纯文本机密的警告。

2. 如果系统提示创建客户端密码，请选择“ 确定” 进行本地开发。

3. 让扩展填充运行时配置文件。

重要

示例配置仅用于开发。 它将身份验证机密以纯文本形式存储在本地计算机上。

运行示例应用

打开终端并从生成的示例目录运行示例应用。

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

示例将开始：

• React客户端应用程序。
• Azure Functions应用程序服务器。

等待这两个控制台输出出现。

则：

1. 打开 http://localhost:8080。
2. 使用相同的 Microsoft 365 管理员帐户登录。
3. 在主页上选择“ 容器 ”。
4. 从示例 UI 创建容器并上传文件。

注意

在安装依赖项并生成这两个应用程序时，初始启动可能需要几分钟时间。

排查启动问题

症状	支票
端口冲突	当端口 8080 正在使用时，应用会尝试下一个可用端口。
依赖项失败	运行 npm install，然后再次运行 npm run start 。
身份验证错误	确认Microsoft Entra ID应用具有预期的重定向 URI。
Access denied	确认注册和管理员同意成功。
未设置计费	确认对所选Azure订阅具有“所有者”或“参与者”权限，然后使用“附加计费”。

清理

完成测试后：

1. 删除不再需要的测试容器。
2. 查看为本快速入门创建的Azure计费资源。
3. 删除不再需要的本地示例机密。

后续步骤

在 创建和配置容器类型中详细了解容器类型选项。