为你的 .NET Core (Blazor WASM) 应用添加认证

提示

以下演示基于 .NET Core 8.0 和 Blorc.OpenIdConnect。
.NET Core 示例项目可在 GitHub 仓库中找到。

先决条件

一个 Logto Cloud 账户或一个自托管 Logto。
一个 Logto 单页应用已创建。

安装

将 NuGet 包添加到你的项目中：

dotnet add package Blorc.OpenIdConnect

集成

添加脚本引用

在 index.html 文件中包含 Blorc.Core/injector.js：

index.html
<head>
  <!-- ... -->
  <script src="_content/Blorc.Core/injector.js"></script>
  <!-- ... -->
</head>

注册服务

将以下代码添加到 Program.cs 文件中：

Program.cs
using Blorc.OpenIdConnect;
using Blorc.Services;

builder.Services.AddBlorcCore();
builder.Services.AddAuthorizationCore();
builder.Services.AddBlorcOpenIdConnect(
    options =>
    {
        builder.Configuration.Bind("IdentityServer", options);
    });

var webAssemblyHost = builder.Build();

await webAssemblyHost
    .ConfigureDocumentAsync(async documentService =>
    {
        await documentService.InjectBlorcCoreJsAsync();
        await documentService.InjectOpenIdConnectAsync();
    });

await webAssemblyHost.RunAsync();

信息

无需使用 Microsoft.AspNetCore.Components.WebAssembly.Authentication 包。Blorc.OpenIdConnect 包将负责认证过程。

配置重定向 URI

在我们深入细节之前，这里是终端用户体验的快速概述。登录过程可以简化如下：

你的应用调用登录方法。
用户被重定向到 Logto 登录页面。对于原生应用，将打开系统浏览器。
用户登录并被重定向回你的应用（配置为重定向 URI）。

关于基于重定向的登录

此认证 (Authentication) 过程遵循 OpenID Connect (OIDC) 协议，Logto 强制执行严格的安全措施以保护用户登录。
如果你有多个应用程序，可以使用相同的身份提供商 (IdP)（日志 (Logto)）。一旦用户登录到一个应用程序，当用户访问另一个应用程序时，Logto 将自动完成登录过程。

要了解有关基于重定向的登录的原理和好处的更多信息，请参阅 Logto 登录体验解释。

备注

在以下代码片段中，我们假设你的应用程序运行在 http://localhost:3000/。

配置重定向 URI

切换到 Logto Console 的应用详情页面。添加一个重定向 URI http://localhost:3000/callback。

就像登录一样，用户应该被重定向到 Logto 以注销共享会话。完成后，最好将用户重定向回你的网站。例如，添加 http://localhost:3000/ 作为注销后重定向 URI 部分。

然后点击“保存”以保存更改。

配置应用程序

将以下代码添加到 appsettings.json 文件中：

appsettings.json
{
// ...
IdentityServer: {
  Authority: 'https://<your-logto-endpoint>/oidc',
  ClientId: '<your-logto-app-id>',
  PostLogoutRedirectUri: 'http://localhost:3000/',
  RedirectUri: 'http://localhost:3000/callback',
  ResponseType: 'code',
  Scope: 'openid profile', // 如有需要可添加更多 scopes
},
}

记得将 RedirectUri 和 PostLogoutRedirectUri 添加到 Logto 应用程序设置中允许的重定向 URI 列表中。它们都是你的 WASM 应用程序的 URL。

添加 `AuthorizeView` 组件

在需要认证的 Razor 页面中，添加 AuthorizeView 组件。假设是在 Home.razor 页面：

Pages/Home.razor
@using Microsoft.AspNetCore.Components.Authorization
@page "/"

<AuthorizeView>
    <Authorized>
        @* 已登录视图 *@
        <button @onclick="OnLogoutButtonClickAsync">
            Sign out
        </button>
    </Authorized>
    <NotAuthorized>
        @* 未认证视图 *@
        <button @onclick="OnLoginButtonClickAsync">
            Sign in
        </button>
    </NotAuthorized>
</AuthorizeView>

设置认证

在 Home.razor.cs 文件中（如果不存在则创建），添加以下代码：

Pages/Home.razor.cs
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Blorc.OpenIdConnect;
using Microsoft.AspNetCore.Components.Authorization;

