用Abp实现两步验证(Two-Factor Authentication,2FA)登录(三):免登录验证

article/2025/10/6 14:40:31

文章目录

    • 原理
    • 修改请求报文
    • 配置JwtBearerOptions
    • 生成Token
    • 校验Token
    • 修改认证EndPoint
    • 修改前端
      • 登录
      • 登出
    • 最终效果
    • 项目地址

免登录验证是用户在首次两步验证通过后,在常用的设备(浏览器)中,在一定时间内不需要再次输入验证码直接登录。

常见的网页上提示“7天免登录验证”或“信任此设备,7天内无需两步验证”等内容。
这样可以提高用户的体验。但同时也会带来一定的安全风险,因此需要用户自己决定是否开启。
在这里插入图片描述

原理

常用的实现方式是在用户登录成功后,生成一个随机的字符串Token,将此Token保存在用户浏览器的 cookie 中,同时将这个字符串保存在用户的数据库中。当用户再次访问时,如果 cookie 中的字符串和数据库中的字符串相同,则免登录验证通过。流程图如下:

在这里插入图片描述

为了安全,Token采用对称加密传输存储,同时参与校验的还有用户Id,以进一步验证数据一致性。Token存储于数据库中并设置过期时间(ExpireDate)
认证机制由JSON Web Token(JWT)实现,通过自定义Payload声明中添加Token和用户Id字段,实现校验。

下面来看代码实现:

修改请求报文

项目添加对Microsoft.AspNetCore.Authentication.JwtBearer包的引用

<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="7.0.4" />

在Authenticate方法参数AuthenticateModel中添加RememberClient和RememberClientToken属性,

当首次登录时,若用户选择免登录,RememberClient为true,
非首次登录时,系统校验RememberClientToken合法性,是否允许跳过两步验证。

public class AuthenticateModel
{..public bool RememberClient { get; set; }public string RememberClientToken { get; set; }
}

同时返回值中添加RememberClientToken,用于首次登录生成的Token

public class AuthenticateResultModel
{...public string RememberClientToken { get; set; }
}

配置JwtBearerOptions

在TokenAuthController的Authenticate方法中,添加validation参数:

var validationParameters = new TokenValidationParameters
{ValidAudience = _configuration.Audience,ValidIssuer = _configuration.Issuer,IssuerSigningKey = _configuration.SecurityKey
};

在默认的AbpBoilerplate模板项目中已经为我们生成了默认配置

 "Authentication": {"JwtBearer": {"IsEnabled": "true","SecurityKey": "MatoAppSample_C421AAEE0D114E9C","Issuer": "MatoAppSample","Audience": "MatoAppSample"}},

生成Token

在TokenAuthController类中

添加自定义Payload声明类型

public const string USER_IDENTIFIER_CLAIM = "USER_IDENTIFIER_CLAIM";
public const string REMEMBER_CLIENT_TOKEN = "REMEMBER_CLIENT_TOKEN";

添加生成Token的方法CreateAccessToken,它将根据自定义Payload声明,validationParameters生成经过SHA256加密的Token,过期时间即有效期为7天:

private string CreateAccessToken(IEnumerable<Claim> claims, TokenValidationParameters validationParameters)
{var now = DateTime.UtcNow;var expiration = TimeSpan.FromDays(7);var signingCredentials = new SigningCredentials(validationParameters.IssuerSigningKey, SecurityAlgorithms.HmacSha256);var jwtSecurityToken = new JwtSecurityToken(issuer: validationParameters.ValidIssuer,audience: validationParameters.ValidAudience,claims: claims,notBefore: now,expires: now.Add(expiration),signingCredentials: signingCredentials);return new JwtSecurityTokenHandler().WriteToken(jwtSecurityToken);
}

更改方法TwoFactorAuthenticateAsync的签名,添加rememberClient和validationParameters形参

在该方法中添加生成Token的代码

