前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EasyRTC-SFU如何实现登录页的验证码校验功能?

EasyRTC-SFU如何实现登录页的验证码校验功能?

原创
作者头像
TSINGSEE青犀视频
修改2021-05-24 17:54:19
6440
修改2021-05-24 17:54:19
举报
文章被收录于专栏:TSINGSEE青犀视频TSINGSEE青犀视频

大家都知道每个网站的安全校验机制都是网站安全的重要组成部分,包括密码、短信验证码、二维码验证等验证方式,除此之外,我们登陆很多网站都能了解到用户登录是会有验证码校验功能的。

在此之前,TSINGSEE青犀视频开发的EasyNVR、EasyGBS等平台已经实现了验证码的校验功能,为了让TSINGSEE青犀视频平台实现全面安全登陆验证,我们在EasyRTC里也添加了该功能。本文和大家分享下我们的实现过程。

我们使用的方式是首先通过接口获取到captchaId,拿到ID后通过拼接location.origin来获取验证码图片,将照片渲染到页面。用户在输入账号、密码以及验证码后,通过login接口将之前的captchaId一起发送给后端,由后端进行匹配,然后将结果返回给前端。

后端匹配机制的参考代码如下:

代码语言:javascript
复制
    // 获取验证码照片
    getCaptchaId() {
      getCaptchaId().then((res) => {
        this.loginForm.captcha_id = res.msg.id;
        this.CaptchaUrl = `${location.origin}/v1/auth/captcha/${res.msg.id}.png`;
      });
    },

前端反应的参考代码如下:

代码语言:javascript
复制
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作为网页音视频通话会议系统,具备一对多的视频会议通话功能,满足语音视频社交、在线教育和培训等需求,支持试用,如果大家想了解更多,欢迎联系我们。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档