Completado "Verificación de contraseña de AD"y"Cambio de contraseña de AD》Después de dos API,A continuación, utilice .NET MAUI Blazor para escribir programas de escritorio.。Después de aprender un poco sobre Blazor,me siento tan magico,Es como poner una página web en una aplicación.,Cuando se ejecuta, también puede ver los componentes relacionados con Edge ejecutándose detrás de él en el "Administrador de trabajos".,Luego presione F12 y aparecerá una ventana de herramientas de desarrollador. Pero esto también me generó algunas preocupaciones de seguridad.。Pero el sentimiento general es bastante especial.,Resulta que estoy familiarizado con la sintaxis de las páginas web.,Utilice Razor para diseñar pantallas de interfaz de usuario,Sentirse más amigable。
La estructura del programa es de dos páginas.,La primera página es la verificación de contraseña de AD.,Después de pasar, será dirigido a la página de cambio de contraseña de AD.。
"Plantilla de proyecto"
- .Aplicación NET MAUI Blazor
"Suite"
- oreja
Servicios/PasswordManagementService.cs
using System.Net.Http.Json; namespace NTool.Services { public class PasswordManagementService(HttpClient httpClient) { public async Task<bool> ValidateAsync(string username, string password) { var request = new { Username = username, Password = password }; var response = await httpClient.PostAsJsonAsync("Password/Validate", request); return response.IsSuccessStatusCode; } public async Task<bool> ChangeAsync(string username, string password, string newPassword) { var request = new { Username = username, OldPassword = password, NewPassword = newPassword }; var response = await httpClient.PostAsJsonAsync("Password/ChangeSdsP", request); return response.IsSuccessStatusCode; } } }
Componentes/Páginas/PasswordValidation.razor
@page "/" @using NTool.Services @using NTool.Models @inject PasswordManagementService PasswordManagementService @inject ValidRequest ValidRequest @inject NavigationManager Navigation <h3 class="mt-5 text-center">AD 密碼變更工具</h3> <p>請驗證帳號密碼</p> <EditForm Model="ValidRequest" OnValidSubmit="HandleValidSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <div> <label for="username">使用者登入名稱</label> <InputText id="username" @bind-Value="ValidRequest.Username" placeholder="輸入帳號" /> </div> <div> <label for="password">密碼</label> <InputText id="password" @bind-Value="ValidRequest.Password" placeholder="輸入密碼" type="password" /> </div> <button type="submit">驗證</button> </EditForm> <p>@resultMessage</p> @code { private string resultMessage = string.Empty; private async Task HandleValidSubmit() { var isValid = await PasswordManagementService.ValidateAsync(ValidRequest.Username, ValidRequest.Password); if (isValid) { Navigation.NavigateTo("/PasswordChange"); } else { resultMessage = "驗證失敗。"; } } }
Componentes/Páginas/PasswordChange.razor
@page "/PasswordChange" @using NTool.Models @using NTool.Services @inject PasswordManagementService PasswordManagementService @inject HttpClient Http @inject NavigationManager Navigation @inject ChangeRequest ChangeRequest @inject ValidRequest ValidRequest <h3 class="mt-5 text-center">AD 密碼變更工具</h3> <p>@Message</p> <EditForm Model="ChangeRequest" OnValidSubmit="HandleChangeSubmit"> <DataAnnotationsValidator /> <ValidationSummary /> <div> <label for="newPassword">新密碼</label> <InputText id="newPassword" @bind-Value="ChangeRequest.NewPassword" placeholder="輸入新密碼" type="password" /> </div> <div> <label for="confirmPassword">確認新密碼</label> <InputText id="confirmPassword" @bind-Value="ChangeRequest.ConfirmPassword" placeholder="確認新密碼" type="password" /> </div> <button type="submit">變更密碼</button> </EditForm> @code { private string Message { get; set; } = "驗證成功!請變更密碼"; private async Task HandleChangeSubmit() { var isValid = await PasswordManagementService.ChangeAsync(ValidRequest.Username, ValidRequest.Password, ChangeRequest.NewPassword); if (isValid) { Message = "密碼變更成功。"; ValidRequest.Password = string.Empty; ChangeRequest.NewPassword = string.Empty; ChangeRequest.ConfirmPassword = string.Empty; // Navigation.NavigateTo("/"); } else { Message = "密碼變更失敗。"; ChangeRequest.NewPassword = string.Empty; ChangeRequest.ConfirmPassword = string.Empty; } } }
Modelos/ContraseñaModel.cs
using System.ComponentModel.DataAnnotations; namespace NTool.Models { public class ValidRequest { [Required(ErrorMessage = "[使用者登入名稱] 為必填欄位。")] public required string Username { get; set; } [Required(ErrorMessage = "[密碼] 為必填欄位。")] public required string Password { get; set; } } public class ChangeRequest { [Required(ErrorMessage = "[新密碼] 為必填欄位。")] public required string NewPassword { get; set; } [Required(ErrorMessage = "[確認新密碼] 為必填欄位。")] [Compare("NewPassword", ErrorMessage = "[新密碼] 與 [確認新密碼] 不相符。")] public required string ConfirmPassword { get; set; } } }
MauiProgram.cs
using Microsoft.Extensions.Logging; using NTool.Services; using NTool.Models; namespace NTool { public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp<App>() .ConfigureFonts(fonts => { fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); }); builder.Services.AddMauiBlazorWebView(); #if DEBUG builder.Services.AddBlazorWebViewDeveloperTools(); builder.Logging.AddDebug(); #endif // 注入 HttpClient,並設定 API 的基底網址 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://api.abc.com/ad/") }); // 注入 Services、Models builder.Services.AddScoped<PasswordManagementService>(); builder.Services.AddScoped<ValidRequest>(); builder.Services.AddScoped<ChangeRequest>(); return builder.Build(); } } }
wwwroot/css/styles.css
body { background-color: #f0f8ff; /* 淡粉藍背景色 */ font-family: Arial, sans-serif; margin: 0; padding: 0; } form { max-width: 400px; margin: 50px auto; background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; } form div { margin-bottom: 15px; } form label { display: block; font-weight: bold; margin-bottom: 5px; } form input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; } form button { width: 100%; padding: 10px; background-color: #4caf50; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; } form button:hover { background-color: #45a049; } p { text-align: center; color: #ff0000; font-weight: bold; }