if (rememberClient)
{if (await settingManager.GetSettingValueAsync<bool>(AbpZeroSettingNames.UserManagement.TwoFactorLogin.IsRememberBrowserEnabled)){var expiration = TimeSpan.FromDays(7);var tokenValidityKey = Guid.NewGuid().ToString("N");var accessToken = CreateAccessToken(new[]{new Claim(USER_IDENTIFIER_CLAIM, user.ToUserIdentifier().ToString()),new Claim(REMEMBER_CLIENT_TOKEN, tokenValidityKey)}, validationParameters);await _userManager.AddTokenValidityKeyAsync(user, tokenValidityKey,DateTime.Now.Add(expiration));return accessToken;}
}

校验Token

添加校验方法TwoFactorClientRememberedAsync,它表示校验结果是否允许跳过两步验证

public async Task<bool> TwoFactorClientRememberedAsync(UserIdentifier userIdentifier, string TwoFactorRememberClientToken, TokenValidationParameters validationParameters)
{if (!await settingManager.GetSettingValueAsync<bool>(AbpZeroSettingNames.UserManagement.TwoFactorLogin.IsRememberBrowserEnabled)){return false;}if (string.IsNullOrWhiteSpace(TwoFactorRememberClientToken)){return false;}try{var tokenHandler = new JwtSecurityTokenHandler();if (tokenHandler.CanReadToken(TwoFactorRememberClientToken)){try{SecurityToken validatedToken;var principal = tokenHandler.ValidateToken(TwoFactorRememberClientToken, validationParameters, out validatedToken);var userIdentifierString = principal.Claims.First(c => c.Type == TwoFactorAuthorizationManager.USER_IDENTIFIER_CLAIM);if (userIdentifierString == null){throw new SecurityTokenException(TwoFactorAuthorizationManager.USER_IDENTIFIER_CLAIM + " invalid");}var tokenValidityKeyInClaims = principal.Claims.First(c => c.Type == TwoFactorAuthorizationManager.REMEMBER_CLIENT_TOKEN);var currentUserIdentifier = UserIdentifier.Parse(userIdentifierString.Value);var user = _userManager.GetUserById(currentUserIdentifier.UserId);var isValidityKetValid = AsyncHelper.RunSync(() => _userManager.IsTokenValidityKeyValidAsync(user, tokenValidityKeyInClaims.Value));if (!isValidityKetValid){throw new SecurityTokenException(REMEMBER_CLIENT_TOKEN + " invalid");}return userIdentifierString.Value == userIdentifier.ToString();}catch (Exception ex){LogHelper.LogException(ex);}}}catch (Exception ex){LogHelper.LogException(ex);}return false;
}

更改方法IsTwoFactorAuthRequiredAsync添加twoFactorRememberClientToken和validationParameters形参

添加对TwoFactorClientRememberedAsync的调用

public async Task<bool> IsTwoFactorAuthRequiredAsync(AbpLoginResult<Tenant, User> loginResult, string TwoFactorRememberClientToken, TokenValidationParameters validationParameters)
{if (!await settingManager.GetSettingValueAsync<bool>(AbpZeroSettingNames.UserManagement.TwoFactorLogin.IsEnabled)){return false;}if (!loginResult.User.IsTwoFactorEnabled){return false;}if ((await _userManager.GetValidTwoFactorProvidersAsync(loginResult.User)).Count <= 0){return false;}if (await TwoFactorClientRememberedAsync(loginResult.User.ToUserIdentifier(), TwoFactorRememberClientToken, validationParameters)){return false;}return true;
}

修改认证EndPoint

在TokenAuthController的Authenticate方法中,找到校验代码片段,对以上两个方法的调用传入实参

...
await userManager.InitializeOptionsAsync(loginResult.Tenant?.Id);
string twoFactorRememberClientToken = null;
if (await twoFactorAuthorizationManager.IsTwoFactorAuthRequiredAsync(loginResult, model.RememberClientToken, validationParameters))
{if (string.IsNullOrEmpty(model.TwoFactorAuthenticationToken)){return new AuthenticateResultModel{RequiresTwoFactorAuthenticate = true,UserId = loginResult.User.Id,TwoFactorAuthenticationProviders = await userManager.GetValidTwoFactorProvidersAsync(loginResult.User),};}else{twoFactorRememberClientToken = await twoFactorAuthorizationManager.TwoFactorAuthenticateAsync(loginResult.User, model.TwoFactorAuthenticationToken, model.TwoFactorAuthenticationProvider, model.RememberClient, validationParameters);}
}

