快速入门：适用于 Visual Studio Code 的 Microsoft Entra 外部 ID 入门

适用于： 员工租户 外部租户（了解详细信息）

将身份验证集成进个人客户应用程序和企业客户应用程序是保护资源和客户数据的关键所在。 使用 Visual Studio Code 的 Microsoft Entra 外部 ID 扩展，可以快速创建外部租户、为外部用户配置登录体验，以及直接在 Visual Studio Code 中设置外部 ID 示例。 使用扩展演练，可以了解如何为应用程序的外部用户设置自定义的品牌登录体验，并使用预配置的示例应用程序启动项目。

此扩展提供了基础设置，可为应用程序自动创建租户并为用户做好准备。 此外，它还可以助你简化工作流：自动将应用程序 ID 等值填充进配置文件中，让设置流程变得更加顺畅。

外部 ID 是可以添加到 Azure 订阅的一项服务。 如果已经拥有外部 ID，则可以轻松包含外部 ID。 如果还没有，可通过配置示例应用，在 Visual Studio Code 内设置 Microsoft Entra 外部 ID 免费试用版即可开始使用。

安装扩展

Visual Studio Code 市场中提供 Microsoft Entra 外部 ID 扩展。

1. 如果尚未安装 Visual Studio Code，请下载 Visual Studio Code 并完成安装步骤。
2. 从 https://aka.ms/vscodequickstart/marketplace 安装适用于 Visual Studio Code 的 Microsoft Entra 外部 ID 扩展。

安装扩展后，点击活动栏上的图标即可访问使用。

还可以从 Visual Studio Code“欢迎”页面打开此扩展，步骤如下：选择“帮助”>“欢迎”，然后在“演练”下，选择“Microsoft Entra 外部 ID 入门”。 可能需要选择“更多…”，展开扩展列表。

外部 ID 设置入门

Microsoft Entra 外部 ID 扩展会在外部配置中创建租户，其中包含你的应用以及外部用户目录。 可将此新租户添加到现有的 Azure 订阅。 或者，如果没有 Azure 订阅，请创建不需要 Azure 订阅的试用版租户（了解更多）。

• 在 Microsoft Entra 外部 ID 欢迎页上，选择一个选项：

  • 如果还没有 Azure 帐户，请选择“设置免费试用版”。
  • 如果已有 Azure 订阅，请选择“使用 Azure 订阅”。

  

设置免费试用（预览版）

1. 选择“设置免费试用”。

2. 在登录确认消息中，选择“允许”。

3. 新的浏览器窗口将打开。 使用个人帐户、Microsoft 帐户 (MSA) 或 GitHub 帐户使用。 登录后，请关闭浏览器窗口。

4. 返回到 Visual Studio Code。 在“租户应位于哪里?”，为租户数据选择一个位置。 此选择以后无法更改。

5. 输入站点的唯一名称。

   

6. 扩展会创建试用版租户。 可通过打开“视图”>“输出”窗口，查看进度。 完成此过程后，会出现“租户已创建”。

使用你的订阅

1. 选择“使用我的订阅”。

2. 如果帐户关联了多个租户，则会出现“选择目录”菜单。 选择要使用的与订阅关联的目录（租户）。

   

   注意

   如果出现“没有可能订阅”消息，可以设置免费试用版。

3. 此时会打开一个浏览器页面，可在其中登录帐户。 登录后，返回到 Visual Studio Code。

4. 在“添加订阅”菜单中，选择自己的订阅。

5. 在“选择资源组”菜单中选择一个资源组。

6. 在“租户应位于哪里?”，为租户数据选择一个位置。 此选择以后无法更改。

7. 输入租户的名称，然后选择“输入”以创建租户。

   

   注意

   此租户创建过程可能需要长达 30 分钟的时间。 创建租户后，可以在 Microsoft Entra 管理中心和 Azure 门户中访问它。

为用户设置登录

可以将应用配置为允许用户使用其电子邮件和密码或一次性密码登录。 还可以通过添加公司徽标、更改背景色或调整登录布局，来设计用户体验的外观。 这些更改将应用于此新租户中所有应用的外观。

1. 在“为用户设置登录”下，选择“设置登录和品牌打造”。

   

2. 系统会提供你登录新租户。 选择“允许”，在打开的浏览器窗口中，选择目前正在使用的帐户，然后登录。 返回到 Visual Studio Code。

