模仿淘宝web扫码登录

#### 首页登录：

点击右上角二维码登录切换，触发js事件。

```

//切换登录

$('#J-qrcode-target').click(function(e){

e.preventDefault();

$(this).toggleClass("scan-no");

if ($(this).hasClass('qrcode-target-show')){

$(this).removeClass('qrcode-target-show').addClass('qrcode-target-hide');

$('.scan-login').show();

$('.input-login').hide();

_this.ST && clearInterval(_this.ST);

createQRcode();

$('.j_qr_invalid').hide();

} else {

$(this).removeClass('qrcode-target-hide').addClass('qrcode-target-show');

$('.scan-login').hide();

$('.input-login').show();

_this.ST && clearInterval(_this.ST);

}

});

```

切换样式，进入扫码登录页。

请求服务端接口，获取唯一二维码code，UUID。

```

//生成

var createQRcode = function(){

$.ajax({

type : "GET",

url : ctx + "/login/do_generate_qrcode.htm",

dataType : "json",

data:{},

beforeSend:function(){

},

success : function(json) {

if (json.success) {

_this.uuid = json.datas.obj;

$('#qrcode_output').empty();

try{

$('#qrcode_output').qrcode({width:160,height:160,text:_this.uuid});

}catch(e){

$('#qrcode_output').qrcode({render : "table",width:160,height:160,text:_this.uuid});

}

scanTrace();

} else {

Utils.Notice.error(json.message);

}

},

complete:function(){

}

});

```

服务端会随机生成UUID唯一码，并将空的二维码扫描信息存入缓存。缓存设置有效期为固定的两分钟，两分钟内为扫描，该缓存会定时清空。随后，将UUID串返回给前端。

```

/**

* 二维码内容生成

*/

@ResponseBody

@RequestMapping("do_generate_qrcode")

@UrlName("用户-[登录]二维码内容生成")

public JsonResult doGenerateQRCode(){

JsonResult json = new JsonResult();

String uuid = UUID.randomUUID().toString().replace("-", "") + "_"

+System.currentTimeMillis();

CacheUtils.set(UserCst.LOGIN_QRCODE_PREFIX + uuid,

UserCst.LOGIN_QRCODE_TIMEOUT, new ScanLoginDTO());

json.addDatas(ControllerCst.JSON_KEY_OBJ, uuid);

return json;

}

```

返回给前端会显示为UUID对应的二维码：

```

//扫描跟踪

var scanTrace = function(){

_this.ST = setInterval(function(){

$.ajax({

type : "POST",

url : ctx + "/login/do_qrcode_check.htm",

dataType : "json",

data:{uuid:_this.uuid},

beforeSend:function(){

},

success : function(json) {

//扫描状态 1-未扫描 2-已扫描，待确认 3-确认登录 4-取消登录

if (json.code == '2') {

$('.j_cf_tips').show();

$('.j_scan_tips').hide();

} else if (json.code == '3') {

_this.ST && clearInterval(_this.ST);

location.href = json.datas.obj;

} else if (json.code == '4' || json.code == '105') {

$('.j_qr_invalid').show();

_this.ST && clearInterval(_this.ST);

}

},

complete:function(){

}

});

},2000);

}

```

调用生成二维码的服务时，会同步调用扫描跟踪方法。该方法会定时，每两秒请求一下服务端的do_qrcode_check方法，校验扫描状态。当未扫描时，服务端缓存失效后会返回给前端，告知该二维码已失效。