完整的TwoFactorAuthorizationManager代码如下:

public class TwoFactorAuthorizationManager : ITransientDependency
{public const string USER_IDENTIFIER_CLAIM = "USER_IDENTIFIER_CLAIM";public const string REMEMBER_CLIENT_TOKEN = "REMEMBER_CLIENT_TOKEN";private readonly UserManager _userManager;private readonly ISettingManager settingManager;private readonly SmsCaptchaManager smsCaptchaManager;private readonly EmailCaptchaManager emailCaptchaManager;public TwoFactorAuthorizationManager(UserManager userManager,ISettingManager settingManager,SmsCaptchaManager smsCaptchaManager,EmailCaptchaManager emailCaptchaManager){this._userManager = userManager;this.settingManager = settingManager;this.smsCaptchaManager = smsCaptchaManager;this.emailCaptchaManager = emailCaptchaManager;}public async Task<bool> IsTwoFactorAuthRequiredAsync(AbpLoginResult<Tenant, User> loginResult, string TwoFactorRememberClientToken, TokenValidationParameters validationParameters){if (!await settingManager.GetSettingValueAsync<bool>(AbpZeroSettingNames.UserManagement.TwoFactorLogin.IsEnabled)){return false;}if (!loginResult.User.IsTwoFactorEnabled){return false;}if ((await _userManager.GetValidTwoFactorProvidersAsync(loginResult.User)).Count <= 0){return false;}if (await TwoFactorClientRememberedAsync(loginResult.User.ToUserIdentifier(), TwoFactorRememberClientToken, validationParameters)){return false;}return true;}public async Task<bool> TwoFactorClientRememberedAsync(UserIdentifier userIdentifier, string TwoFactorRememberClientToken, TokenValidationParameters validationParameters){if (!await settingManager.GetSettingValueAsync<bool>(AbpZeroSettingNames.UserManagement.TwoFactorLogin.IsRememberBrowserEnabled)){return false;}if (string.IsNullOrWhiteSpace(TwoFactorRememberClientToken)){return false;}try{var tokenHandler = new JwtSecurityTokenHandler();if (tokenHandler.CanReadToken(TwoFactorRememberClientToken)){try{SecurityToken validatedToken;var principal = tokenHandler.ValidateToken(TwoFactorRememberClientToken, validationParameters, out validatedToken);var userIdentifierString = principal.Claims.First(c => c.Type == TwoFactorAuthorizationManager.USER_IDENTIFIER_CLAIM);if (userIdentifierString == null){throw new SecurityTokenException(TwoFactorAuthorizationManager.USER_IDENTIFIER_CLAIM + " invalid");}var tokenValidityKeyInClaims = principal.Claims.First(c => c.Type == TwoFactorAuthorizationManager.REMEMBER_CLIENT_TOKEN);var currentUserIdentifier = UserIdentifier.Parse(userIdentifierString.Value);var user = _userManager.GetUserById(currentUserIdentifier.UserId);var isValidityKetValid = AsyncHelper.RunSync(() => _userManager.IsTokenValidityKeyValidAsync(user, tokenValidityKeyInClaims.Value));if (!isValidityKetValid){throw new SecurityTokenException(REMEMBER_CLIENT_TOKEN + " invalid");}return userIdentifierString.Value == userIdentifier.ToString();}catch (Exception ex){LogHelper.LogException(ex);}}}catch (Exception ex){LogHelper.LogException(ex);}return false;}public async Task<string> TwoFactorAuthenticateAsync(User user, string token, string provider, bool rememberClient, TokenValidationParameters validationParameters){if (provider == "Email"){var isValidate = await emailCaptchaManager.VerifyCaptchaAsync(token, CaptchaPurpose.TWO_FACTOR_AUTHORIZATION);if (!isValidate){throw new UserFriendlyException("验证码错误");}}else if (provider == "Phone"){var isValidate = await smsCaptchaManager.VerifyCaptchaAsync(token, CaptchaPurpose.TWO_FACTOR_AUTHORIZATION);if (!isValidate){throw new UserFriendlyException("验证码错误");}}else{throw new UserFriendlyException("验证码提供者错误");}if (rememberClient){if (await settingManager.GetSettingValueAsync<bool>(AbpZeroSettingNames.UserManagement.TwoFactorLogin.IsRememberBrowserEnabled)){var expiration = TimeSpan.FromDays(7);var tokenValidityKey = Guid.NewGuid().ToString("N");var accessToken = CreateAccessToken(new[]{new Claim(USER_IDENTIFIER_CLAIM, user.ToUserIdentifier().ToString()),new Claim(REMEMBER_CLIENT_TOKEN, tokenValidityKey)}, validationParameters);await _userManager.AddTokenValidityKeyAsync(user, tokenValidityKey,DateTime.Now.Add(expiration));return accessToken;}}return null;}private string CreateAccessToken(IEnumerable<Claim> claims, TokenValidationParameters validationParameters){var now = DateTime.UtcNow;var expiration = TimeSpan.FromDays(7);var signingCredentials = new SigningCredentials(validationParameters.IssuerSigningKey, SecurityAlgorithms.HmacSha256);var jwtSecurityToken = new JwtSecurityToken(issuer: validationParameters.ValidIssuer,audience: validationParameters.ValidAudience,claims: claims,notBefore: now,expires: now.Add(expiration),signingCredentials: signingCredentials);return new JwtSecurityTokenHandler().WriteToken(jwtSecurityToken);}public async Task SendCaptchaAsync(long userId, string provider){var user = await _userManager.FindByIdAsync(userId.ToString());if (user == null){throw new UserFriendlyException("找不到用户");}if (provider == "Email"){if (!user.IsEmailConfirmed){throw new UserFriendlyException("未绑定邮箱");}await emailCaptchaManager.SendCaptchaAsync(user.Id, user.EmailAddress, CaptchaPurpose.TWO_FACTOR_AUTHORIZATION);}else if (provider == "Phone"){if (!user.IsPhoneNumberConfirmed){throw new UserFriendlyException("未绑定手机号");}await smsCaptchaManager.SendCaptchaAsync(user.Id, user.PhoneNumber, CaptchaPurpose.TWO_FACTOR_AUTHORIZATION);}else{throw new UserFriendlyException("验证码提供者错误");}}}

