Blazor靜態服務端呈現（靜態SSR）身份認證

known發表於2024-09-17
Blazor服務端

本文介紹 Blazor 靜態服務端呈現（靜態 SSR）模式下，使用者登入身份認證是如何實現的。

1. SSR 簡介

SSR 是伺服器側呈現，HTML 是由伺服器上的 ASP.NET Core 執行時生成，透過網路傳送到客戶端，供客戶端的瀏覽器顯示。SSR 分兩種型別：

  • 靜態 SSR：伺服器生成靜態 HTML，它不提供使用者互動性或維護 Razor 元件狀態，透過 HTTP 協議進行通訊。
  • 互動式 SSR：Blazor 事件允許使用者互動，並且 Razor 元件狀態由 Blazor 框架維護，透過 SignalR 連線使用 WebSocket 協議進行通訊。

2. 為什麼用靜態 SSR

由於互動式 SSR 存在斷線重連的問題，影響使用者體驗，所以採用靜態 SSR 元件呈現服務端內容，為了增加前端互動體驗，採用 JavaScript 作為前端互動。

3. 實現思路

  • 在 App.razor 檔案中使用級聯引數的 HttpContext 物件獲取使用者是否登入
  • 將使用者登入資訊傳遞給路由元件的級聯 Context 物件，
  • 在所有子元件中，使用級聯引數的 Context 物件獲取使用者資訊
  • 使用 HttpContext.SignInAsync 和 HttpContext.SignOutAsync 實現登入和登出

4. 實現步驟

  • 建立 UserInfo 和 Context 類
public class UserInfo
{
    public string UserName { get; set; }
}

public class Context
{
    public UserInfo CurrentUser { get; set; }
}
  • 建立 App.razor 檔案
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<body>
    <Routes User="user" />
</body>
</html>

@code {
    [CascadingParameter] private HttpContext HttpContext { get; set; }
    private UserInfo user;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        if (HttpContext.User.Identity.IsAuthenticated)
            user = new UserInfo { UserName = HttpContext.User.Identity.Name };
        else
            user = null;
    }
}
  • 建立 Route.razor 檔案
<CascadingValue Value="context" IsFixed>
    <Router AppAssembly="typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" />
        </Found>
        <NotFound></NotFound>
    </Router>
</CascadingValue>

@code {
    private UIContext context;

    [Parameter] public UserInfo User { get; set; }

    protected override void OnInitialized()
    {
        context = new Context();
        context.CurrentUser = User;
        base.OnInitialized();
    }
}
  • 建立 LoginBox.razor 檔案
@if (Context.CurrentUser == null)
{
    <span onclick="login()">登入</span>
    <script>
        function login() { fetch('/signin').then(res => location.reload()); }
    </script>
}
else
{
    <span onclick="logout()">退出</span>
    <script>
        function logout() { fetch('/signout').then(res => location.reload()); }
    </script>
}

@code {
    [CascadingParameter] private Context Context { get; set; }
}
  • 建立 AuthController.cs 檔案
public class AuthController : ControllerBase
{
    private const string AuthType = "App_Cookie";

    [Route("signin")]
    public async Task Login([FromBody] UserInfo info)
    {
        var claims = new List<Claim>() { new(ClaimTypes.Name, info.UserName) };
        var identity = new ClaimsIdentity(claims, AuthType);
        var principal = new ClaimsPrincipal(identity);
        await HttpContext.SignInAsync(AuthType, principal);
    }

    [Route("signout")]
    public async Task Logout()
    {
        await HttpContext.SignOutAsync(AuthType);
    }
}

相關文章