dpc761218914 / egg_svg-captcha_demo

egg with svg-captcha and ioredis(no session)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

egg_svg-captcha_demo

QuickStart

see egg docs for more detail.

Development

$ npm i
$ npm run dev
$ open http://localhost:7001/

Deploy

$ npm start
$ npm stop

npm scripts

  • Use npm run lint to check code style.
  • Use npm test to run unit test.
  • Use npm run autod to auto detect dependencies upgrade, see autod for more detail.

使用指南

  • 思路:不使用session存储图片验证码,使用redis和uuid进行验证码校验,1、用户访问图片验证码时,后台根据用户请求生成uuid,将uuid和验证码字符串存入redis中,这里可以设置验证码的有效期。2、需要将uuid回传给前台用户,3、用户校验图片验证码时,需要传uuid和图片验证码到服务器,4、服务器通过前台传过来的uuid从redis中取出验证码,将其与用户传过来的验证码进行比对,判断是否放行。
  • 图片验证码模块:https://github.com/lemonce/svg-captcha ,官方提供express实例。
  • egg中使用svg-captcha需要进行设置, 其中响应类型this.ctx.set('Content-Type', 'image/svg+xml')最重要,如果不设置响应类型,将会不起作用;
  • svg-captcha 返回的是svg二进制数据,前台展示如果不适用img标签,请注意用法。如果想点击图片刷新,可以参考我的company_website中的登录页面。
       this.ctx.status = 200;
       //这里一定要设置,不然网页中无法显示图片
       this.ctx.set('Content-Type', 'image/svg+xml') ;
       this.ctx.body=captcha.data;

About

egg with svg-captcha and ioredis(no session)


Languages

Language:JavaScript 88.5%Language:HTML 11.5%