至此我们就完成了后端部分的开发

修改前端

登录

在两步验证的页面中添加一个checkbox,用于选择是否记住客户端

<el-checkbox v-model="loginForm.rememberClient">7天内不再要求两步验证
</el-checkbox>

JavaScript部分添加对rememberClientToken的处理,存储于cookie中,即便在网页刷新后也能保持免两步验证的状态

const rememberClientTokenKey = "main_rememberClientToken";
const setRememberClientToken = (rememberClientToken: string) =>Cookies.set(rememberClientTokenKey, rememberClientToken);
const cleanRememberClientToken = () => Cookies.remove(rememberClientTokenKey);
const getRememberClientToken = () => Cookies.get(rememberClientTokenKey);

在请求body中添加rememberClientToken, rememberClient的值

 var rememberClientToken = getRememberClientToken();
var rememberClient=this.loginForm.rememberClient;userNameOrEmailAddress = userNameOrEmailAddress.trim();
await request(`${this.host}api/TokenAuth/Authenticate`, "post", {userNameOrEmailAddress,password,twoFactorAuthenticationToken,twoFactorAuthenticationProvider,rememberClientToken,rememberClient
})

请求成功后,返回报文中包含rememberClientToken,将其存储于cookie中

setRememberClientToken(data.rememberClientToken);

登出

登出的逻辑不用做其他的修改,只需要将页面的两步验证的token清空即可,

this.loginForm.twoFactorAuthenticationToken = "";
this.loginForm.password = "";

rememberClientToken是存储于cookie中的,当用户登出时不需要清空cookie中的rememberClientToken,以便下次登录跳过两步验证

