本文介绍 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);

    }

}

Blazor静态服务端呈现（静态SSR）身份认证的更多相关文章

  1. 移动 APP 端与服务器端用户身份认证的安全方案

    最近要做一个项目是java开发后端服务,然后移动APP调用.由于之前没有接触过这块,所以在网上搜索相关的方案.然后搜到下面的一些方案做一些参考. 原文:移动 APP 端与服务器端用户身份认证的安全方案 ...

  2. 数往知来 ASP.NET 模拟服务器:服务端_静态页面_动态页面的响应<十七>

      一.客户端是怎么看到我们的网页的呢/ 在浏览器端,如果用汉语请求的是一普通的HTML网页,呢么我们的IIS服务器, 接收到请求以后,那么从IIS服务器所在的电脑区查找该HTML网页, 找到以后将该 ...

  3. Vue 服务端渲染（SSR）

    什么是服务端渲染? 简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务端渲染的优点 更好的SEO,搜索引 ...

  4. 服务端渲染（ssr）初了解

    之前接触的比较多的是SPA单页面应用,前端路由渲染,对于node服务端渲染刚开始了解到,服务端渲染的话相对于SPA来说有助于SEO优化,首屏加载更快. 和之前的SPA项目不同,之前公司spa的发布部署 ...

  5. 6.前端基于react,后端基于.net core2.0的开发之路（6） 服务端渲染（SSR）

    0.源码地址 https://gitee.com/teambp/ScaffoldClient  这个地址下载对应源码. 1.服务端渲染是啥? 就是在服务器进行页面渲染(废话),当页面展示后,显示的就是 ...

  6. Vue 爬坑之路（十一）—— 基于 Nuxt.js 实现服务端渲染（SSR）

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  7. [原]Nginx+Lua服务端合并静态文件

    http://homeway.me 0x01.About 源代码已经上传到github:https://github.com/grasses/nginx-lua-static-merger nginx ...

  8. 百度vue服务端渲染（ssr）有感

    前端各种框架工具层次不穷,日新月异,越学越混乱了快 知乎上看到了一段回复,豁然开朗的感觉. Web 2.0时代最大的思想革命本质不是前后端分离,而是把网页当作独立的应用程序(app).前后端分离只是实 ...

  9. 实现ssr服务端渲染

    前言 前段时间寻思做个个人网站,然后就立马行动了.  个人网站如何实现选择什么技术方案,自己可以自由决定.  刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的.  所以就自己造 ...

  10. 实现一个类似 http-server 的静态服务 一一 ks-server

    最近没事,学习了一下 node,觉得 http-server 这个静态服务很神奇,突发奇想,自己也来实现这么一个静态服务试试.我暂且起名为 static-server. 1. 初始化项目: cd my ...

随机推荐

  1. Memcache 与 Memcached 的区别

    Memcached 从0.2.0开始,要求PHP版本>=5.2.0,Memcache 要求PHP版本>=4.3. Memcached 最后发布时间为2018-12-24,Memcache ...

  2. 算法题练习,Solo和koko分糖 ,整数拆分, Cookies 分饼干

    目录 1. Candy Solo和koko分糖 2. 整数拆分 3=1+1+1 3=1+2 3=3 3. Cookies 分饼干 1. Candy Solo和koko分糖 如果可以分给弟弟,必定满足全 ...

  3. [oeasy]python0139_尝试捕获异常_ try_except_traceback

                                                          - 不但要有自己的报错 - 还要保留系统的报错 - 有可能吗? ​ ### 保留报错 ​ ! ...

  4. 【漏洞分析】Li.Fi攻击事件分析：缺乏关键参数检查的钻石协议

    背景信息 2024 年 7 月 16日,Li.Fi 协议遭受黑客攻击,漏洞成因是钻石协议中 diamond 合约新添加的 facet 合约没有对参数进行检查,导致 call 函数任意执行.且 diam ...

  5. Vue export & export default & import 总结

    Vue export & export default & import 总结 by:授客 QQ:1033553122 1.   实践环境 Vue 2.9.6 2.   简介 在ES6 ...

  6. Python 使用Python操作xmind文件

    使用Python操作xmind文件 by:授客 QQ:1033553122   测试环境 Win10 Python 3.5.4 XMind-1.2.0.tar.gz 下载地址: https://fil ...

  7. 【SpringBoot】12 Web开发 Part3 SpringMVC扩展

    例如我们习惯于SSM的xml配置, 这是使用MVC的容器跳转方式 <?xml version="1.0" encoding="UTF-8"?> &l ...

  8. 【转载】 CUDA中的Unified Memory

    为了结合上篇 文章   https://www.cnblogs.com/devilmaycry812839668/p/13264080.html 对RTX显卡是否能够实现P2P通信功能,同时专业级别显 ...

  9. 强化学习运行环境，atari 2600 游戏模拟器，atari-py库 —— 无法运行游戏，pacman，surround，报错: Segmentation fault (core dumped)

    atari2600运行环境: https://github.com/openai/atari-py 安装环境,以及导入 rom文件这里不进行介绍(前文已介绍): 测试游戏环境rom文件能否正常加载如内 ...

  10. 使用Linux桌面壁纸应用variety发现的一些问题

    本人Ubuntu18.04 Desktop系统安装桌面壁纸应用variety,设置如下: 使用大致两个小时,主机为NVIDIA显卡,查看显存使用情况: 可以发现随着使用时间的增加variety会逐渐增 ...