hjjjo

2401_85379304

于 2024-06-03 10:45:39 发布

阅读量362

点赞数 5

文章标签：网络前端

本文链接：https://blog.csdn.net/2401_85379304/article/details/139408720

版权

好的，让我们更详细地一步一步实现一个Blazor Server项目中的登录功能。我们将涵盖以下几个步骤：

1. 创建Blazor Server项目
2. 创建登录页面
3. 实现用户认证服务
4. 配置依赖注入
5. 更新导航和路由配置
6. 添加用户会话管理

### 1. 创建Blazor Server项目

首先，使用Visual Studio或命令行工具创建一个新的Blazor Server项目。

```bash
dotnet new blazorserver -o BlazorLoginExample
cd BlazorLoginExample
```

### 2. 创建登录页面

在`Pages`文件夹中创建一个新的`Login.razor`组件：

```razor
@page "/login"
@inject NavigationManager Navigation
@inject AuthenticationService AuthenticationService

<h3>Login</h3>

<div>
<label for="username">Username:</label>
<InputText id="username" @bind-Value="loginModel.Username" />
</div>
<div>
<label for="password">Password:</label>
<InputText id="password" type="password" @bind-Value="loginModel.Password" />
</div>
<button type="submit">Login</button>
</EditForm>

@if (loginFailed)
{
<div class="alert alert-danger">Invalid username or password.</div>
}

@code {
private LoginModel loginModel = new LoginModel();
private bool loginFailed;

private async Task HandleLogin()
{
bool isAuthenticated = await AuthenticationService.Authenticate(loginModel.Username, loginModel.Password);

if (isAuthenticated)
{
Navigation.NavigateTo("/");
}
else
{
loginFailed = true;
}
}

public class LoginModel
{
public string Username { get; set; }
public string Password { get; set; }
}
}
```

### 3. 实现用户认证服务

在项目的根目录下创建一个新的文件夹`Services`，并在其中创建一个`AuthenticationService.cs`文件：

```csharp
using System.Threading.Tasks;

namespace BlazorLoginExample.Services
{
public class AuthenticationService
{
public async Task<bool> Authenticate(string username, string password)
{
// Implement your authentication logic here
// For example, check the credentials against a database
if (username == "admin" && password == "password")
{
return true;
}

return false;
}
}
}
```

### 4. 配置依赖注入

在`Program.cs`中配置依赖注入，以便在项目中使用`AuthenticationService`：

```csharp
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents();
builder.Services.AddSignalR();
builder.Services.AddSingleton<BlazorLoginExample.Services.AuthenticationService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();
```

### 5. 更新导航和路由配置

确保在`App.razor`中配置默认路由，并在导航菜单中添加登录页面的链接。

#### `App.razor`

```razor
<CascadingAuthenticationState>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>
```

#### `NavMenu.razor`

在`Shared`文件夹下的`NavMenu.razor`中添加登录页面的链接：

```razor
<NavLink class="nav-link" href="login">
<span class="oi oi-account-login" aria-hidden="true"></span> Login
</NavLink>
```

### 6. 添加用户会话管理

为了管理用户会话，我们可以使用Blazor内置的身份验证和授权机制。下面是一个简单的示例，展示如何在Blazor Server项目中实现用户会话管理。

#### 创建自

好的，让我们继续完成用户会话管理的实现。

### 6. 添加用户会话管理

为了管理用户会话，我们可以使用Blazor内置的身份验证和授权机制。以下是具体步骤：

#### 创建自定义AuthenticationStateProvider

在`Services`文件夹中创建一个新的`CustomAuthenticationStateProvider.cs`文件：

```csharp
using Microsoft.AspNetCore.Components.Authorization;
using System.Security.Claims;
using System.Threading.Tasks;

namespace BlazorLoginExample.Services
{
public class CustomAuthenticationStateProvider : AuthenticationStateProvider
{
private ClaimsPrincipal _anonymous = new ClaimsPrincipal(new ClaimsIdentity());

public override Task<AuthenticationState> GetAuthenticationStateAsync()
{
return Task.FromResult(new AuthenticationState(_anonymous));
}

public void MarkUserAsAuthenticated(string username)
{
var identity = new ClaimsIdentity(new[]
{
new Claim(ClaimTypes.Name, username)
}, "apiauth_type");

var user = new ClaimsPrincipal(identity);

NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(user)));
}

public void MarkUserAsLoggedOut()
{
NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(_anonymous)));
}
}
}
```

#### 更新AuthenticationService

在`AuthenticationService.cs`中注入`CustomAuthenticationStateProvider`并更新`Authenticate`方法：

