时间戳

首页 > 解决方案 > Blazor 服务器：自定义登录页面

c# - Blazor 服务器：自定义登录页面

问题描述

我正在开发一个 Blazor Server 项目来创建自定义登录和注册页面。下面的页面是自定义登录的测试页面。如果使用正确的用户名，user则成功获取对象。但是，在代码处登录时会引发错误await _signInManager.SignInAsync(user, false);。错误信息是

System.InvalidOperationException: '标头是只读的，响应已经开始。'。

如何解决这个问题？

@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);
    }
}

标签： c#asp.netrazorasp.net-identityblazor

解决方案

Razor 组件不支持 SignInManager 和 UserManager。 资源...

<button type="submit" @onclick="LoginUser" class="btn btn-sm btn-primary m-r- 
  5">Login</button>

如果您调用本地方法 LoginUser，则不应使用“提交”按钮类型。另请注意，“提交”按钮始终嵌入在表单元素中。我认为无论哪种情况，执行流程都会超出您的 Blazor SPA 空间，在这种情况下不应该这样做。

您尝试自己实施身份验证是否有充分的理由？这很难，而且你的代码可能有很多错误。为什么不使用现有系统。

注意：如果您仍想自己执行此操作，则可以从用户那里收集数据，并将其传递到 Web Api（创建 Web Api 项目）端点，您可以在其中访问 SignInManager 和 UserManager 对象等。您必须使用 HttpClient 服务在 Blazor 应用程序和 Web Api 端点之间进行通信。您还可以以类似的方式使用 Jwt 令牌身份验证和授权。

推荐阅读