Springboot之登录模块探索（含Token，验证码，网络安全等知识）

简介

登录模块很简单，前端发送账号密码的表单，后端接收验证后即可~

淦！可是我想多了，于是有了以下几个问题（里面还包含网络安全问题）：

1.登录时的验证码

2.自动登录的实现

3.怎么维护前后端登录状态

在这和大家分享下我实现此功能的过程，包括一些技术和心得

1.登录时的验证码

为什么要验证码，原因很简单，防止脚本无限次重复登录，来暴力破解用户密码或者攻击服务器

验证码的出现，使得每次登录都有个动态变量需要输入，无法用脚本写死代码

具体可以参考：滑动验证码的设计和理解：
www.cnblogs.com/top-houseke…

2.自动登录的实现

所谓自动登录，指的是当用户登录网站时勾选了自动登录，那么下次再访问网站就不需要输入账号密码直接登录了

这说明，账号密码信息是必须保存在用户这边的，因此自动登录都是不安全的！（方便的代价呀）

尽管不安全，但是我们也必须要尽力让它安全一点，有以下常用方法：

1.账号密码加密保存

2.降低自动登录后用户的权限（如果用户自动登录想改密码，想给我转钱等操作的话，就必须输入账号密码再登录一次！）

3.进行ip检测（之前登录的ip小本本记着），如果发现和上次不一致，则不允许自动登录

数据存储在前端哪里呢

浏览器有3个经常保存数据的地方

1.Cookie （我用这个）

2.LocalStorage

3.SessionStorage

各位可以按F12直接观看

如果你在多个大型网站下都按按F12，会发现SessionStorage基本没数据

为啥，因为真的不好用，它并不是后台的session那样，生命周期是一个会话，这个SessionStorage存储的数据只限于该标签的页面

意思是标签1和标签2即使是同个URL的网址，里面的数据都是不互通的（这有个毛用）

那么LocalStorage存储的数据如何呢，答案是无限期本地存储

不过后台无法操作这里的数据，只能由js代码操作（至于操作结果，完全看js，后端无法感知，不太可靠），我认为这里不适合保存敏感点的信息，因为前端的功能是展示，状态性的数据应该由后端直接掌控（后端能直接操作Cookie，保证完成任务）

你看英雄所见略同，CSDN网站的用户密码也是存在Cookie的

Token就是登录后的令牌（下一点会讲）

所以用Cookie就对啦，具体实现都很简单，前端多个自动登录的选择，选择后多个参数传给后端，后端根据参数往Cookie里设置加密后的账号密码

等下次访问时，用拦截器Interceptor进行拦截，检测是否要自动登录即可~

3.如何维护前后端登录状态

大家最先想到是用Session来维护，登录后在Session中存放用户信息，不过对分布式很不友好（什么，你说你用不到分布式，我也没用到，可是梦想还是要有的嘛），需要维护个分布式数据库来进行数据同步才行

于是我用Token实现的，Token就是一串字符串，最适合API鉴权（例如SSO单点登录这种），俗称令牌

好处就是账号密码用户输入一次就够了，特别是多个系统之间（一张身份的凭证都通用）

当用户登录后，服务器就会生成一个Token放在Cookie中，之后用户的所有操作都带这个Token访问（将Token放入http头部）

为什么要将Token放入头部

1.能抵挡下简单的CSRF攻击

2.浏览器跨域问题

什么是CSRF攻击

举个例子：我登录了A网站，A网站给我返回了一些Cookie信息，然后我再同一浏览器的另外标签访问了B网站，谁知这个B网站返回了一些攻击代码（向A网站发起一些请求，比如转钱给你，这时候由于是访问A网站，会附带A网站的Cookie，让一切都好像是我在访问一样），这个就是CSRF攻击

但B网站并不知道A网站这么鸡贼，会在头部放了Token，所以这次攻击请求是的头部是没Token的，因此检测后发现非法，所以没得逞

当然，这并不可靠，哪天B网站知道你头部放了Token，它研究A网站的js代码，清楚逻辑之后也加上，那就防不住了（所以说前端的东西一切都不可靠）

正确做法应该是后端检测头部的Referer字段，每个网页里发起请求，请求的头部都会带有此字段，如

这说明这个请求是从 http://localhost:8099/swr 中发出的

B网站如果返回攻击代码，这里显示的事B网站的网址，判断出不是自家网站发出，就可以禁止访问

浏览器跨域访问会发生什么

说到跨域（自家网站去请求别人家的网站），得先了解什么是同源策略：

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

所谓同源是指：域名、协议、端口相同。

另外，同源策略又分为以下两种：

1. DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
2. XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。（就是ajax）

咳咳，这里要说下第二种，其实设置一些参数之后，ajax访问时允许跨域请求的，甚至允许跨域时带上自身cookie

但是，带上自己的Cookie多不安全，明明里面只有1,2个信息要传给对方，现在被人全看见了（不好不好），所以要将Token放入头部

你说为啥不放到参数里，因为这会跟业务用的参数混淆，造成逻辑混乱（就好像你上学时要扔家里的垃圾，你不会放到书包里吧，都是手里提着的）

每个请求都放token，所以要封装起来，例如我是将ajax封装起一个新的对象，然后在这个对象使用时添加Token

当然啦，封装了ajax后还有其他好处（例如统一的成功，失败回调函数，统一的数据解析，统一的等待框等等），有兴趣的同学可以看下

 /**
    * 访问后台的对象，为ajax封装
    * @param url 后台资源路径
    * @param param Map参数
    * @param contentType 传输类型
    * @param success   成功回调函数
    * @param error 失败回调函数
    * @param requestType 请求类型（get.post,put,delete）
    * @constructor
    */
  var Query = function (url, param, contentType, successFunc, errorFunc, requestType) {
      this.url = url;

      //先确认参数存在
     if (param) {
          //如果是get请求类型，则将参数拼接到url后面
         if (requestType == Query.GET_TYPE) {
              this.param = this._concatParamToURL(param, url);
         } else {
             //其他请求类型，要根据不同的传输格式来确定传输的值的类型
             if (contentType == Query.NOMAL_TYPE) {
                 this.param = JSON.parse(this._convertParamToJson(param));
             } else {
                 this.param = this._convertParamToJson(param);
             }
         }
     } else {
         this.param = null;
     }

    this.contentType = contentType;
    this.successFunc = successFunc;
    this.errorFunc = errorFunc;
     //请求超时，默认10秒
     this.timeout = 10000;
     //是否异步请求，默认异步
     this.async = true;
     this.requestType = requestType;
  }

  Query.JSON_TYPE = 'application/json';
 Query.NOMAL_TYPE = 'application/x-www-form-urlencoded';

  /**
  * ajax请求的访问
  * 默认是post
  * @param url 要访问的地址
  * @param paramMap 传给后台的Map参数，key为字符串类型
  * @param callback 回调函数
  * @param contentType 传输数据的格式  默认传输application/x-www-form-urlencoded格式
  */
 Query.create = function (url, paramMap, successFunc, errorFunc) {
    return new Query(url, paramMap, Query.NOMAL_TYPE, successFunc, errorFunc, Query.GET_TYPE);
}

 //-----------------------以下为RESTFul方法---------------------------
 //ajax请求类型
  Query.GET_TYPE = "get";
  Query.POST_TYPE = "post";
  Query.PUT_TYPE = "put";
  Query.DELETE_TYPE = "delete";

  //get方法默认是Query.NOMAL_TYPE
  Query.createGetType = function (url, paramMap, successFunc, errorFunc) {
      return new Query(url, paramMap, Query.NOMAL_T