[Authorize]
public partial class Home : ComponentBase
{
    [Inject]
    public required IUserManager UserManager { get; set; }

    public User<Profile>? User { get; set; }

    [CascadingParameter]
    protected Task<AuthenticationState>? AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        User = await UserManager.GetUserAsync<User<Profile>>(AuthenticationStateTask!);
    }

    private async Task OnLoginButtonClickAsync(MouseEventArgs obj)
    {
        await UserManager.SignInRedirectAsync();
    }

    private async Task OnLogoutButtonClickAsync(MouseEventArgs obj)
    {
        await UserManager.SignOutRedirectAsync();
    }
}

一旦用户通过认证，User 属性将被填充用户信息。

检查点：测试你的应用程序

现在，你可以测试你的应用程序：

运行你的应用程序，你将看到登录按钮。
点击登录按钮，SDK 将初始化登录过程并将你重定向到 Logto 登录页面。
登录后，你将被重定向回你的应用程序，并看到登出按钮。
点击登出按钮以清除本地存储并登出。

获取用户信息

显示用户信息

以下是在 Home.razor 页面中显示用户信息的一些示例：

<AuthorizeView>
    <Authorized>
        @* 登录视图 *@
        @* ... *@
        <p>你已登录为 @(@User?.Profile?.Name ?? "(unknown name)").</p>
    </Authorized>
    @* ... *@
</AuthorizeView>

有关更多属性和声明，请查看 Blorc.OpenIdConnect 包中的 User 和 Profile 类。

请求额外的声明

你可能会发现从 User 返回的对象中缺少一些用户信息。这是因为 OAuth 2.0 和 OpenID Connect (OIDC) 的设计遵循最小权限原则 (PoLP)，而 Logto 是基于这些标准构建的。

默认情况下，返回的声明（Claim）是有限的。如果你需要更多信息，可以请求额外的权限（Scope）以访问更多的声明（Claim）。

信息

“声明（Claim）”是关于主体的断言；“权限（Scope）”是一组声明。在当前情况下，声明是关于用户的一条信息。

以下是权限（Scope）与声明（Claim）关系的非规范性示例：

提示

“sub” 声明（Claim）表示“主体（Subject）”，即用户的唯一标识符（例如用户 ID）。

Logto SDK 将始终请求三个权限（Scope）：openid、profile 和 offline_access。

要请求额外的权限，你可以在 appsettings.json 文件中的 IdentityServer.Scope 属性中添加有效的权限。

{
  // ...
  "IdentityServer": {
    // ...
    "Scope": "openid profile email phone"
  }
}

需要网络请求的声明

为了防止用户对象膨胀，某些声明需要通过网络请求获取。例如，即使在权限中请求了 custom_data 声明，它也不会包含在用户对象中。要获取这些声明，你可以在 appsettings.json 文件中将 IdentityServer.LoadUserInfo 属性设置为 true。

例如，要获取用户的电子邮件地址和自定义数据，你可以使用以下配置：

{
  // ...
  "IdentityServer": {
    // ...
    "Scope": "openid profile email custom_data",
    "LoadUserInfo": true
  }
}

权限和声明

Logto 使用 OIDC 权限和声明约定来定义从 ID 令牌和 OIDC 用户信息端点检索用户信息的权限和声明。“权限”和“声明”都是 OAuth 2.0 和 OpenID Connect (OIDC) 规范中的术语。

以下是支持的权限（Scopes）及其对应的声明（Claims）列表：

openid

声明名称	类型	描述	需要用户信息吗？
sub	`string`	用户的唯一标识符	否

profile

声明名称	类型	描述	需要用户信息吗？
name	`string`	用户的全名	否
username	`string`	用户名	否
picture	`string`	终端用户的个人资料图片的 URL。此 URL 必须指向一个图像文件（例如，PNG、JPEG 或 GIF 图像文件），而不是包含图像的网页。请注意，此 URL 应特别引用适合在描述终端用户时显示的终端用户的个人资料照片，而不是终端用户拍摄的任意照片。	否
created_at	`number`	终端用户创建的时间。时间表示为自 Unix 纪元（1970-01-01T00:00:00Z）以来的毫秒数。	否
updated_at	`number`	终端用户信息最后更新的时间。时间表示为自 Unix 纪元（1970-01-01T00:00:00Z）以来的毫秒数。	否

