关于Blazor

由于在国内, Blazor一点都不普及, 在阅读此文前, 建议读者先翻看我之前写的随笔, 了解Blazor Server Side的特点.

在一段时间内, 我会写一些解说分析型的 "为什么选择 Blazor Server Side" , 在适当的时候再写快速入门系列.(无论是针对编程新学者还是多年经验人士)

验证码

我们很多场合都实现过图片验证码.

图片验证码的主要关键是呈现图片, 需要一个URL, 而这个URL需要传递参数以确定显示什么东西.

这个验证码如何在服务器保存, 如何传递一个参数公开给客户端, 还不能让别人解密这个参数破解验证码, 都是麻烦事

这个例子是讲述如何用极短的 "单页" 代码, 实现验证过程.

先上图:

再上代码:

 @page "/BlazorVerificationCode"

 <p>
(Blazor) A sample for how to show verification code and verify it.
</p> @inject IJSRuntime jsr @{
if (imgurl == null) MakeNewImage();
} <img style="border:solid 1px #ccc" src="@imgurl" />
<button @onclick="MakeNewImage">Renew</button>
<hr />
<div>Type the number in image</div>
<EditForm Model="this" OnSubmit="DoCheck">
<input type="text" @bind-value="inp_code" style="padding:5px" />
<button>Check</button>
</EditForm> @code{
string inp_code;
string vericode;
string imgurl; void DoCheck()
{
string msg = "You typed a wrong value";
if (inp_code == vericode)
msg = "Yes the number is " + vericode;
jsr.InvokeAsync<object>("alert", msg);
} void MakeNewImage()
{ vericode = new Random().Next(100000, 999999).ToString(); using SkiaSharp.SKBitmap bmp = new SkiaSharp.SKBitmap(200, 80); using (SkiaSharp.SKCanvas canvas = new SkiaSharp.SKCanvas(bmp))
{
canvas.Clear(SkiaSharp.SKColors.White);
using SkiaSharp.SKPaint skp = new SkiaSharp.SKPaint();
skp.Color = SkiaSharp.SKColors.Red;
skp.TextSize = 40;
canvas.DrawText(vericode, 30, 55, skp);
canvas.Save();
} using System.IO.MemoryStream ms = new System.IO.MemoryStream();
using SkiaSharp.SKManagedWStream ws = new SkiaSharp.SKManagedWStream(ms);
bmp.Encode(ws, SkiaSharp.SKEncodedImageFormat.Jpeg, 100); imgurl = "data:image/jpeg;base64," + Convert.ToBase64String(ms.ToArray());
} }

展现效果如下:


下面是解说

整个代码只有 60 行.

已经包含了,展示界面, 生成图片,传递和测试验证码的各部分.

代码先用随机数确保生成 vericode = new Random().Next(100000, 999999).ToString();

然后根据vericode生成一个图片, 转换成base64格式到 imgurl 变量

最后通过 <img style="border:solid 1px #ccc" src="@imgurl" /> 呈现出来.

我上一篇随笔有介绍,  Blazor是'活'的, 是在服务器上生存着的.

<button @onclick="MakeNewImage">Renew</button> 在服务器上有活动的instance, 而在客户端浏览器也有'镜像副本'

当浏览器的'镜像副本'被用户点击后, Blazor就会把事件回传给服务器, 触发服务器还在运行中的 MakeNewImage

MakeNewImage 会重新生成新的 vericode 与 imgurl , 并且按照Blazor默认行为, 会自动重新Render当前控件的内容,  所以 <img> 的 src 会被重新设置到新的imgurl , 展现新的图片给用户.

当用户在 <input type="text" @bind-value="inp_code" style="padding:5px" /> 输入验证码后,  Blazor会根据onchange事件, 把value发送到服务器, 根据 @bind-value="inp_code" 这个配置, 把值保存到 inp_code 上.

当 <button>Check</button> 被按下后,  OnSubmit="DoCheck" 会触发,  那么 DoCheck() 的代码, 便可以判断 inp_code == vericode 是否相同.

这个过程中, 和其他框架做法的最大不同是, Blazor 保持了服务器代码运行的上下文, 因为上下文被保持了, 所以就不需要额外的传递了.

这就是为什么要   选择 Blazor Server Side (一)   :  使用上下文来节省时间

最后:

如果把例子换成 发送短信/邮件验证码 , 原理是一样的. 都无需利用其他代码或资源去储存传递验证码.

如果因任何原因, 页面被刷新了, 那么这个内存中的上下文就会释放, 丢失, 验证码也失效, 需要重发重试.

如果是通常注册后的邮件激活URL , 这个就不合适了. 需要找外部储存激活URL相关的数据.

