Объединить леса Войти страницу в страницу Razor

Question

Я работаю с Blazor и выполняю tnet core 3.1.1. Создаю образец приложения на стороне сервера и поддерживаю страницу входа и регистрации (Identity Scaffold).

Проблема в том, что я хочу объединить функциональность из файлов cs html в данные файлы бритвы.

Точно: я хочу перенести функциональность шага 1 (см. скриншот) в файл Counter.razor (шаг 2).

проблема в том, что cs html учитывает свойства, классы и файлы, которые не известны в моем файле бритвы.

например:

• publi c asyn c Task OnPostAsyn c (строка returnUrl = null)
• publi c asyn c Task OnGetAsyn c (строка returnUrl = null)
• Login.cs html .cs наследуется от PageModel

Все это и многое другое заставляет меня терпеть неудачу при интеграции данного механизма авторизации.

У кого-нибудь есть подсказка, ссылка на турориал или что-то, что помогает мне в моем журнале? эй?

Спасибо большое!

   [AllowAnonymous]
public class LoginModel : PageModel
{
    private readonly UserManager<BlazorApp5User> _userManager;
    private readonly SignInManager<BlazorApp5User> _signInManager;
    private readonly ILogger<LoginModel> _logger;

    public LoginModel(SignInManager<BlazorApp5User> signInManager, 
        ILogger<LoginModel> logger,
        UserManager<BlazorApp5User> userManager)
    {
        _userManager = userManager;
        _signInManager = signInManager;
        _logger = logger;
    }

    [BindProperty]
    public InputModel Input { get; set; }

    public IList<AuthenticationScheme> ExternalLogins { get; set; }

    public string ReturnUrl { get; set; }

    [TempData]
    public string ErrorMessage { get; set; }

    public class InputModel
    {
        [Required]
        [EmailAddress]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }

        [Display(Name = "Remember me?")]
        public bool RememberMe { get; set; }
    }

    public async Task OnGetAsync(string returnUrl = null)
    {
        if (!string.IsNullOrEmpty(ErrorMessage))
        {
            ModelState.AddModelError(string.Empty, ErrorMessage);
        }

        returnUrl = returnUrl ?? Url.Content("~/");

        // Clear the existing external cookie to ensure a clean login process
        await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);

        ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).ToList();

        ReturnUrl = returnUrl;
    }

    public async Task<IActionResult> OnPostAsync(string returnUrl = null)
    {
        returnUrl = returnUrl ?? Url.Content("~/");

        if (ModelState.IsValid)
        {
            // This doesn't count login failures towards account lockout
            // To enable password failures to trigger account lockout, set lockoutOnFailure: true
            var result = await _signInManager.PasswordSignInAsync(Input.Email, Input.Password, Input.RememberMe, lockoutOnFailure: false);
            if (result.Succeeded)
            {
                _logger.LogInformation("User logged in.");
                return LocalRedirect(returnUrl);
            }
            if (result.RequiresTwoFactor)
            {
                return RedirectToPage("./LoginWith2fa", new { ReturnUrl = returnUrl, RememberMe = Input.RememberMe });
            }
            if (result.IsLockedOut)
            {
                _logger.LogWarning("User account locked out.");
                return RedirectToPage("./Lockout");
            }
            else
            {
                ModelState.AddModelError(string.Empty, "Invalid login attempt.");
                return Page();
            }
        }

        // If we got this far, something failed, redisplay form
        return Page();
    }
}

Answer 1

@ baer999, это как вы можете вызвать страницу входа из Blazor для аутентификации пользователя. Он также предоставляет код для создания кнопки «Вход», «Выход из системы» и т. Д. c.

. Выполните следующие действия:

1. Создайте в папке страниц компонент RedirectToLogin, который перенаправляет пользователя. к представлению входа в систему со следующим кодом:

RedirectToLogin.razor

@inject NavigationManager NavigationManager

@code{
  [Parameter]
  public string ReturnUrl {get; set;}
  protected override  void OnInitialized()
  {
        ReturnUrl = "~/" + ReturnUrl;
        NavigationManager.NavigateTo($"Identity/Account/Login?returnUrl= 
       {ReturnUrl}", forceLoad:true);
  }
}

• Добавьте атрибут Authorize на страницы, которые вы хотите авторизовать, как для Например, компоненты Counter или FetchData:

  @ attribute [Authorize]

Добавьте атрибут вверху компонентов.

Замените следующее код с кодом в компоненте приложения:

App.razor

    <CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" 
                     DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                   @{
                     var returnUrl = 
                NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
                <RedirectToLogin ReturnUrl="@returnUrl"/>

                }
                </NotAuthorized>
                <Authorizing>
                    Wait...
                </Authorizing>
            </AuthorizeRouteView>
     </Found>
    <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
    </NotFound>
 </Router>
</CascadingAuthenticationState>  

Также вставьте NavigationManager в верхней части компонента приложения, например:

@inject NavigationManager NavigationManager

Чтобы проверить это, в верхней части страницы компонента Fetchdata (или Counter, если вам нравится) добавьте директиву @attribute для атрибута Authorize, например: @attribute [Authorize] Когда неаутентифицированный пользователь пытается получить доступ к странице Fetchdata, Authorize Свойство делегата RouteView.NotAuthorized выполняется, и компонент RedirectToLogin отображается с атрибутом параметра, установленным на текущий URL.

Следующее добавление заключается в добавлении кнопок входа и выхода в приложение ...

1. Создайте компонент с именем LoginDisplay.razor в общей папке и добавьте в него следующий код:

     <AuthorizeView>
      <Authorized>
        <a href="Identity/Account/Manage">Hello, 
        @context.User.Identity.Name!</a>
        <form method="post" action="Identity/Account/LogOut">
            <button type="submit" class="nav-link btn btn-link">Log 
        out</button>
        </form>
      </Authorized>
         <NotAuthorized>
            <a href="Identity/Account/Register">Register</a>
            <a href="Identity/Account/Login">Log in</a>
         </NotAuthorized>
      </AuthorizeView>

В компоненте MainLayout добавьте элемент LoginDisplay следующим образом:

<div class="top-row px-4 auth">
    <LoginDisplay />
    <a href="https://docs.microsoft.com/aspnet/" 
         target="_blank">About</a>
</div>

Запустите приложение и проверьте кнопку входа и выхода ...