其他标准声明包括 family_name、given_name、middle_name、nickname、preferred_username、profile、website、gender、birthdate、zoneinfo 和 locale 也将包含在 profile 权限中，而无需请求用户信息端点。与上述声明的区别在于，这些声明只有在其值不为空时才会返回，而上述声明在值为空时将返回 null。

备注

与标准声明不同，created_at 和 updated_at 声明使用毫秒而不是秒。

email

声明名称	类型	描述	需要用户信息吗？
email	`string`	用户的电子邮件地址	否
email_verified	`boolean`	电子邮件地址是否已验证	否

phone

声明名称	类型	描述	需要用户信息吗？
phone_number	`string`	用户的电话号码	否
phone_number_verified	`boolean`	电话号码是否已验证	否

address

请参阅 OpenID Connect Core 1.0 以获取地址声明的详细信息。

custom_data

声明名称	类型	描述	需要用户信息吗？
custom_data	`object`	用户的自定义数据	是

identities

声明名称	类型	描述	需要用户信息吗？
identities	`object`	用户的关联身份	是
sso_identities	`array`	用户的关联 SSO 身份	是

urn:logto:scope:organizations

声明名称	类型	描述	需要用户信息吗？
organizations	`string[]`	用户所属的组织 ID	否
organization_data	`object[]`	用户所属的组织数据	是

urn:logto:scope:organization_roles

声明名称	类型	描述	需要用户信息吗？
organization_roles	`string[]`	用户所属的组织角色，格式为 `<organization_id>:<role_name>`	否

考虑到性能和数据大小，如果“需要用户信息吗？”为“是”，则表示声明不会显示在 ID 令牌中，而会在用户信息端点响应中返回。

API 资源

我们建议首先阅读 🔐 基于角色的访问控制 (RBAC)，以了解 Logto RBAC 的基本概念以及如何正确设置 API 资源。

默认情况下，当你访问 User?.AccessToken 时，你将获得一个不透明令牌，它长度较短，并且不是 JWT (JSON Web Token)。此令牌用于访问 userinfo 端点。

将 API 资源添加到配置中

为了获取可以用于访问 Logto 中定义的 API 资源的 JWT 令牌，请将以下参数添加到 appsettings.json 文件中（以 https://my-api-resource 为例）：

appsettings.json
{
  // ...
  "IdentityServer": {
    // ...
    "Scope": "openid profile email <your-api-scopes>", // 在此处添加你的 API 权限
    "Resource": "https://my-api-resource",
    "ExtraTokenParams": {
        "resource": "https://my-api-resource" // 确保键 "resource" 为小写
    }
  }
}

Resource 属性用于将 API 资源添加到认证请求中。ExtraTokenParams 属性用于将 API 资源添加到令牌请求中。由于 Logto 遵循 RFC 8707 标准用于 API 资源，因此这两个属性都是必需的。

警告

由于 WebAssembly 是客户端应用程序，令牌请求只会发送到服务器端一次。由于这种特性，LoadUserInfo 与获取 API 资源的访问令牌存在冲突。

使用访问令牌

一旦用户通过认证，你可以使用 User?.AccessToken 属性访问 API 资源。例如，你可以使用 HttpClient 来访问 API 资源：

using Blorc.OpenIdConnect;

builder.Services
    .AddHttpClient("MyApiResource", client =>
    {
        client.BaseAddress = new Uri("https://my-api-resource");
    })
    .AddAccessToken(); // 将访问令牌添加到请求头

延伸阅读

终端用户流程：认证流程、账户流程和组织流程配置连接器保护你的 API

先决条件​

安装​

集成​

添加脚本引用​

注册服务​

配置重定向 URI​

配置重定向 URI​

配置应用程序​

添加 AuthorizeView 组件​

设置认证​

检查点：测试你的应用程序​

获取用户信息​

显示用户信息​

请求额外的声明​

需要网络请求的声明​

权限和声明​

API 资源​

将 API 资源添加到配置中​

使用访问令牌​

延伸阅读​

先决条件

安装

集成

添加脚本引用

注册服务

配置重定向 URI

配置重定向 URI

配置应用程序

添加 `AuthorizeView` 组件

设置认证

检查点：测试你的应用程序

获取用户信息

显示用户信息

请求额外的声明

需要网络请求的声明

权限和声明

API 资源

将 API 资源添加到配置中

使用访问令牌

延伸阅读