```

/**

* 二维码扫描连接检查

*/

@ResponseBody

@RequestMapping("do_qrcode_check")

@UrlName("用户-[登录]二维码扫描连接检查")

public JsonResult doQRcodeCheck(@RequestParam("uuid")String uuid, HttpServletRequest request, HttpServletResponse response){

JsonResult json = new JsonResult();

if (StringUtils.isEmpty(uuid)){

json.setSysErr();

return json;

}

String key = UserCst.LOGIN_QRCODE_PREFIX + uuid;

ScanLoginDTO scanLoginDTO = CacheUtils.get(key);

if (scanLoginDTO == null){

json.setErr(UserErrs.User.SCAN_LOGIN_QR_INVALID);

return json;

}

if (scanLoginDTO.isScanLoginOK()){

SessionUserDTO session = userCheck.getUserByLoginName(scanLoginDTO.getLoginName());

if (session == null) {

json.setErr(UserErrs.User.SCAN_LOGIN_QR_INVALID);

return null;

}

String[] ticket = TicketUtils.getTicket(String.valueOf(session.getUserId()),true);

session.setToken(ticket[0]);

//刷新session

SessionManager.createSession(session.getUserId(), SessionCst.SESSION_ATTRIBUTE_USER_POJO, session);

LoginPostProcessor.addCookiesForTicket(request, response, ticket[1]);

LoginPostProcessor.addCookiesForNick(request, response, session.getNick());

String redirectUrl = WebUtils.getRoleUrl(String.valueOf(session.getRoleId()));

json.addDatas(ControllerCst.JSON_KEY_OBJ, redirectUrl);

} else if (scanLoginDTO.isCanLoginCancel()) {

CacheUtils.delete(key);

}

json.setCode(String.valueOf(scanLoginDTO.getStatus()));

return json;

}

```

服务端将扫描状态返回，告知前端该二维码使用扫描状态，当缓存到期后，会告知前端二维码已失效。

当用户在有效期内，扫描二维码时，会请求服务端接口。调用scan_request方法，将获取到的uuid，以及移动端自己的当前登录用户的loginName以及登录后的ticket传递给服务端进行记录。

```

/**

* 扫描登录请求

*

*/

@ResponseForMobile

@RequestMapping("scan_request")

@UrlName("用户-[手机登录接口]扫描登录请求")

public JsonResult scanRequest(@RequestParam(value = ControllerCst.DATA) String data) {

JsonResult json = new JsonResult();

APIParamModel<ScanLoginDTO> mode = _parse(data, new TypeReference<APIParamModel<ScanLoginDTO>>() {});

ScanLoginDTO scanLoginDTO = mode.getP();

_check(scanLoginDTO.getUuid(), "uuid");

_check(scanLoginDTO.getLoginName(), "loginName");

_check(scanLoginDTO.getTicket(), "ticket");

SessionUserDTO session = UserContext.user.get();

String key = UserCst.LOGIN_QRCODE_PREFIX + scanLoginDTO.getUuid();

ScanLoginDTO cacheScanLoginDTO = CacheUtils.get(key);

if (cacheScanLoginDTO == null || cacheScanLoginDTO.isCanLoginCancel()){

json.setErr(UserErrs.User.SCAN_LOGIN_QR_INVALID);

return json;

}

if (cacheScanLoginDTO.isScanWaitConfirm() || cacheScanLoginDTO.isScanLoginOK()) {

if (!cacheScanLoginDTO.getLoginName().equals(session.getLoginName())) {

json.setErr(UserErrs.User.SCAN_LOGIN_QR_INVALID);

return json;

}

}

CacheUtils.set(key, scanLoginDTO);

return json;

}

```

服务端会判断缓存中是否存在该UUID对应的缓存，并且确认状态是否是未确认，是否在可确认状态。校验后，会将信息放置缓存，等待用户发出确认登录请求。

当用户点击确认登录时，会给服务端发送确认登录请求。

```

/**

* 确认登录请求

*/

@ResponseForMobile

@RequestMapping("scan_confirm")

@UrlName("用户-[手机登录接口]确认登录请求")

public JsonResult scanConfirm(@RequestParam(value = ControllerCst.DATA) String data) {

JsonResult json = new JsonResult();

APIParamModel<ScanLoginDTO> mode = _parse(data, new TypeReference<APIParamModel<ScanLoginDTO>>() {});

ScanLoginDTO scanLoginDTO = mode.getP();

_check(scanLoginDTO.getUuid(), "uuid");

_check(scanLoginDTO.getStatus(), "status");

_check(scanLoginDTO.getLoginName(), "loginName");

_check(scanLoginDTO.getTicket(), "ticket");

SessionUserDTO session = UserContext.user.get();

String key = UserCst.LOGIN_QRCODE_PREFIX + scanLoginDTO.getUuid();

ScanLoginDTO cacheScanLoginDTO = CacheUtils.get(key);

if (cacheScanLoginDTO == null || cacheScanLoginDTO.isCanLoginCancel()){

json.setErr(UserErrs.User.SCAN_LOGIN_QR_INVALID);

return json;

}

if (cacheScanLoginDTO.isScanWaitConfirm() || cacheScanLoginDTO.isScanLoginOK()) {

if (!cacheScanLoginDTO.getLoginName().equals(session.getLoginName())) {

json.setErr(UserErrs.User.SCAN_LOGIN_QR_INVALID);

return json;

}

}

CacheUtils.set(key, scanLoginDTO);

return json;

}

```

