Question

我使用Blazor和dotnet core 3.1.1创建了一个示例服务器端应用程序，并搭建了登录和注册页面（Identity Scaffold）。

现在的问题是我想将cshtml文件的功能合并到给定的剃刀文件中。

是的：我想将第1步的功能（请参见屏幕截图）放入Counter.razor文件（第2步）中。

问题是cshtml将剃刀中未知的属性，类和文件考虑在内文件。

例如：

公共异步任务OnPostAsync（string returnUrl = null）
公共异步任务OnGetAsync（string returnUrl = null）
Login.cshtml.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调用登录页面以验证用户身份的方法。它还提供了用于创建“登录”按钮，“注销”按钮等的代码。

执行以下操作：

在Pages文件夹中创建一个名为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 [授权]

在组件顶部添加属性。

将以下代码替换为App组件中的代码：

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>

还将导航管理器注入到App组件的顶部，如下所示：

@inject NavigationManager NavigationManager

要对此进行测试，请在Fetchdata（或“计数器”，如果您愿意）组件页面的顶部，为Authorize属性添加@attribute指令，如下所示：@attribute [Authorize]未经身份验证的用户尝试访问Fetchdata页面时，执行AuthorizeRouteView.NotAuthorized委托属性，并使用参数属性设置为当前url呈现RedirectToLogin组件。

以下添加内容是向您的应用添加登录和注销按钮...

在“共享”文件夹中创建一个名为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>

运行您的应用并测试登录和注销按钮...

将脚手架的登录页面合并到剃刀页面中

1 个答案:

RedirectToLogin.razor

App.razor