Blazor 服务器:自定义登录页面
Blazor Server: Custom Login Page
我正在开发一个 Blazor Server 项目来创建自定义登录和注册页面。下面的页面是自定义登录的测试页面。如果使用正确的用户名,则成功获取user
对象。但是,在代码 await _signInManager.SignInAsync(user, false);
处登录时会抛出错误。错误信息是
System.InvalidOperationException: 'Headers are read-only, response has already started.'.
如何解决这个问题?
@page "/"
@using Microsoft.AspNetCore.Identity
@using Blazor.PMC.Models.Identity
@inject UserManager<ApplicationUser> _userManager
@inject SignInManager<ApplicationUser> _signInManager
<AuthorizeView>
<Authorized>
<h1>Hello @context.User.Identity.Name !!</h1>
<p>Welcome to your new app.</p>
</Authorized>
<NotAuthorized>
<div class="form-group row m-b-15">
<label class="col-md-3 col-form-label">Username</label>
<div class="col-md-7">
<input @bind-value="Username" type="text" class="form-control" placeholder=" Enter username" />
</div>
</div>
<div class="form-group row m-b-15">
<label class="col-md-3 col-form-label">Password</label>
<div class="col-md-7">
<input @bind-value="Password" type="text" class="form-control" placeholder="Enter password" />
</div>
</div>
<button type="submit" @onclick="LoginUser" class="btn btn-sm btn-primary m-r-5">Login</button>
</NotAuthorized>
</AuthorizeView>
<br />
@Message
@code {
string Username;
string Password;
string Message;
private async void LoginUser()
{
var user = await _userManager.FindByNameAsync(Username);
if (user == null)
Message = "User does not exist";
var singInResult = await _signInManager.CheckPasswordSignInAsync(user, Password, false);
if (!singInResult.Succeeded)
Message = "Invalid password";
else
await _signInManager.SignInAsync(user, false); // Error occurs here
await InvokeAsync(() => StateHasChanged())
.ConfigureAwait(false);
}
}
SignInManager and UserManager aren't supported in Razor components.
Source...
<button type="submit" @onclick="LoginUser" class="btn btn-sm btn-primary m-r-
5">Login</button>
如果调用本地方法 LoginUser,则不应使用“提交”按钮类型。另请注意,“提交”按钮始终嵌入在表单元素中。我认为在任何一种情况下,执行流都会从您的 Blazor SPA 中退出 space,在这种情况下不应该。
您尝试自行实施身份验证有充分的理由吗?这很难,你的代码可能有很多错误。为什么不使用现有系统。
注意:如果您仍然想自己做,您可以从用户那里收集数据,并将其传递到 Web Api(创建 Web Api 项目)端点,其中您可以访问 SignInManager 和 UserManager 对象等等。您必须使用 HttpClient 服务在 Blazor 应用程序和 Web Api 端点之间进行通信。您也可以以类似的方式使用 Jwt 令牌身份验证和授权。
使用
_userManager.CheckPasswordSignInAsync(用户,密码)
我正在开发一个 Blazor Server 项目来创建自定义登录和注册页面。下面的页面是自定义登录的测试页面。如果使用正确的用户名,则成功获取user
对象。但是,在代码 await _signInManager.SignInAsync(user, false);
处登录时会抛出错误。错误信息是
System.InvalidOperationException: 'Headers are read-only, response has already started.'.
如何解决这个问题?
@page "/"
@using Microsoft.AspNetCore.Identity
@using Blazor.PMC.Models.Identity
@inject UserManager<ApplicationUser> _userManager
@inject SignInManager<ApplicationUser> _signInManager
<AuthorizeView>
<Authorized>
<h1>Hello @context.User.Identity.Name !!</h1>
<p>Welcome to your new app.</p>
</Authorized>
<NotAuthorized>
<div class="form-group row m-b-15">
<label class="col-md-3 col-form-label">Username</label>
<div class="col-md-7">
<input @bind-value="Username" type="text" class="form-control" placeholder=" Enter username" />
</div>
</div>
<div class="form-group row m-b-15">
<label class="col-md-3 col-form-label">Password</label>
<div class="col-md-7">
<input @bind-value="Password" type="text" class="form-control" placeholder="Enter password" />
</div>
</div>
<button type="submit" @onclick="LoginUser" class="btn btn-sm btn-primary m-r-5">Login</button>
</NotAuthorized>
</AuthorizeView>
<br />
@Message
@code {
string Username;
string Password;
string Message;
private async void LoginUser()
{
var user = await _userManager.FindByNameAsync(Username);
if (user == null)
Message = "User does not exist";
var singInResult = await _signInManager.CheckPasswordSignInAsync(user, Password, false);
if (!singInResult.Succeeded)
Message = "Invalid password";
else
await _signInManager.SignInAsync(user, false); // Error occurs here
await InvokeAsync(() => StateHasChanged())
.ConfigureAwait(false);
}
}
SignInManager and UserManager aren't supported in Razor components. Source...
<button type="submit" @onclick="LoginUser" class="btn btn-sm btn-primary m-r-
5">Login</button>
如果调用本地方法 LoginUser,则不应使用“提交”按钮类型。另请注意,“提交”按钮始终嵌入在表单元素中。我认为在任何一种情况下,执行流都会从您的 Blazor SPA 中退出 space,在这种情况下不应该。
您尝试自行实施身份验证有充分的理由吗?这很难,你的代码可能有很多错误。为什么不使用现有系统。
注意:如果您仍然想自己做,您可以从用户那里收集数据,并将其传递到 Web Api(创建 Web Api 项目)端点,其中您可以访问 SignInManager 和 UserManager 对象等等。您必须使用 HttpClient 服务在 Blazor 应用程序和 Web Api 端点之间进行通信。您也可以以类似的方式使用 Jwt 令牌身份验证和授权。
使用 _userManager.CheckPasswordSignInAsync(用户,密码)