.NetCore登录验证码的实现（.Net core login captcha）

引言#

之前项目紧的时候，非功能要求都是能省则省，现在项目完成了；验收时有了安全性要求，自然需要登录验证码。

国外的登录安全验证（captcha）一般用的reCAPTCHA ，也就是经常见到的打勾；

有的时候还会触发别的题目，这种验证方式固然好；但不符合国情。

国内用的最多的还是图形验证码。

解决方案#

登录验证码是防机器人登录的一种方式，这是一种系统安全手段；因此你的验证码值是不能告诉前端的，那怎么才能判断用户输入的验证码对不对呢？

我的解决方法是Session

启用Session的代码如下:

1
public void ConfigureServices(IServiceCollection services)
2
{
3
    //...
4

5
    services.AddDistributedMemoryCache();
6

7
    services.AddSession(options =>
8
    {
9
        options.IdleTimeout = TimeSpan.FromSeconds(60);
10
        options.Cookie.HttpOnly = true;
11
        options.Cookie.IsEssential = true;
12
    });
13
    services.Configure<CookiePolicyOptions>(options =>
14
    {
15
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
16
        options.CheckConsentNeeded = context => false;
17
        options.MinimumSameSitePolicy = SameSiteMode.None;
18
    });
19
}
20
public void Configure(IApplicationBuilder app)
21
{
22
    //...
23
    app.UseSession();
24
    app.UseCookiePolicy();
25
}

图形验证码的生成我使用了一个开源的库:SixLaborsCaptcha

验证码的使用可查看官网示例，我的代码如下：

1
using SixLaborsCaptcha.Mvc.Core;
2
...
3
    public void ConfigureServices(IServiceCollection services)
4
    {
5
      services.AddSixLabCaptcha(x =>
6
      {
7
        x.DrawLines = 4;
8
      });
9
    }
10
...

1
/// <summary>
2
/// 获得验证码图片
3
/// </summary>
4
/// <param name="sixLaborsCaptcha"></param>
5
/// <param name="now">时间戳,前端使用Date.now()生成</param>
6
/// <returns></returns>
7
[HttpGet]
8
[Route("[action]")]
9
public async Task<FileResult> GetCaptchaImage([FromServices] ISixLaborsCaptchaModule sixLaborsCaptcha, long? now)
10
{
11
    now ??= DateTime.Now.Ticks;
12

13
    string key = Extensions.GetUniqueKey(6);
14
    HttpContext.Session.SetString("CaptchaTime", now.ToString());
15
    HttpContext.Session.SetString("CaptchaKey", key);
16
    await HttpContext.Session.CommitAsync();
17

18
    _log.LogInformation("current session is {session}", HttpContext.Session.Id);
19
    _log.LogInformation("key is {key}", key);
20
    var imgText = sixLaborsCaptcha.Generate(key);
21
    return File(imgText, "Image/Png");
22
}

验证码校验：

1
[HttpPost("[Action]")]
2
public async Task<UserInfo> Login(LoginInfo loginInfo)
3
{
4
    _log.LogInformation("current session is {session}", HttpContext.Session.Id);
5

6
    await HttpContext.Session.LoadAsync();
7
    _log.LogInformation("after load current session is {session}", HttpContext.Session.Id);
8

9
    if (string.IsNullOrEmpty(loginInfo.Captcha))
10
    {
11
        return BadRequest("请输入验证码!");
12
    }
13

14
    var timeStr = HttpContext.Session.GetString("CaptchaTime");
15
    if (string.IsNullOrEmpty(timeStr) || !long.TryParse(timeStr, out long result))
16
    {
17
        return BadRequest("登陆无效,请刷新后重试");
18
    }
19

20
    var time = new DateTime(result);
21
    if (time.AddMilliseconds(1) > DateTime.Now)
22
    {
23
        return BadRequest("验证码无效,请刷新后重试");
24
    }
25

26
    if (loginInfo.Captcha.ToLower() != HttpContext.Session.GetString("CaptchaKey")?.ToLower())
27
    {
28
        return BadRequest("验证码错误");
29
    }
30

31
    var info = Login(loginInfo.Account, loginInfo.Password);
32

33
    return info;
34
}

验证码校验不区分大小写，同时我设置了一分钟超时时间

常见问题#

HttpContext.Session.Id数据不断变化(登陆无效,请刷新后重试)的解决方法

session依赖客户端的cookie，在请求图片的时候服务端会在返回头中添加Set-Cookie: .AspNetCore.Session=xxxx，在登录时依据此cookie取得session然后才能判断验证码的正误；因此应首先在Chrome的Network中查看登录请求是否携带.AspNetCore.Session的cookie；若无，可检查以下几个方向：

跨域问题

生成图片的API和登录的API最好属于一个域，若存在跨域问题；一般情况下不会发送cookie，需在前端发起请求时添加withCredentials头，具体可查阅使用的http库文档。

分布式缓存配置问题

session默认使用基于内存的缓存(AddDistributedMemoryCache)，若项目本身使用了基于redis的缓存(AddStackExchangeRedisCache)，则默认使用了redis缓存，在redis缓存配置有误时，session无法正常工作，因此不会向前端添加Set-Cookie: .AspNetCore.Session=xxxx，同时系统无任何异常，此时可尝试去掉验证码登录逻辑确认配置正常

自动登录方法

在启用验证码登录后每次测试都需要手输验证码，这让自动化测试变得麻烦；因此我添加了一种额外的基于时间的OTP验证码。使用Otp.NET实现，在验证验证码之前验证OTP code即可。

配合Vaultwarden 可以实现无感登录。

引言#

解决方案#

常见问题#

参考资料#