Nodejs建站笔记-注册登录流程的简单实现

1. 使用Backbone实现前端hash路由

登录注册页面如下:

初步设想将注册和登录作为两个不同的url实现,但登录和注册功能的差距只有form表单部分,用两个url实现显然开销过大,所以最终方案为使用hash作为前端路由,根据url的hash值切换相应的表单显示。

很多致力于SPA开发的前端框架都具备hash路由功能,考虑到嗨猫本身是一个类博客、偏重静态展示的网站,所以最后选择了轻量级的Backbone最为前端框架。

Backbone实现hash路由的代码很简单:

let $formBox = $('.box_form_container'),
          $navitems = $('.box_nav_item'),
          $nav_item_signup = $('.box_nav_item_signup'),
          $nav_item_login = $('.box_nav_item_login');
        let pwdRouter = Backbone.Router.extend({
          routes: {
            'login': 'login',
            'signup': 'signup'
          },
          login: function() {
            $formBox.removeClass('box_form_container_signup').addClass(
              'box_form_container_login');
            $navitems.removeClass('box_nav_item-current');
            $nav_item_login.addClass('box_nav_item-current');
          },
          signup: function() {
            $formBox.removeClass('box_form_container_login').addClass(
              'box_form_container_signup');
            $navitems.removeClass('box_nav_item-current');
            $nav_item_signup.addClass('box_nav_item-current');
          }
        });
        let router = new pwdRouter();
        Backbone.history.start();

务必不要遗漏Backbone.history.start();,否则路由功能不会启动。

随后,将登录和注册的a标签的href分别修改为#login#signup便实现了简单的hash路由。

2. 使用jquery-validation完善前端表单验证

前端表单验证是必不可少的一项功能,前端的js代码验证表单的完整性并拦截一部分非法的表单输入,一定程度上减少服务端的压力。

初步想自己造轮子,但考虑到开发周期和轮子的成熟性,最终选择jquery-validation插件作为前端表单验证工具。

jquery-validation插件和表单元素的name属性绑定,以登录表单为例,其dom结构如下:

根据input控件的name属性,jquery-validation的验证代码如下:

// 登录表单添加验证规则
        $('.login_form').validate({
          rules: {
            signname: {
              required: true,
              signname: true
            },
            password: {
              required: true,
              norepeat: true
            },
            verifycode: {
              required: true
            }
          },
          errorPlacement: function(error, element) {
            let container = element.parent().find('.form_error');
            error.appendTo(container);
            container.show();
          },
          submitHandler: function(form) {
            var $form = $(form);
            let _action = $form.attr('action');
            $form.attr('action', '');
            $.ajax({
              type: 'post',
              url: _action,
              data: $form.serialize(),
              dataType: 'json'
            }).done(function(res) {
              console.log('done');
              if (res.code !== '100') {
                alert(res.msg);
              } else {
                alert('注册成功');
              }
            }).fail(function(res) {
              console.log('fail');
            }).always(function() {
              $form.attr('action', _action);
            });
          }
        });

其中signname和norepeat是自定义的验证规则,signname如下:

// 添加用户名+邮箱的双重验证规则
        $.validator.addMethod('signname', function(value, element) {
          let reg_isemail = /[@]/,
            reg_email =
            /^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i;
          return !reg_isemail.test(value) || (reg_isemail.test(value) &&
            reg_email.test(value));
        }, '请输入正确的用户名或邮箱');

用户可以使用用户名或邮箱登录,两者共享一个input控件,signname验证是用户名还是邮箱,如果是邮箱,便保证输入邮箱格式的正确性。

norepeat验证密码不能出现连续3次的字符

  • errorPlacement指明错误提示信息的位置,我们给它提供了一个容器。
  • submitHandler监听submit按钮,首先拦截默认的表单提交请求,替换为自定义的提交逻辑,本项目中使用ajax提交。并且为了防止用户频繁点击submit按钮造成重复提交,我们首先将form的action属性清空,待请求完毕后重新赋值

3. 使用node-canvas模块增加验证码功能

node-canvas是一个将canvas API迁移到nodejs使用的扩展模块,使用node-canvas模块可以在nodejs服务器生成图片(当然它的作用不仅限于此,但项目暂时只用到生成图片功能),下面详细讲述如何搭建登录&注册表单验证码功能。

3.1 部署node-canvas依赖环境

node-canvas需要操作系统安装底层图形库,各操作系统的依赖如下:

目前开发环境为mac,简单记录一下环境部署操作以及遇到的一些坑。 首先按照上图安装底层库,由于brew安装的Cairo版本过低,将会导致canvas不正确的绘图(参考https://github.com/Automattic/node-canvas/issues/639)。这是Cairo的bug,所以必须保证Cairo版本在1.14.1以上。使用brew更新Cairo:

brew update
brew upgrade Cairo

安装成功后,在项目根目录下安装node-canvas:

npm install canvas --save-dev

至此,环境部署完毕,进入开发阶段。

3.2 服务端

打开api/controllers/Auth/AuthController,添加生成验证码图片的函数generateVerifyImg():

  generateVerifyImg: function() {
    var _verify = {
      code: '',
      img: ''
    };
    // 生成四位数字和字母的数字作为验证码
    _verify.code = Math.random().toString(16).slice(2, 6);
    var Image = Canvas.Image,
      canvas = new Canvas(60, 30),
      ctx = canvas.getContext('2d');
    var _rotate = (Math.random()).toFixed(2);
    ctx.fillStyle = '#ffcc99';
    ctx.fillRect(0, 0, 60, 30);
    ctx.rotate(_rotate);
    ctx.font = 'italic 20px serif';
    ctx.strokeStyle = '#424952';
    // 将验证码绘制进canvas
    ctx.strokeText(_verify.code, 10, 20);
    // 生成验证码图片
    _verify.img = canvas.toDataURL('image/png');
    return _verify;
  }

然后在登录&注册的API中生成验证码图片并渲染进模板文件:

/**
   * @desc 登录、注册的统一入口,由前端Backbone的hash路由判断展示表单
   * @param req
   * @param res
   */
  toAuth: function(req, res) {
    var _verify = this.generateVerifyImg();
    req.session.verifycode = _verify.code;
    var view = swig.renderFile('./views/passport/main.swig', {
      verify_img: _verify.img
    });
    return res.send(view);
  }

其中非常关键的一步是将验证码通过session保存,以便进行验证

随后,在接受表单post的API中加入验证码过滤逻辑:

if (!req.param('verifycode') || req.param('verifycode') !== req.session
      .verifycode) {
      return res.json({
        err: rescode.invalidVerifycode,
        msg: "验证码不正确"
      });
    }

项目至此已经具备了基本的验证码功能。验证码的一个重要需求是用户手动刷新验证码,下面简单讲述实现过程。

3.3 实现验证刷新功能

1.首先在前端js代码中添加验证码图片刷新事件监听:

$('.hc_container').on('click', '.form_img_verifycode', function() {
          console.log('换一换');
          var $img = $(this);
          $.ajax({
            url: '/getverifycode',
            type: 'get',
            dataType: 'json'
          }).done(function(res) {
            console.log('getverifycode success');
            $img.attr('src', res.img);
          }).fail(function(res) {
            console.log('getverifycode failed');
          });
        });

2.然后配置sails的config/route.js

// 刷新验证码
  'get /getverifycode': 'Auth/AuthController.getVerifyImg'

3.在Auth/AuthController中添加getVerifyImg()API接受前端的验证码刷新请求:

getVerifyImg: function(req, res) {
    var _verify = this.generateVerifyImg();
    req.session.verifycode = _verify.code;
    return res.json({
      'img': _verify.img
    });
  }

这个API功能非常简单,获取新的验证码图片并返回给前端,但是必须谨记将验证码通过session记录。

前端通过ajax获取到新的验证码图片url替换旧图即可。

4. 实现登录&注册成功后的页面跳转

由前端js控制跳转,目前统一跳转到首页:

window.location.href='/';

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魏艾斯博客www.vpsss.net

WDCP 面板 V3.2 新增多 PHP 版本共存和一键 SSL 功能

2233
来自专栏Aloys的开发之路

PDF常见问题总结

Acrobat保存PDF文档报错“读取本文档时出现问题(135)” 用Acrobat修改PDF文档,保存的时候报错:“文档无法保存。读取本文档时出现问题(13...

3657
来自专栏FreeBuf

浅谈木马如何隐藏上线IP地址

木马也叫RAT,或者叫远程管理软件,关于如何隐藏IP地址,应该有不少人在研究,比如ROOTKIT实现文件隐藏、进程隐藏、网络连接隐藏等等。本人才疏学浅,没有深入...

2536
来自专栏张泽旭的专栏

SMTP邮件发送命令

第一步,远程登录smtp服务器 在命令行窗口输入 telnet smtp.163.com 25 然后回车 第二步,用户登录 输入 he...

3262
来自专栏DannyHoo的专栏

解决Command /usr/bin/codesign failed with exit code 1.rtfd

解决Command /usr/bin/codesign failed with exit code 1.rtfd

3502
来自专栏mukekeheart的iOS之旅

iOS工具——Xcode9无证书真机调试

  入坑iOS开发这么久,一直都是在模拟器上运行,公司的项目也都有公司的开发者账号进行真机调试。但是很多时候在网上download一些demo想在真机上运行看一...

66710
来自专栏python爬虫日记

fiddler抓手机报文的配置指南

网上各种资料比较,下面这篇是最准确的,转载自csdn:http://blog.csdn.net/gld824125233/article/details/525...

2654
来自专栏JarvanMo的IT专栏

Flutter误删除android/ios目录怎么办?

最近有朋友遇到了这样的一个问题:在Flutter开发中误删android/ios该如何挽救?。很多朋友会尝试从回收站中恢复,但如果无法从回收站中恢复怎么办?还有...

1593
来自专栏企鹅号快讯

初识Web和元素定位方法

我们今天来聊一聊什么是什么是Web自动化,以及如何写一个简单的登录的自动化脚本。Web自动化的含义就是用电脑模拟人工自动的在网页上执行各种各样的网页操作。比如说...

3489
来自专栏农夫安全

暴力破解-H3C路由器-MSR900

所暴力破解的设备信息 华三路由器 设备型号 MSR900 软件版本 CMW520-R2311 所用到的工具 Firefox浏览器及其插件Proxy Sw...

6026

扫码关注云+社区

领取腾讯云代金券