Blazor静态服务端呈现（静态SSR）身份认证
本文介绍 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）身份认证的更多相关文章
- 移动 APP 端与服务器端用户身份认证的安全方案
最近要做一个项目是java开发后端服务,然后移动APP调用.由于之前没有接触过这块,所以在网上搜索相关的方案.然后搜到下面的一些方案做一些参考. 原文:移动 APP 端与服务器端用户身份认证的安全方案 ...
- 数往知来 ASP.NET 模拟服务器:服务端_静态页面_动态页面的响应<十七>
一.客户端是怎么看到我们的网页的呢/ 在浏览器端,如果用汉语请求的是一普通的HTML网页,呢么我们的IIS服务器, 接收到请求以后,那么从IIS服务器所在的电脑区查找该HTML网页, 找到以后将该 ...
- Vue 服务端渲染（SSR）
什么是服务端渲染? 简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务端渲染的优点 更好的SEO,搜索引 ...
- 服务端渲染（ssr）初了解
之前接触的比较多的是SPA单页面应用,前端路由渲染,对于node服务端渲染刚开始了解到,服务端渲染的话相对于SPA来说有助于SEO优化,首屏加载更快. 和之前的SPA项目不同,之前公司spa的发布部署 ...
- 6.前端基于react,后端基于.net core2.0的开发之路（6） 服务端渲染（SSR）
0.源码地址 https://gitee.com/teambp/ScaffoldClient 这个地址下载对应源码. 1.服务端渲染是啥? 就是在服务器进行页面渲染(废话),当页面展示后,显示的就是 ...
- Vue 爬坑之路（十一）—— 基于 Nuxt.js 实现服务端渲染（SSR）
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
- [原]Nginx+Lua服务端合并静态文件
http://homeway.me 0x01.About 源代码已经上传到github:https://github.com/grasses/nginx-lua-static-merger nginx ...
- 百度vue服务端渲染（ssr）有感
前端各种框架工具层次不穷,日新月异,越学越混乱了快 知乎上看到了一段回复,豁然开朗的感觉. Web 2.0时代最大的思想革命本质不是前后端分离,而是把网页当作独立的应用程序(app).前后端分离只是实 ...
- 实现ssr服务端渲染
前言 前段时间寻思做个个人网站,然后就立马行动了. 个人网站如何实现选择什么技术方案,自己可以自由决定. 刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的. 所以就自己造 ...
- 实现一个类似 http-server 的静态服务 一一 ks-server
最近没事,学习了一下 node,觉得 http-server 这个静态服务很神奇,突发奇想,自己也来实现这么一个静态服务试试.我暂且起名为 static-server. 1. 初始化项目: cd my ...
随机推荐
- njs最详细的入门手册：Nginx JavaScript Engine
原文链接:https://hi.imzlh.top/2024/07/08.cgi 关于njs 首先,njs似乎在国内外都不受关注,资料什么的只有 官网参考手册,出了个问题只能看到Github Issu ...
- 【超实用攻略】SpringBoot + validator 轻松实现全注解式的参数校验
一.故事背景 关于参数合法性验证的重要性就不多说了,即使前端对参数做了基本验证,后端依然也需要进行验证,以防不合规的数据直接进入服务器,如果不对其进行拦截,严重的甚至会造成系统直接崩溃! 本文结合自己 ...
- springboot中事务失效的一些场景以及如何应对
@Transactional是基于AOP的,因此事务发生需要两个条件: 1.添加@Transactional注解 2.使用代理对象 失效场景:同一个类中直接调用的类方法,而被调方法带有@Transac ...
- android实现多线程基础
//创建线程类 class Mythread extends Thread{ @Override public void run(){ //定义行为 } } //实例化线程类 MyThread mt= ...
- Qt+OpenCascade开发笔记（二）：windows开发环境搭建（二）：Qt引入occ库，搭建基础工程模板Demo和发布Demo
前言 Open CASCADE是由Open Cascade SAS公司开发和支持的开源软件开发平台,旨在为特定领域快速开发程序而设计.它是一个面向对象的C++类库,提供了丰富的几何造型.数据交换和 ...
- SptingBoot同时接收文件和对象数据（接收表单数据）
emmm...虽然很简单,而且网上全是教程,但是自己做个笔记映像才会更深刻,还请各位前辈多多指教: @RequestMapping(value = "/eventPush", me ...
- 【C】Re03
一.变量 变量存储了两个东西: 1.内存空间地址 2.内存空间存放的值 本质是给内存地址起了一个别名,允许我们通过别名对内存进行访问 void variable01() { int a = 100; ...
- 植物大战僵尸杂交版v2.1整合包全解锁+高清工具
植物大战僵尸杂交版v2.1整合包全解锁+高清工具 引言 <植物大战僵尸>作为一款经典的塔防游戏,自2009年发布以来,就以其独特的游戏机制和幽默的风格赢得了全球玩家的喜爱.随着游戏的不 ...
- Git的GPG签名 —— Tag签名 Verified验证，防伪造的gitee/github commit验证
相关资料: 如何使用git通过ssh协议拉取gitee上的项目代码--如何正确的免密使用git 不论是gitee还是GitHub都有两种公钥设置,一种是ssh公钥,另一种则是GPG公钥.ssh公钥是为 ...
- 【转载】 Parallel Computing in Python using mpi4py
原地址: https://research.computing.yale.edu/sites/default/files/files/mpi4py.pdf ====================== ...