在你的 .NET Core (Blazor Server) 应用中添加认证
- 以下演示基于 .NET Core 8.0 构建。该 SDK 兼容 .NET 6.0 或更高版本。
- .NET Core 示例项目可在 GitHub 仓库 中找到。
前提条件
- 一个 Logto Cloud 账户或一个 自托管 Logto。
- 一个 Logto 传统 Web 应用已创建。
安装
将 NuGet 包添加到你的项目中:
dotnet add package Logto.AspNetCore.Authentication
集成
添加 Logto 认证
打开 Startup.cs
(或 Program.cs
)并添加以下代码以注册 Logto 认证服务:
using Logto.AspNetCore.Authentication;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddLogtoAuthentication(options =>
{
options.Endpoint = builder.Configuration["Logto:Endpoint"]!;
options.AppId = builder.Configuration["Logto:AppId"]!;
options.AppSecret = builder.Configuration["Logto:AppSecret"];
});
AddLogtoAuthentication
方法将执行以下操作:
- 将默认认证方案设置为
LogtoDefaults.CookieScheme
。 - 将默认挑战 方案设置为
LogtoDefaults.AuthenticationScheme
。 - 将默认注销方案设置为
LogtoDefaults.AuthenticationScheme
。 - 将 cookie 和 OpenID Connect 认证处理程序添加到认证方案中。
登录和登出流程
在我们继续之前,需要澄清 .NET Core 认证中间件中的两个容易混淆的术语:
- CallbackPath:用户登录后,Logto 将用户重定向回来的 URI(在 Logto 中称为“重定向 URI”)
- RedirectUri:在 Logto 认证中间件中完成必要操作后,将重定向到的 URI。
登录过程可以如下图所示:
类似地,.NET Core 也有用于注销流程的 SignedOutCallbackPath 和 RedirectUri。
为了清晰起见,我们将它们称为:
我们使用的术语 | .NET Core 术语 |
---|---|
Logto 重定向 URI | CallbackPath |
Logto 注销后重定向 URI | SignedOutCallbackPath |
应用程序重定向 URI | RedirectUri |
关于基于重定向的登录
- 此认证 (Authentication) 过程遵循 OpenID Connect (OIDC) 协议,Logto 强制执行严格的安全措施以保护用户登录。
- 如果你有多个应用程序,可以使用相同的身份提供商 (IdP)(日志 (Logto))。一旦用户登录到一个应用程序,当用户访问另一个应用程序时,Logto 将自动完成登录过程。
要了解有关基于重定向的登录的原理和好处的更多信息,请参阅 Logto 登录体验解释。
配置重定向 URI
在以下代码片段中,我们假设你的应用程序运行在 http://localhost:3000/
。
首先,让我们配置 Logto 重定向 URI。将以下 URI 添加到 Logto 应用详情页面的“重定向 URI”列表中:
http://http://localhost:3000//Callback
要配置 Logto 签出后重定向 URI,请将以下 URI 添加到 Logto 应用详情页面的“签出后重定向 URI”列表中:
http://http://localhost:3000//SignedOutCallback
更改默认路径
Logto 重定向 URI 的默认路径是 /Callback
,而 Logto 签出后重定向 URI 的默认路径是 /SignedOutCallback
。
如果没有特殊要求,你可以保持原样。如果你想更改它,可以为 LogtoOptions
设置 CallbackPath
和 SignedOutCallbackPath
属性:
builder.Services.AddLogtoAuthentication(options =>
{
// 其他配置...
options.CallbackPath = "/Foo";
options.SignedOutCallbackPath = "/Bar";
});
记得在 Logto 应用详情页面中相应地更新值。
添加路由
由于 Blazor Server 使用 SignalR 在服务器和客户端之间进行通信,这意味着直接操作 HTTP 上下文的方法(如发起挑战或重定向)在从 Blazor 组件调用时无法按预期工作。
为了正确实现,我们需要显式添加两个用于登录和注销重定向的端点:
app.MapGet("/SignIn", async context =>
{
if (!(context.User?.Identity?.IsAuthenticated ?? false))
{
await context.ChallengeAsync(new AuthenticationProperties { RedirectUri = "/" });
} else {
context.Response.Redirect("/");
}
});
app.MapGet("/SignOut", async context =>
{
if (context.User?.Identity?.IsAuthenticated ?? false)
{
await context.SignOutAsync(new AuthenticationProperties { RedirectUri = "/" });
} else {
context.Response.Redirect("/");
}
});
现在我们可以重定向到这些端点以触发登录和注销。
实现登录和登出按钮
在 Razor 组件中,添加以下代码:
@using Microsoft.AspNetCore.Components.Authorization
@using System.Security.Claims
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject NavigationManager NavigationManager
@* ... *@
<p>是否认证 (Is authenticated): @User.Identity?.IsAuthenticated</p>
@if (User.Identity?.IsAuthenticated == true)
{
<button @onclick="SignOut">登出</button>
}
else
{
<button @onclick="SignIn">登录</button>
}
@* ... *@
@code {
private ClaimsPrincipal? User { get; set; }
protected override async Task OnInitializedAsync()
{
var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
User = authState.User;
}
private void SignIn()
{
NavigationManager.NavigateTo("/SignIn", forceLoad: true);
}
private void SignOut()
{
NavigationManager.NavigateTo("/SignOut", forceLoad: true);
}
}
说明:
- 注入的
AuthenticationStateProvider
用于获取当前用户的认证状态,并填充User
属性。 SignIn
和SignOut
方法用于分别将用户重定向到登录和登出端点。由于 Blazor Server 的特性,我们需要使用NavigationManager
并强制加载以触发重定向。
如果用户未认证,页面将显示“登录”按钮;如果用户已认证,则显示“登出”按钮。
<AuthorizeView />
组件
或者,你可以使用 AuthorizeView
组件根据用户的认证状态有条件地渲染内容。当你想向已认证和未认证用户显示不同内容时,这个组件非常有用。
在你的 Razor 组件中,添加以下代码:
@using Microsoft.AspNetCore.Components.Authorization
@* ... *@
<AuthorizeView>
<Authorized>
<p>名称:@User?.Identity?.Name</p>
@* 已认证用户的内容 *@
</Authorized>
<NotAuthorized>
@* 未认证用户的内容 *@
</NotAuthorized>
</AuthorizeView>
@* ... *@
AuthorizeView
组件需要一个类型为 Task<AuthenticationState>
的级联参数。获取此参数的直接方法是添加 <CascadingAuthenticationState>
组件。然而,由于 Blazor Server 的特性,我们不能简单地将组件添加到布局或根组件(可能无法按预期工作)。相反,我们可以在构建器中添加以下代码(Program.cs
或 Startup.cs
)来提供级联参数:
builder.Services.AddCascadingAuthenticationState();
然后你可以在每个需要的组件中使用 AuthorizeView
组件。
检查点:测试你的应用程序
现在,你可以测试你的应用程序:
- 运行你的应用程序,你将看到登录按钮。
- 点击登录按钮,SDK 将初始化登录过程并将你重定向到 Logto 登录页面。
- 登录后,你将被重定向回你的应用程序,并看到登出按钮。
- 点击登出按钮以清除本地存储并登出。
获取用户信息
显示用户信息
要知道用户是否已认证 (Authenticated),你可以检查 User.Identity?.IsAuthenticated
属性。
要获取用户资料声明 (Claims),你可以使用 User.Claims
属性:
var claims = User.Claims;
// 获取用户 ID
var userId = claims.FirstOrDefault(c => c.Type == LogtoParameters.Claims.Subject)?.Value;
查看 LogtoParameters.Claims
以获取声明名称及其含义的列表。
请求额外的声明
你可能会发现从 User.Claims
返回的对象中缺少一些用户信息。这是因为 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
。
要请求额外的权限 (Scopes),你可以在 options
对象中配置 Scopes
属性:
builder.Services.AddLogtoAuthentication(options =>
{
// ...
options.Scopes = new string[] {
LogtoParameters.Scopes.Email,
LogtoParameters.Scopes.Phone
}
});