除非在浏览器设置中清空cookie,下次登录时,rememberClientToken就会失效。

最终效果

在这里插入图片描述

项目地址

Github:matoapp-samples


http://chatgpt.dhexx.cn/article/gDaO0c4Y.shtml

相关文章

两步教你在Vue中设置登录验证拦截!

Hello&#xff0c;你好呀&#xff0c;我是灰小猿&#xff0c;一个超会写bug的程序猿&#xff01; 今天在做vue和springboot交互的一个项目的时候&#xff0c;想要基于前端实现一些只有登录验证之后才能访问某些页面的操作&#xff0c;所以在这里总结一下实现该功能的一个解决方…

HTTPS实战之单向验证和双向验证

&#xff08;全文太长&#xff0c;太懒不想看&#xff0c;-_-b 那就直接拉到底部看总结 &#xff09; 前面的文章中&#xff0c;提到了&#xff0c;https是在TCP协议与http之间加了一个控制安全传输的SSL协议&#xff0c;也就是说&#xff0c;直接运行在TCP之上的HTTP是普通的…

验证基础-验证方法

目录 动态仿真 静态检查 虚拟模型 硬件加速 效能验证 UVM简介 验证的方法主要分为六种&#xff1a; ※ 动态仿真&#xff08;dynamic simulation&#xff09; ※ 静态检查&#xff08;formal check&#xff09; ※ 虚拟模型&#xff08;virtual prototype&#xff09; ※…

用Abp实现两步验证(Two-Factor Authentication,2FA)登录(一):认证模块

文章目录 原理用户验证码校验模块双因素认证模块改写登录项目地址 在之前的博文 用Abp实现短信验证码免密登录&#xff08;一&#xff09;&#xff1a;短信校验模块 一文中&#xff0c;我们实现了用户验证码校验模块&#xff0c;今天来拓展这个模块&#xff0c;使Abp用户系统支…

用Abp实现两步验证(Two-Factor Authentication,2FA)登录(二):Vue网页端开发

文章目录 发送验证码登录退出登录界面控件获取用户信息功能项目地址 前端代码的框架采用vue.js elementUI 这套较为简单的方式实现&#xff0c;以及typescript语法更方便阅读。 首先添加全局对象&#xff1a; loginForm: 登录表单对象 twoFactorData: 两步验证数据&#xff0…

快速接入Google两步认证Google Authenticator

(一)介绍 既然来看该文章就应该知道Google的两步认证是干什么的&#xff0c;这边再提供一次app的下载链接 (apkpure搜索谷歌身份验证器) 验证原理讲解&#xff1a; 在数据库中查找该登陆用户之前绑定的32位随机码&#xff08;该码一般会存入数据库&#xff09;调用API传入32位…

两步验证 非双重认证

Two-factor authentication must be turned on for your Apple ID. After you turn it on, signing into your developer account will require both your password and access to your trusted devices or trusted phone number. 今天Xcode 真机调试, 突然不正常了. 本着热爱…

google账号异步新设备登录需要两次两步验证问题

备注&#xff1a;华为手机&#xff0c;在谷歌三件套插件已经下载的情况下&#xff0c;还是无法收到数字点击验证 先说下现象&#xff0c;比如你的谷歌账号从别人那购买的&#xff0c;然后辅助电话与邮箱已经全部替换成了自己的信息&#xff0c;一般为了安全我们会开启两步验证&…

谷歌两步验证器身份怎么开Authenticator安卓app下载安装方法教程

国内互联网公司一般采取手机收验证码的方式对账号进行身份验证&#xff0c;增强账号的安全性。但是在国外通常采取使用谷歌两步身份验证器 (Google Authenticator&#xff09;&#xff0c;谷歌谷歌两步身份验证器的方便之处主要体现在&#xff1a; 1.在无网络的情况下也可以使用…

如何开发两步验证功能

什么是两步验证 两步验证&#xff0c;是指用户登录账户的时候&#xff0c;除了要输入用户名和密码&#xff0c;还要求用户输入一个动态密码&#xff0c;为帐户添加了一层额外保护。这个动态密码要么是专门的硬件&#xff0c;要么由用户手机APP提供。即使入侵者窃取了用户密码&a…

