快速入门：登录到 SPA 并调用 API - Blazor WebAssembly

项目
04/19/2024

本快速入门使用示例 Blazor WebAssembly (WASM) 单页应用 (SPA) 应用，演示如何使用授权代码流和代码交换证明密钥 (PKCE) 来登录用户，并调用 Microsoft Graph API。此示例使用 Microsoft.Authentication.WebAssembly.MSAL 来处理身份验证。

先决条件

具有活动订阅的 Azure 帐户。如果还没有帐户，请创建一个帐户。
.NET SDK
Visual Studio 2022 或 Visual Studio Code

注册应用程序和记录标识符

若要完成注册，请为应用程序命名，指定支持的帐户类型并添加重定向 URI。注册后，应用程序“概述”窗格将显示应用程序源代码中所需的标识符。

登录到 Microsoft Entra 管理中心。
如果你有权访问多个租户，请使用顶部菜单中的“设置”图标，通过“目录 + 订阅”菜单切换到你希望在其中注册应用程序的租户。
浏览至“标识”>“应用程序”>“应用注册”，然后选择“新建注册”。
输入应用程序的“名称”，例如“identity-client-spa”。
对于“支持的帐户类型”设置，请选择“仅限此组织目录中的帐户”。要了解不同帐户类型的信息，请选择“帮我选择”选项。
选择“注册”。
注册完成后，将显示应用程序的“概述”窗格。记录要在应用程序源代码中使用的目录（租户）ID 和应用程序（客户端）ID。

注意

可以通过参照修改应用程序支持的帐户来更改支持的帐户类型。

添加平台重定向 URI

若要为应用注册指定应用类型，请执行以下步骤：

在“管理”下，选择“身份验证”。
在“平台配置”页上，选择“添加平台”，然后选择“SPA”选项。
对于“重定向 URI”，请输入 http://localhost:5000/authentication/login-callback。
选择“配置”以保存更改。

克隆或下载示例应用程序

若要获取示例应用程序，可以从 GitHub 克隆它或将其下载为 .zip 文件。

若要克隆示例，请打开命令提示符并导航到要创建项目的位置，然后输入以下命令：
```
git clone https://github.com/Azure-Samples/ms-identity-docs-code-dotnet
```
下载 .zip 文件。将其提取到名称长度小于 260 个字符的文件路径。

配置项目

在 IDE 中，打开包含该示例的项目文件夹 ms-identity-docs-code-dotnet/spa-blazor-wasm。
打开 wwwroot/appsettings.json，并使用之前在管理中心记录的信息更新以下值。
```
{
  "AzureAd": {
    "Authority": "https://login.partner.microsoftonline.cn/Enter the tenant ID obtained from the Microsoft Entra admin center",
    "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
    "ValidateAuthority": true
  }
}
```
- Authority - 颁发机构是一个 URL，表示 MSAL 可从中请求令牌的目录。请将“Enter_the_Tenant_Info_Here”替换为先前记录的“目录（租户）ID”值。
- ClientId - 应用程序的标识符，也称为客户端。将引号中的文本替换为先前记录的应用程序（客户端）ID 值。

使用 .NET 在 Web 服务器中运行项目：

若要启动服务器，请从项目目录中运行以下命令：
```
dotnet run
```
复制终端中显示的 http URL（例如 http://localhost:5000），并将其粘贴到浏览器中。建议使用私密浏览器或无痕浏览器会话。
按照步骤操作并输入必要的详细信息以使用 Microsoft 帐户登录。系统会要求你提供电子邮件地址，以便向你发送一次性密码。出现提示时输入代码。
该应用程序将请求维持你对已授权访问的数据的访问权限，以及让你登录并读取个人资料的权限。选择“接受”。将显示以下屏幕截图，表明你已登录应用程序且已从 Microsoft Graph API 访问个人资料详细信息。

退出登录应用程序

在页面右上角找到“退出登录”按钮，然后选中它。
系统将提示你选择要退出登录的帐户。选择用于登录的帐户。

此时会显示一条消息，表明你已退出登录。现在可以关闭浏览器窗口。

另请参阅

快速入门：使用 Microsoft 标识平台保护 ASP.NET Core Web API。
若要了解详细信息，可通过以下系列从头开始构建 React SPA：教程：登录用户并调用 Microsoft Graph

通过

快速入门：在单页应用 (SPA) 中登录用户，并使用 Blazor WebAssembly 调用 Microsoft Graph API