[Asp.Net Core] 为什么选择 Blazor Server Side (一) 快速实现图片验证码的更多相关文章

  1. [Asp.Net Core] 关于 Blazor Server Side 的一些杂项, 感想

    在2016年, 本人就开始了一个内部项目, 其特点就是用C#构建DOM树, 然后把DOM同步到浏览器中显示. 并且在一些小工程中使用. 3年下来, 效果很不错, 但因为是使用C#来构建控件树, 在没有 ...

  2. .NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新

    我们都知道在6月12日的时候微软发布了.NET Core 3.0的第6个预览版.针对.NET Core 3.0的发布我们国内的微软MVP-汪宇杰还发布的官翻版的博文进行了详细的介绍.具体的可以关注&q ...

  3. 【ASP.NET Core】Blazor 服务器端的 Base Path

    提到 Blazor,没准就会有人问:选用 Server 端还是 WebAssembly(客户端)?其实这个不用纠结,老周个人的原则是:Server 端优先.理由很单纯:服务器端虽然消耗服务器上的资源, ...

  4. 通过 Docker Compose 组合 ASP NET Core 和 SQL Server

    目录 Docker Compose 简介 安装 WebApi 项目 创建项目 编写Dockfile Web MVC 项目 创建项目 编写Dockfile 编写 docker-compose.yml文件 ...

  5. .NET Core 3.0预览版7中的ASP.NET Core和Blazor更新

    .NET Core 3.0 Preview 7现已推出,它包含一系列ASP.NET Core和Blazor的新更新. 以下是此预览中的新功能列表: 最新的Visual Studio预览包括.NET C ...

  6. 【ASP.NET Core】Blazor+MiniAPI完成文件下载

    今天老周要说的内容比较简单,所以大伙伴们不必紧张,能识字的都能学会. 在开始之前先来一段废话. 许多人都很关心,blazor 用起来如何?其实也没什么,做Web的无非就是后台代码+前台HTML(包含J ...

  7. linux+asp.net core+nginx+sql server

    Linux Disibutaion:Ubuntu 16.04.1 LTS Web Server:Nginx.Kestrel 安装.net core sudo sh -c 'echo "deb ...

  8. Asp.net core Identity + identity server + angular 学习笔记 (第一篇)

    用了很长一段时间了, 但是一直没有做过任何笔记,感觉 identity 太多东西要写了, 提不起劲. 但是时间一久很多东西都记不清了. 还是写一轮吧. 加深记忆. 这是 0-1 的笔记, 会写好多篇. ...

  9. 第16章 使用ASP.NET Core Identity - Identity Server 4 中文文档(v1.0.0)

    注意 对于任何先决条件(例如模板),首先要查看概述. IdentityServer旨在提供灵活性,其中一部分允许您为用户及其数据(包括账户密码)使用所需的任何数据库.如果您从新的用户数据库开始,那么A ...

随机推荐

  1. Netty源码分析之客户端启动过程

    一.先来看一下客户端示例代码. public class NettyClientTest { public void connect(int port, String host) throws Exc ...

  2. 【JBOSS】控制台数据库连接信息

    数据库连接 信息 进入         在这个页面中(IP和端口已自己的为主):ConnectionCount 这个项目代表在服务开启后,总共使用的连接数!ConnectionCreatedCount ...

  3. Spring-Context之七:使用p-namesapce和c-namespace简化bean的定义

    在Spring中定义bean的方式多种多样,即使使用xml的方式来配置也能派生出很多不同的方式. 比如如下的bean定义: 1 2 3 4 5 6 7 8 9 10 11 12 <beans x ...

  4. leetcode 102. Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  5. 转载:关于 WebBrowser只对浏览器外应用程序以及在Internet Explorer 中以提升权限运行的应用程序启用

    我是根据很多大神写的博客,以及我自己在做项目的时候做的关于提升Silverlight 中WebBrowser 提升信任的问题的总结: 1)选中Silverlight主程序,右键“属性”---“Sliv ...

  6. guice框架的入门使用

    guice框架是一种类似于spring的ioc容器的一种框架,使用简单,比較轻量级的一个框架,速度极快,灵活性极强,如今就先来写几个guice的程序. 在这里我就不给出guice的jar包,这些都能够 ...

  7. 框架搭建资源 (一) V(视图)C(控制)模式

    pom.xml <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncodin ...

  8. Linux内核模块编程——Hello World模块

    Linux内核模块编程 编程环境 Ubuntu 16.04 LTS 什么是模块 内核模块的全称是动态可加载内核模块(Loadable Kernel Modul,KLM),可以动态载入内核,让它成为内核 ...

  9. javaScript中with函数用法实例分析

    javaScript 中的 with 函数 ,即所谓的with 语句,可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性,要给对象创建新的属性,必须明确地引用该对象. with 函 ...

  10. ajax单删

    通过点击事件获取相应数据的id,将id传到的控制器,根据id执行删除的sql语句,执行官删除:同时ajax的有点就是快捷方便,无刷新,增强用户的体验. <?php namespace app\i ...