为什么要有验证码呢:一定程度上防止机器登录,爬虫读取数据,恶意注册等
我们也可以使用开源的图片验证码LazyCaptcha和开源的滑动验证码LazySlideCaptcha
如果没有验证码 通过浏览器F12打开检查器,截取到后台的请求后,可以通过模拟Ajax请求实现自动登录,就不用手动输入了
后端实现
Tools工具类
C#
public class Tools
{
public static string CreateValidateString()
{
//准备一组供验证码展示的数据
string chars = "adbcadjas;dasjflkhaflajpoahr";
Random random = new(DateTime.Now.Millisecond);
string validateString = "";
int length = 4;
for (int i = 0; i < length; i++)
{
validateString += chars[random.Next(chars.Length)];
}
return validateString;
}
public static Byte[] CreteValidataCodeBuffer(string validateCode)
{
//bmp->位图
//1.创建画布,设置画布的长宽
using Bitmap bitmap = new(200,60);
//2.创建画笔,告诉画笔在哪个画布上画画
Graphics graphics = Graphics.FromImage(bitmap);
//用白色覆盖画布,并清除画布上所有的内容
graphics.Clear(Color.White);
//设置字体的参数(设置字体的名称、大小、粗细以及斜体)
Font font = new("微软雅黑", 12, FontStyle.Bold | FontStyle.Italic);
//通过graphics.MeasureString方法计算字符串长度
var Size = graphics.MeasureString(validateCode, font);
//通过长度生成新的画布
//1.98 Convert.ToInt32(1.98) = 1
//向上取整:天花板函数,向下取整:地板函数
using Bitmap bitmaptext = new(Convert.ToInt32(Math.Ceiling(Size.Width)), Convert.ToInt32(Math.Ceiling(Size.Height)));
//将文字写入,生成图片
Graphics graphicstext = Graphics.FromImage(bitmaptext);
//把图片缩放到原画布上
//配置画图参数
//设置颜色刷范围参数
RectangleF rf = new(0,0,bitmap.Width,bitmap.Height);
//设置刷子的颜色(设置为渐变)
LinearGradientBrush brush = new(rf,Color.Red,Color.DarkBlue,1.2f,true);
//将字符串绘制到场景中
graphicstext.DrawString(validateCode, font, brush, 0, 0);
graphics.DrawImage(bitmaptext, 10, 10, 190, 50);
//将图片放到缓冲区中
//创建一个用于保存图片的缓冲器
MemoryStream memoryStream = new();
//把图片保存到缓冲区
bitmap.Save(memoryStream, ImageFormat.Jpeg);
//图片已经放在缓冲区了,bitmap对象没有用了,释放资源
bitmap.Dispose();
return memoryStream.ToArray();
}
}
MemoryHelper
C#
public class MemoryHelper
{
private static IMemoryCache _memoryCache;
static MemoryHelper()
{
if (_memoryCache == null)
{
_memoryCache = new MemoryCache(new MemoryCacheOptions());
}
}
public static void SetMemory(string key,object value,int expireMins)
{
_memoryCache.Set(key,value,TimeSpan.FromMinutes(expireMins));
}
public static object GetMemory(string key)
{
return _memoryCache.Get(key);
}
}
Controller
C#
//验证码
[HttpGet]
public IActionResult GetValidateCodeImage(string code)
{
Console.WriteLine(code);
var validateCodeString = Tools.CreateValidateString();
//将验证码记入缓存中
MemoryHelper.SetMemory(code, validateCodeString,1);
//接受图片返回的二进制流
byte[] buffer = Tools.CreteValidataCodeBuffer(validateCodeString);
return File(buffer, @"image/jpeg");
}
效果图
![](https://ichistudio.cn/wp-content/uploads/2023/10/图片.png)
前端刷新
HTML
HTML
<img src = "validateCodeRef" alt = "" @click = "changeValidateCode"/>
Vue+JavaScript
JavaScript
import{validateCodeRef,changeValidateCode} from ""
const validateCode = "localhost:port/url"
onMounted(() =>{
validateCodeRef.value = validateCode+"?t="+getGuid(); //获取随机标识符
});
getValidate
JavaScript
const validateCode = "localhost:port/url"
export const validateCodeRef = ref();
export const changeValidateCode = () =>{
validateCodeRef.value = validateCode+"?t="+getGuid();
};