企业远程行政会议协同办公视频会议系统EasyRTC-SFU如何实现登录页的验证码校验功能?
作者:互联网
大家都知道每个网站的安全校验机制都是网站安全的重要组成部分,包括密码、短信验证码、二维码验证等验证方式,除此之外,我们登陆很多网站都能了解到用户登录是会有验证码校验功能的。
在此之前,TSINGSEE青犀视频开发的EasyNVR、EasyGBS等平台已经实现了验证码的校验功能,为了让TSINGSEE青犀视频平台实现全面安全登陆验证,我们在EasyRTC里也添加了该功能。本文和大家分享下我们的实现过程。
我们使用的方式是首先通过接口获取到captchaId,拿到ID后通过拼接location.origin来获取验证码图片,将照片渲染到页面。用户在输入账号、密码以及验证码后,通过login接口将之前的captchaId一起发送给后端,由后端进行匹配,然后将结果返回给前端。
后端匹配机制的参考代码如下:
// 获取验证码照片
getCaptchaId() {
getCaptchaId().then((res) => {
this.loginForm.captcha_id = res.msg.id;
this.CaptchaUrl = `${location.origin}/v1/auth/captcha/${res.msg.id}.png`;
});
},
前端反应的参考代码如下:
if (valid) {
let params = {
loginName: this.loginForm.name,
password:smCrypto.sm3(this.loginForm.password),
captchaId:this.loginForm.captcha_id,
captchaValue: this.loginForm.captcha_code,
};
login(params)
.then((res) => {
this.$message({
message: "登录成功",
type: "success",
});
EasyRTC对于细节的优化还会继续,如果大家有兴趣,可以关注我们的博客,我们将会不定期分享我们的开发记录以及解决方案。EasyRTC作为网页音视频通话会议系统,具备一对多的视频会议通话功能,满足语音视频社交、在线教育和培训等需求,支持试用,如果大家想了解更多,欢迎联系我们。
标签:res,SFU,EasyRTC,校验,验证码,captcha,loginForm,id 来源: https://www.cnblogs.com/TSINGSEE/p/14282792.html