c# - 带有 Blazor 登录页面的 Entity Framework

Question

当谈到将 Identity Framework 与 Blazor Server 结合使用时，Microsoft 的官方声明是不支持它，而是使用 Razor 登录页面。问题是 Blazor 无法写入 cookie。

这有一些缺点:

• 无法重复使用 HTML 布局文件，需要为 Razor 重新创建重复的布局文件。
• 无法在 Blazor 页面上嵌入登录按钮
• 如果需要在结帐体验中选择登录，则用户体验不佳

This guy figured out a way to make a Blazor login page work with Blazor WebAssembly...不确定他是如何解决这个问题的，也不知道类似的方法是否适用于 Blazor Server。

我在考虑替代解决方案。问题是存储cookie。 Local storage can be used in Blazor但是本地存储对于安全 token 来说并不安全。然而，Cookie 也可以通过 JavaScript 互操作以类似的方式设置。

这种方法是否可行，在登录后通过 JavaScript 互操作设置登录 cookie，然后在任何进一步的页面加载时发送 cookie？有人做过吗？

对于单页管理内容，我发现了一种更简单的方法，即创建一个显示登录表单的 GatedContent 组件，然后在登录后显示 ChildContent。当然，这不会在页面刷新时保留 session ，但它适用于某些情况。

Answer 1

这是单页管理内容的解决方案:GatedContent

会显示一个登录表单，登录成功后显示门控内容。

SpinnerButton is defined here.

@using Microsoft.AspNetCore.Identity
@using System.ComponentModel.DataAnnotations
@inject NavigationManager navManager
@inject SignInManager<ApplicationUser> signInManager
@inject UserManager<ApplicationUser> userManager;

@if (!LoggedIn)
{
<EditForm Context="formContext" class="form-signin" OnValidSubmit="@SubmitAsync" Model="this">
    <DataAnnotationsValidator />

    <div style="margin-bottom: 1rem; margin-top: 1rem;" class="row">
        <Field For="@(() => Username)" Width="4" Required="true">
            <RadzenTextBox @bind-Value="@Username" class="form-control" Style="margin-bottom: 0px;" />
        </Field>
    </div>
    <div style="margin-bottom: 1rem" class="row">
        <Field For="@(() => Password)" Width="4" Required="true">
            <RadzenPassword @bind-Value="@Password" class="form-control" />
        </Field>
    </div>

    <SpinnerButton @ref="ButtonRef" style="width:150px" Text="Login" ButtonType="@((Radzen.ButtonType)ButtonType.Submit)" ButtonStyle="@((Radzen.ButtonStyle)ButtonStyle.Primary)" OnSubmit="LogInAsync" />
    @if (Error.HasValue())
    {
        <div class="red">@Error</div>
    }
</EditForm>
}
else
{
    @ChildContent
}
@code {
    public SpinnerButton? ButtonRef { get; set; }
    public async Task SubmitAsync() => await ButtonRef!.FormSubmitAsync().ConfigureAwait(false);

    [Required]
    public string Username { get; set; } = string.Empty;

    [Required]
    public string Password { get; set; } = string.Empty;

    string? Error { get; set; }
    bool LoggedIn { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    public async Task LogInAsync()
    {
        Error = null;
        try
        {
            var user = await userManager.FindByNameAsync(Username).ConfigureAwait(false);
            if (user != null)
            {
                var isAdmin = await userManager.IsInRoleAsync(user, ApplicationRole.Admin).ConfigureAwait(false);
                if (isAdmin)
                {
                    var singInResult = await signInManager.CheckPasswordSignInAsync(user, Password, true).ConfigureAwait(false);
                    if (singInResult.Succeeded)
                    {
                        LoggedIn = true;
                    }
                    else
                    {
                        Error = "Invalid password";
                    }
                }
                else
                {
                    Error = "User is not Admin";
                }
            }
            else
            {
                Error = "Username not found";
            }
        }
        catch (Exception ex)
        {
            Error = ex.Message;
        }
    }
}

这样使用

<GatedContent>
    This is an admin page.
</GatedContent>

当然，此解决方案不会在页面重新加载后保留状态，但它适用于简单的管理页面。