```csharp
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Authorization;

namespace BlazorLoginExample.Services
{
public class AuthenticationService
{
private readonly CustomAuthenticationStateProvider _authenticationStateProvider;

public AuthenticationService(CustomAuthenticationStateProvider authenticationStateProvider)
{
_authenticationStateProvider = authenticationStateProvider;
}

public async Task<bool> Authenticate(string username, string password)
{
// Implement your authentication logic here
if (username == "admin" && password == "password")
{
_authenticationStateProvider.MarkUserAsAuthenticated(username);
return true;
}

return false;
}

public void Logout()
{
_authenticationStateProvider.MarkUserAsLoggedOut();
}
}
}
```

#### 配置依赖注入

在`Program.cs`中配置依赖注入，以便在项目中使用`CustomAuthenticationStateProvider`和`AuthenticationService`：

```csharp
var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents();
builder.Services.AddSignalR();
builder.Services.AddSingleton<BlazorLoginExample.Services.AuthenticationService>();
builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthenticationStateProvider>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();
```

### 7. 更新导航和路由配置

确保在`App.razor`中配置默认路由，并在导航菜单中添加登录页面的链接。

#### `App.razor`

#### `NavMenu.razor`

在`Shared`文件夹下的`NavMenu.razor`中添加登录和登出功能：

```razor
@inject AuthenticationService AuthenticationService
@inject NavigationManager Navigation
@using Microsoft.AspNetCore.Components.Authorization

<AuthorizeView>
<Authorized>
<NavLink class="nav-link" href="">
<span class="oi oi-account-logout" aria-hidden="true"></span> Logout
</NavLink>
</Authorized>
<NotAuthorized>
<NavLink class="nav-link" href="login">
<span class="oi oi-account-login" aria-hidden="true"></span> Login
</NavLink>
</NotAuthorized>
</AuthorizeView>

@code {
private async Task Logout()
{
AuthenticationService.Logout();
Navigation.NavigateTo("login");
}
}
```

### 8. 保护页面

在需要保护的页面上使用`[Authorize]`属性。例如，在`Pages`文件夹中的`Index.razor`：

```razor
@page "/"
@attribute

当然，我们继续完成用户会话管理和页面保护的实现。

### 保护页面

在需要保护的页面上使用`[Authorize]`属性。例如，在`Pages`文件夹中的`Index.razor`：

```razor
@page "/"
@attribute [Authorize]

<h3>Welcome to the protected Index page!</h3>
```

### 创建登录页面

接下来，我们需要创建一个登录页面，让用户输入用户名和密码进行登录。

#### `Login.razor`

在`Pages`文件夹中创建一个新的`Login.razor`文件：

```razor
@page "/login"
@inject AuthenticationService AuthenticationService
@inject NavigationManager Navigation

<div class="form-group">
<label for="username">Username</label>
<InputText id="username" class="form-control" @bind-Value="loginModel.Username" />
</div>
<div class="form-group">
<label for="password">Password</label>
<InputText id="password" type="password" class="form-control" @bind-Value="loginModel.Password" />
</div>
<button type="submit" class="btn btn-primary">Login</button>
</EditForm>

@code {
private LoginModel loginModel = new LoginModel();

private async Task HandleLogin()
{
var isAuthenticated = await AuthenticationService.Authenticate(loginModel.Username, loginModel.Password);
if (isAuthenticated)
{
Navigation.NavigateTo("/");
}
else
{
// Display error message
}
}

public class LoginModel
{
public string Username { get; set; }
public string Password { get; set; }
}
}
```

### 更新导航菜单

确保在导航菜单中添加登录页面的链接，并在用户登录后显示登出链接。

#### `NavMenu.razor`

在`Shared`文件夹下的`NavMenu.razor`文件中：

```razor
@inject AuthenticationService AuthenticationService
@inject NavigationManager Navigation
@using Microsoft.AspNetCore.Components.Authorization

<AuthorizeView>
<Authorized>
<NavLink class="nav-link" href="" @οnclick="Logout">
<span class="oi oi-account-logout" aria-hidden="true"></span> Logout
</NavLink>
</Authorized>
<NotAuthorized>
<NavLink class="nav-link" href="login">
<span class="oi oi-account-login" aria-hidden="true"></span> Login
</NavLink>
</NotAuthorized>
</AuthorizeView>

@code {
private async Task Logout()
{
AuthenticationService.Logout();
Navigation.NavigateTo("login");
}
}
```

### 测试应用程序

1. 启动应用程序。
2. 应该会默认显示登录页面。
3. 输入正确的用户名（例如`admin`）和密码（例如`password`），然后点击登录。
4. 应该会导航到受保护的首页（`Index.razor`）。
5. 如果尝试直接访问受保护的页面（例如`Index.razor`）而未登录，则会重定向到登录页面。

### 结论

通过以上步骤，我们实现了一个简单的用户会话管理系统，包括登录和登出功能，并保护了指定的页面。你可以根据需要进一步扩展和完善此系统，例如添加用户注册、密码重置、角色管理等功能。