今天来说说自定义登录页面中，使用验证码来登录，关于怎么自定义登录界面可以看我前面的教程，先上图片：
从界面看分两步： 第一步使用用户名，邮箱来接收验证码 第二步，使用接收到的验证码来登录。从代码上看需要调用三个接口： 第一个：通过/webroot/decision/login/captcha/gain 请求让系统发送验证码到邮箱。 第二个：通过/webroot/decision/captcha/check 请求来验证你通过邮箱获取到的验证码(这是自己写的controller实现的方法，系统自带的调用不成功) 第三个：通过/webroot/decision/login/captcha 请求来使用验证码登录。 上代码： 界面代码：
<div id="_loginDiv2">
使用验证码登录
<div>用户名:<input id="_userName2" value="admin" /></div>
<div>邮箱:<input id="_email" value="47426305@qq.com" /></div>
<div><input type="button" id="_getCapata" value="发送验证码" /></div>
<div><br /><br /><br /><br /></div>
<div>验证码:<input id="_capatacode" /></div>
<div><input type="button" id="_login2" value="登录" /></div>
</div>
当填写好用户名，邮箱之后点击发送验证码按钮将调用的js为：
//调用获取验证码接口返回的token，后面需要用
var captchaSendToken = "";
//使用用户名，邮箱，获取验证码
var getCaptcha = function () {
var pwdToken = ""//Math.random().toString(36).substr(2);
$.ajax({
url: "/webroot/decision/login/captcha/gain",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ "username": $("#_userName2").val(), type: "email", "receiver": $("#_email").val(), "captchaSendToken": pwdToken }),
dataType: "json", cache: !1, async: !0,
error: function (err) {
console.log(err)
},
complete: function (e, t) {
console.log("获取验证码结果:" + e);
if (t == "success") {
captchaSendToken = e.responseJSON.data;
// alert("captchaSendToken:" + captchaSendToken)
}
else {
}
}
})
}
当请求发送到后台之后，系统会帮我们生成验证码以及将要返回的token，但是将验证码发送到邮箱需要我们自己来做，所以我们需要再插件项目中实现EmailServiceProvider扩展，自己来实现将验证码发送到邮箱， 扩展代码为:
package com.fr.plugin.emailProvider;
import com.fr.log.FineLoggerFactory;
import com.fr.stable.email.EmailAttachmentProvider;
import com.fr.stable.fun.impl.AbstractEmailServiceProvider;
import javax.mail.MessagingException;
public class MyEmailServiceProvider extends AbstractEmailServiceProvider {
@Override
public void send(String email, String s1, String s2, String s3, String msg1, String msg2, EmailAttachmentProvider[] emailAttachmentProviders, String s6, EmailAttachmentProvider[] emailAttachmentProviders1) throws MessagingException {
FineLoggerFactory.getLogger().info("自己发送邮件。。。。。。");
}
}
实现自己去实现，我这里只理清思路，这里的参数值大概为：
从这里就能看到验证码，然后你使用找个验证码与返回的token来登录。下一个教程接着讲怎么使用这个验证码来登录。