Entity Framework со страницей входа в Blazor

Question

Когда дело доходит до использования Identity Framework с Blazor Server, Microsoft официально заявляет, что он не поддерживается, и вместо этого использует страницу входа в Razor. Проблема в том, что Blazor не может записывать файлы cookie.

У этого есть несколько недостатков:

• Невозможно повторно использовать файлы макета HTML, необходимо воссоздать повторяющиеся файлы макета для Razor.
• Невозможно встроить кнопки входа на страницу Blazor
• Плохой пользовательский интерфейс, если необходимо дополнительно войти в систему как часть процесса оформления заказа

Этот парень придумал способ заставить страницу входа в Blazor работать с Blazor WebAssembly ... не знаю, как он решил проблему, и может ли аналогичный подход работать для Blazor Server.

Я думал об альтернативных решениях. Проблема в том, чтобы сохранить файл cookie. В Blazor можно использовать локальное хранилище, но локальное хранилище небезопасно для токенов безопасности. Однако файлы cookie также могут быть установлены через взаимодействие с JavaScript аналогичным образом.

Будет ли работать этот подход, если после входа в систему будет установлен файл cookie для входа в систему через взаимодействие JavaScript, а затем файл cookie будет отправлен при любой дальнейшей загрузке страницы? Кто-нибудь это сделал?

Для одностраничного административного контента я нашел более простой подход - создать компонент GatedContent, который показывает форму входа, а затем показывает ChildContent после входа в систему. Конечно, это не сохранит сеанс при обновлении страницы, но в некоторых случаях это работает.

Answer 1

Вот решение для одностраничного административного контента: GatedContent

Он покажет форму входа в систему, а после успешного входа в систему покажет закрытый контент.

Здесь определяется SpinnerButton.

@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>

Конечно, это решение не сохраняет состояние после перезагрузки страницы, но оно работает для простых страниц администратора.

Answer 2

Мой способ обхода такой: я создал такой SignInController

    public class SignInController : ControllerBase
    {
        private readonly SignInManager<IdentityUser> _signInManager;

        public SignInController(SignInManager<IdentityUser> signInManager)
        {
            _signInManager = signInManager;
        }

        [HttpPost("/signin")]
        public IActionResult Index([FromForm]string username, [FromForm]string password, [FromForm]string rememberMe)
        {
            bool.TryParse(rememberMe, out bool res);
            var signInResult = _signInManager.PasswordSignInAsync(username, password, res, false);
            if (signInResult.Result.Succeeded)
            {
                return Redirect("/");
            }
            return Redirect("/login/"+ signInResult.Result.Succeeded);
        }

        [HttpPost("/signout")]
        public async Task<IActionResult> Logout()
        {
            if (_signInManager.IsSignedIn(User))
            {
                await _signInManager.SignOutAsync();
            }
            return Redirect("/");
        }
    }

И у меня есть такой login.razor:

@page "/login"
    <form action="/signin" method="post">
            <div class="form-group">
                <p> Username </p>
                <input id="username" Name="username" />
            </div>
            <div class="form-group">
                <p>password<p/>
                <input type="password" id="password" />
            </div>
            <div class="form-group">
                <p> remember me? <p/>
                <input type="checkbox" id="rememberMe" />
            </div>
            <button type="Submit" Text="login" />
    </form>

Эта проблема вызвана signInManager, который работает только при использовании запросов HTTP / S. В противном случае он выдаст исключения. Также есть сообщения об этом в репозитории dotnet / aspcore.net на GitHub.

На данный момент это единственный (я знаю) способ использовать его с сервером Blazor.