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

原创

TSINGSEE青犀视频

修改于 2021-05-24 17:54:19

6450

修改于 2021-05-24 17:54:19

文章被收录于专栏：TSINGSEE青犀视频TSINGSEE青犀视频

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

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