兩步验证的原理

被盗号 “您的账号密码有误,请重新输入” 小卢盯着电脑屏幕看了5分钟,心里纳闷,昨天还能登录,怎么今天就密码错误了,难不成我被盗号了?想到这里,小卢赶紧给自己的程序员好友小王打电话。 小卢:“小王,我在XX网站的账号被盗了!” 小王:“确定被盗了?赶紧把密码找…

(01)Webrtc::Fec与Nack的二三事

写在前面&#xff1a;要理解Fec与Nack逻辑&#xff0c;我喜欢先从接受端看&#xff0c; 理解了Fec与Nack是如何被使用的&#xff0c;才能更好的明白不同的机制应该怎么用&#xff0c;在什么场合用。 更新丢包逻辑 void PacketBuffer::UpdateMissingPackets(uint16_t seq_num)…

Channel closed; cannot ack/nack

再一次用rabbmitmq的时候遇到了 Channel closed&#xff1b; cannot ack/nack的异常信息&#xff0c;这个可能是因为rabbmitmq默认的模式是自动ack&#xff0c;我没有配置手动ack 然后在代码里又basicack了。 MessageProperties properties message.getMessageProperties();l…

简述WebRTC中的丢包重传Nack的实现

一 简述 接收端发现序列号不连续&#xff0c;发送RTCP FB Nack包&#xff0c;发送端从历史队列中查找该包&#xff0c;再发送RTP包&#xff0c;但WebRTC用的RTX重发该包&#xff0c;ssrc和原视频流不同&#xff0c;pt也不同。 artpmap:96 H264/90000 artcp-fb:96 goog-remb a…

WEBRTC浅析(五)视频Nack包的发送判断逻辑以及数据流

这篇文章是对webrtc 中Nack包发送机制的梳理&#xff0c;主要包括三个部分&#xff1a; 第一部分&#xff0c;介绍RTCP包中&#xff0c;Nack包的规范。 第二部分&#xff0c;介绍在WEBRTC中&#xff0c;Nack发送机制的数据流程图。 第三部分&#xff0c;介绍在WEBRTC中&#xf…

RabbitMQ的ack和nack机制

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、ACK机制二、主动ACK三、手动ACK四、Nack机制五、MQ unack的影响总结 前言 本文主要讨论RabbitMQ消费者的ack和nack机制&#xff0c;并且关注ack和nack使用…

RTCP 协议的 NACK 报文

接收方定时把所有未收到的包序号通过反馈报文通知到发送方进行重传。 相对 ARQ带来的改进&#xff1a;减少的反馈包的频率和带宽占用&#xff0c;同时也能比较及时地通知发送方进行丢包重传。 NACK 报文的定义在 [rfc4585] 文档中定义。 RTCP 的反馈报文包头定义如下&#x…

webrtc nack实现原理

1.nack 简介 webrtc 中nack是最基本的QOS策略&#xff0c;与ack机制不同的地方是nack是接收端检测到丢包时&#xff0c;告知发送端具体丢包的序号&#xff0c;接收端收到nack后从缓存中找到对应的包并发送出去。 2. nack实现 nack rtcp报文格式如上图所示&#xff0c;pt205。P…

webrtc QOS方法一(NACK实现)

一&#xff1a;概述 NACK则在接收端检测到数据丢包后&#xff0c;发送NACK报文到发送端&#xff1b;发送端根据NACK报文中的序列号&#xff0c;在发送缓冲区找到对应的数据包&#xff0c;重新发送到接收端。NACK需要发送端发送缓冲区的支持&#xff0c;RFC5104[2]定义NACK数据包…

认识网络通信中的 ACK、NACK 和 REX

ACK、NACK、 REX在面试或者网络通信的时候&#xff0c;我们可能经常听到和遇到。今天就来详细介绍一下ACK、NACK、 REX。 认识ACK、NACK、 REX ACK&#xff1a;Acknowledgement&#xff0c;它是一种正向反馈&#xff0c;接收方收到数据后回复消息告知发送方。NACK&#xff1a…