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

提示:

以下演示基于 .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 资源添加到配置中

使用访问令牌

延伸阅读