帆软报表决策系统自定义登录界面使用验证码登录教程二

龚斌1 · 插件开发者

前面说到调用获取验证码接口后，会向我们的邮箱发送验证码，并且接口会返回一个captchaSendToken。
下一步就是使用验证码来进行登录，进行登录之前需要调用接口/webroot/decision/captcha/check来验证我们输入的验证码，代码如下：

var checkCaptcha = function () {
$.ajax({
url: "/webroot/decision/captcha/check",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ "token": captchaSendToken, "captcha": $("#_capatacode").val(), "validity": -1 }),
dataType: "json",
cache: !1,
async: !0,
error: function (err) {
console.log(err)
},
complete: function (e, t) {
console.log(e.responseText)
if ("success" == t) {
data = JSON.parse(e.responseText)
console.log(data)
loginByCaptcha();
}
}
})
}

复制代码

/webroot/decision/captcha/check接口对应的后端代码为：

package com.fr.plugin.controller;
import com.fr.decision.webservice.Response;
import com.fr.decision.webservice.annotation.LoginStatusChecker;
import com.fr.decision.webservice.bean.authentication.LoginCaptchaBean;
import com.fr.decision.webservice.v10.login.LoginService;
import com.fr.third.springframework.stereotype.Controller;
import com.fr.third.springframework.web.bind.annotation.RequestBody;
import com.fr.third.springframework.web.bind.annotation.RequestMapping;
import com.fr.third.springframework.web.bind.annotation.RequestMethod;
import com.fr.third.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@Controller
@LoginStatusChecker(
required = false //不需要验证是否登录
)
public class CaptchaController {
@RequestMapping(
value = {"/captcha/info"},
method = {RequestMethod.GET}
)
@ResponseBody
public Response getLastLoginInfo(HttpServletRequest req, HttpServletResponse res) throws Exception {
return Response.success();
}
@RequestMapping(
value = {"/captcha/check"},
method = {RequestMethod.POST}
)
@ResponseBody
public Response checkLoginCaptcha(HttpServletRequest req, HttpServletResponse res, @RequestBody LoginCaptchaBean loginCaptchaBean) throws Exception {
LoginService.getInstance().checkLoginCaptcha(loginCaptchaBean);
return Response.success();
}
}

复制代码

调用LoginService.getInstance().checkLoginCaptcha(loginCaptchaBean)来对验证码进行核对，必须经过这一步，否则登录不成功。

最后进行真正的登录，使用/webroot/decision/login/captcha接口来登录，代码如下：

var loginByCaptcha = function () {
$.ajax({
url: "/webroot/decision/login/captcha",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ "token": captchaSendToken, "captcha": $("#_capatacode").val(), "validity": -1 }),
dataType: "json",
cache: !1,
async: !0,
error: function (err) {
console.log(err)
},
complete: function (e, t) {
console.log(e.responseText)
if ("success" == t) {
data = JSON.parse(e.responseText)
console.log(data)
document.cookie = "fine_auth_token=" + data.data.accessToken + "; path=/";
// $.cookie('fine_auth_token', data.data.accessToken, { path: '/' });
window.location.href = data.data.originUrlResponse.originUrl
}
}
})
}

复制代码

登录成功后就会进入主界面了。

最后，验证码登录其实有两种，一种是邮箱接收验证码，一种是手机短信，他俩的不同实现方式两个地方：
1 type不同，邮箱是email，手机是mobile
2 都需要自己来实现发送逻辑，验证码发送到邮箱，验证码发送到手机短信，都需要通过扩展来实现，手机通过扩展SMSServiceProvider，邮箱通过扩展EmailServiceProvider

编辑于 2021-3-26 10:49

0回帖数	1关注人数	4402浏览人数
最后回复于：2021-5-21 17:13

提问

帆软报表决策系统自定义登录界面 使用验证码登录 教程二

帆软报表决策系统自定义登录界面使用验证码登录教程二