3. 在顶部的“想要用户如何登录？”菜单中，选择要为用户提供的登录方法：“电子邮件和密码”或“电子邮件和一次性密码”。

   

4. 选择“确定”。

5. 选择希望登录页面出现在浏览器窗口中的位置，“居中”或“右对齐”。

   

6. 为注册页面选择背景色。

   

7. 会打开“文件资源管理器”窗口，接下来就可以添加公司徽标。 浏览到公司徽标文件，然后选择“上传”。

   注意

   图片要求如下：

   • 图片大小为 245x36 像素
   • 文件大小上限为 50KB
   • 文件类型：透明 PNG 或 JPEG

8. 显示“配置登录流”消息。 可在“输出”窗口中查看安装进度。 完成配置后，会显示“已完成用户流设置”消息。

试用登录体验

演练中的“试用登录体验”步骤允许预览配置的登录体验。

1. 选择“立即运行”按钮。 随即将打开一个新的浏览器选项卡，上面有注册页面可供租户用来创建用户并使其登录。

2. 选择“无帐户? 请创建一个”，在租户中创建新用户。

3. 添加新用户的电子邮件地址，然后选择“下一步”。 请勿使用创建试用版时所用的同一电子邮件。

4. 完成屏幕上的注册步骤。 通常，用户登录后，会重定向回你的应用。 但由于在此步骤中尚未设置应用，因此会改为重定向到 JWT.ms，你可以在其中查看登录过程中颁发的令牌的内容。

若要查找在此步骤期间创建的用户，可以转到 Microsoft Entra 管理中心并在用户列表中查找用户。

设置并运行示例应用

该扩展包含多个代码示例，演示如何在不同应用类型和开发语言实现身份验证。 单页应用（JavaScript、React、Angular）和 Web 应用 [Node.js (Express)、ASP.NET Core、Python Django、Python Flask、Java Servlet] 包含示例。 从扩展中选择一个示例，该扩展会自动使用登录体验配置应用程序。

1. 在“设置并运行示例应用”下，选择“设置示例应用”按钮。

   

2. 在菜单中，选择要下载的应用类型。 如果系统提示你再次选择你的帐户，请选择一直使用的同一帐户。

   

3. 会打开“文件资源管理器”窗口，让你可以选择希望将示例存储库保存在哪里。 选择文件夹，然后选择“在此处下载存储库”。

4. 下载完成后，会打开新的 Visual Studio Code 项目工作区，下载的应用文件夹显示在“资源管理器”中。

5. 在 Visual Studio Code 窗口中打开新的终端。

6. 在顶部菜单中，选择“运行”>“运行但不调试”。 “调试控制台”会显示启动脚本进度。 设置项目和运行生成脚本时，会稍有延迟。

当扩展下载应用程序时，会自动更新 Microsoft 身份验证库 (MSAL) 配置以连接到新租户并使用设置的体验。 无需再进行后续配置；生成项目后即可运行应用。 例如，在 authConfig 文件中，clientId 设置为应用 ID，而 authority 设置为新租户的子域。

运行体验

设置完成后，在浏览器中输入应用的本地主机重定向 URI，试用登录体验。 应用的 README.md 文件中提供重定向 URL。

使用“资源管理器”视图

资源管理器视图显示“管理资源”、“入门指南”和“帮助和反馈”部分。 若要打开资源管理器视图，请选择 Visual Studio Code 活动栏中可见的扩展图标。

管理资源

在“管理资源”部分中，可以查看和管理外部租户、已注册的应用程序、用户流和公司品牌。 若要查看项目资源，请展开“管理资源”下左侧面板中的节点。

在“管理资源”部分中，可以选择一个资源并直接转到 Microsoft Entra 管理中心管理或配置资源。 例如，右键单击应用程序并选择“在管理中心中打开”。 系统会提示醁，然后 Microsoft Entra 管理中心会直接打开到应用的应用注册页面。

入门操作

在“入门”部分，可以访问免费试用版的文档，或直接转到登录体验配置或示例应用下载页面，而无需打开扩展演练。

后续步骤

• 若要进一步自定义租户并浏览各种配置选项，请访问 Microsoft Entra 管理中心。
• 有关可供开发人员使用的最新内容和资源，请查看外部 ID 开发人员中心。
• 若要为自己的应用配置身份验证，请参阅教程链接。 这些教程可帮助你生成自己的应用并将其与 Microsoft Entra 外部 ID 集成。 还可以在身份验证流中的特定点添加自定义身份验证扩展。