Entity Framework ze stroną logowania Blazor

Question

Jeśli chodzi o używanie Identity Framework z Blazor Server, oficjalne oświadczenie firmy Microsoft mówi, że nie jest obsługiwane i zamiast tego należy używać strony logowania Razor. Problem polega na tym, że Blazor nie może zapisywać plików cookie.

Ma to kilka wad:

• Nie można ponownie użyć plików układu HTML, należy ponownie utworzyć zduplikowane pliki układu dla Razor.
• Nie można osadzić przycisków logowania na stronie Blazor
• Słabe wrażenia użytkownika, jeśli trzeba opcjonalnie zalogować się w ramach płatności

Ten facet wymyślił sposób, aby strona logowania Blazor działała z Blazor WebAssembly ... nie jestem pewien, jak obejść ten problem ani czy podobne podejście może działać w przypadku Blazor Server.

Myślałem o alternatywnych rozwiązaniach. Problem polega na przechowywaniu pliku cookie. Magazyn lokalny może być używany w Blazor, ale magazyn lokalny nie jest bezpieczny dla tokenów zabezpieczających. Pliki cookie można jednak również ustawiać za pośrednictwem JavaScript w podobny sposób.

Czy to podejście zadziała, ustawiając plik cookie logowania za pomocą interakcji JavaScript po zalogowaniu, a następnie plik cookie zostanie wysłany podczas dalszego ładowania strony? Czy ktoś to zrobił?

W przypadku jednostronicowej treści administracyjnej znalazłem prostsze podejście do tworzenia komponentu GatedContent, który wyświetla formularz logowania, a następnie wyświetla ChildContent po zalogowaniu. Oczywiście nie zachowa to sesji podczas odświeżania strony, ale w niektórych przypadkach działa.

Answer 1

Oto rozwiązanie dla jednostronicowej zawartości administracyjnej: GatedContent

Wyświetli formularz logowania, a po pomyślnym zalogowaniu pokaże ogrodzone treści.

Tutaj zdefiniowano 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;
        }
    }
}

Użyj w ten sposób

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

Oczywiście to rozwiązanie nie zachowuje stanu po przeładowaniu strony, ale działa na prostych stronach administratora.

Answer 2

Moje obejście jest takie: utworzyłem SignInController w ten sposób

    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("/");
        }
    }

I mam login.razor w ten sposób:

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

Ten problem jest spowodowany przez signInManager, który działa tylko wtedy, gdy używasz żądań HTTP / S. W przeciwnym razie zgłosi wyjątki. Istnieją również raporty na ten temat w repozytorium dotnet / aspcore.net w witrynie GitHub.

W tej chwili jest to jedyny sposób (jaki znam) na użycie go z serwerem blazor.