【Jupyter二次开发】为Jupyter Notebook的登录加上验证码

最近接到一个小需求，需要为Jupyter的登陆界面加上验证码，因为是二次开发、又不熟悉Tornado，刚开始遇到很多问题，在这里记录一下。

需求

需求提的很明确，在jupyter的登陆界面为登陆加上验证码，图片和滑块的类型都可。由于是第一次尝试，最后我选择了思路更清晰的图片验证码。

二次开发环境准备

主要都是参照github.com/jupyter/notebook 官方给出的环境进行配置。这里简单总结一下。

1. 准备node和npm的环境，我这里用的是 node v12.13.2 和 npm v6.13.6
2. 准备python3，pip安装tornado和jupyter
3. 推荐在IDE里面开发

具体步骤

clone下来jupyter notebook的master分支代码后，在项目根目录中先使用pip安装pip install -e .，安装完成后还需要npm构建npm run build。

都完成后就可以开始实现需求了，使用IDE打开项目，启动/notebook中的__main__.py发现出现引用包错误。查询了一些资料，发现需要把这个启动脚本放在项目根目录。

实现上采用pillow实现图片验证码的生成，redis存储验证码结果和图片的hash，再将图片和图片hash返回给页面前端进行渲染。在前端点击提交按钮后会将密码和验证码结果和图片hash一同传给后台进行验证。redis中存储的图片记录拥有一定的时效性，且生命周期到下一次尝试验证为止，防止外部爆破。

接下来就是找tornado的框架逻辑，因为是第一次接触这个框架，这部分耗时较多。后来经过文档和一些资料的查询也明白了tornado的结构。http会在注册过的路由里被分配到指定的handler，这些 handler要继承tornadoweb.RequestHandler在handler中我们可以定义get、post这些方法处理指定的http请求。

还要注意一点，在业务结束输出结果时，和django这些框架有不同的时，需要使用顶层的self.write(content)方法输出响应结果。tornado使用了一个IOLoop的结构来处理IO请求，要使用tornado指定的方式来进行IO。

tornado在将数据绑定到页面的过程中用到的是self.render()方法进行，这个方法可以在参数中指定要传递的变量。在模版中使用双括号来引用变量。