服务端会根据用户发送的参数，校验二维码登录缓存是否存在，以及校验移动端当前session中的登录名是否与传递的登录名参数是否一致，避免移动端恶意攻击，违规登录别人的账号。一切确认好以后，将缓存中的uuid回应的扫码信息绑定至缓存中。

随后前端定时每两秒会请求的js会发送请求，确认用户登录的状态。

```

//扫描跟踪

var scanTrace = function(){

_this.ST = setInterval(function(){

$.ajax({

type : "POST",

url : ctx + "/login/do_qrcode_check.htm",

dataType : "json",

data:{uuid:_this.uuid},

beforeSend:function(){

},

success : function(json) {

//扫描状态 1-未扫描 2-已扫描，待确认 3-确认登录 4-取消登录

if (json.code == '2') {

$('.j_cf_tips').show();

$('.j_scan_tips').hide();

} else if (json.code == '3') {

_this.ST && clearInterval(_this.ST);

location.href = json.datas.obj;

} else if (json.code == '4' || json.code == '105') {

$('.j_qr_invalid').show();

_this.ST && clearInterval(_this.ST);

}

},

complete:function(){

}

});

},2000);

}

```

服务端执行连接检查接口，当登录状态完成正常以后，会获取用户登录信息ticket，设置token，以及为用户创建session.根据用户session中的roleID，返回用户登录成功后应该跳转的页面。

```

/**

* 二维码扫描连接检查

*/

@ResponseBody

@RequestMapping("do_qrcode_check")

@UrlName("用户-[登录]二维码扫描连接检查")

public JsonResult doQRcodeCheck(@RequestParam("uuid")String uuid, HttpServletRequest request, HttpServletResponse response){

JsonResult json = new JsonResult();

if (StringUtils.isEmpty(uuid)){

json.setSysErr();

return json;

}

String key = UserCst.LOGIN_QRCODE_PREFIX + uuid;

ScanLoginDTO scanLoginDTO = CacheUtils.get(key);

if (scanLoginDTO == null){

json.setErr(UserErrs.User.SCAN_LOGIN_QR_INVALID);

return json;

}

if (scanLoginDTO.isScanLoginOK()){

SessionUserDTO session = userCheck.getUserByLoginName(scanLoginDTO.getLoginName());

if (session == null) {

json.setErr(UserErrs.User.SCAN_LOGIN_QR_INVALID);

return null;

}

String[] ticket = TicketUtils.getTicket(String.valueOf(session.getUserId()),true);

session.setToken(ticket[0]);

//刷新session

SessionManager.createSession(session.getUserId(), SessionCst.SESSION_ATTRIBUTE_USER_POJO, session);

LoginPostProcessor.addCookiesForTicket(request, response, ticket[1]);

LoginPostProcessor.addCookiesForNick(request, response, session.getNick());

String redirectUrl = WebUtils.getRoleUrl(String.valueOf(session.getRoleId()));

json.addDatas(ControllerCst.JSON_KEY_OBJ, redirectUrl);

} else if (scanLoginDTO.isCanLoginCancel()) {

CacheUtils.delete(key);

}

json.setCode(String.valueOf(scanLoginDTO.getStatus()));

return json;

}

```

密码显示与隐藏：

//显示密码

```

$("#eye").click(function(e){

e.preventDefault();

var type = $(this).siblings("input").get(0).getAttribute("type");

var pwd = $(this).siblings("input").get(0)

if(type == "password"){

$("#eye span").removeClass("focuse").addClass("focus-out");

pwd.setAttribute("type","text")

}else{

$("#eye span").removeClass("focus-out").addClass("focuse")

pwd.setAttribute("type","password")

}

});

```