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

今天来说说自定义登录页面中，使用验证码来登录，关于怎么自定义登录界面可以看我前面的教程，先上图片：

从界面看分两步：
    第一步使用用户名，邮箱来接收验证码
    第二步，使用接收到的验证码来登录。
从代码上看需要调用三个接口：
   第一个：通过/webroot/decision/login/captcha/gain 请求让系统发送验证码到邮箱。
   第二个：通过/webroot/decision/captcha/check 请求来验证你通过邮箱获取到的验证码(这是自己写的controller实现的方法，系统自带的调用不成功)
   第三个：通过/webroot/decision/login/captcha 请求来使用验证码登录。

上代码：
   界面代码：

1. <div id="_loginDiv2">
   
2.     使用验证码登录
   
3.     <div>用户名:<input id="_userName2" value="admin" /></div>
   
4.     <div>邮箱:<input id="_email" value="47426305@qq.com" /></div>
   
5.     <div><input type="button" id="_getCapata" value="发送验证码" /></div>
   
6. 
   
7. 
   
8.     <div><br /><br /><br /><br /></div>
   
9. 
   
10.     <div>验证码:<input id="_capatacode" /></div>
    
11.     <div><input type="button" id="_login2" value="登录" /></div>
    
12. </div>

复制代码

当填写好用户名，邮箱之后点击发送验证码按钮将调用的js为：

1. //调用获取验证码接口返回的token，后面需要用
   
2.         var captchaSendToken = "";
   
3.         //使用用户名，邮箱，获取验证码
   
4.         var getCaptcha = function () {
   
5.             var pwdToken = ""//Math.random().toString(36).substr(2);
   
6.             $.ajax({
   
7.                 url: "/webroot/decision/login/captcha/gain",
   
8.                 type: "POST",
   
9.                 contentType: "application/json",
   
10.                 data: JSON.stringify({ "username": $("#_userName2").val(), type: "email", "receiver": $("#_email").val(), "captchaSendToken": pwdToken }),
    
11.                 dataType: "json", cache: !1, async: !0,
    
12.                 error: function (err) {
    
13.                     console.log(err)
    
14.                 },
    
15.                 complete: function (e, t) {
    
16.                     console.log("获取验证码结果:" + e);
    
17.                     if (t == "success") {
    
18.                         captchaSendToken = e.responseJSON.data;
    
19.                       //  alert("captchaSendToken:" + captchaSendToken)
    
20.                     }
    
21.                     else {
    
22. 
    
23.                     }
    
24.                 }
    
25.             })
    
26. 
    
27.         }

复制代码

   当请求发送到后台之后，系统会帮我们生成验证码以及将要返回的token，但是将验证码发送到邮箱需要我们自己来做，所以我们需要再插件项目中实现EmailServiceProvider扩展，自己来实现将验证码发送到邮箱，
   扩展代码为：

1. package com.fr.plugin.emailProvider;
   
2. 
   
3. import com.fr.log.FineLoggerFactory;
   
4. import com.fr.stable.email.EmailAttachmentProvider;
   
5. import com.fr.stable.fun.impl.AbstractEmailServiceProvider;
   
6. 
   
7. import javax.mail.MessagingException;
   
8. 
   
9. public class MyEmailServiceProvider extends AbstractEmailServiceProvider {
   
10.     @Override
    
11.     public void send(String email, String s1, String s2, String s3, String msg1, String msg2, EmailAttachmentProvider[] emailAttachmentProviders, String s6, EmailAttachmentProvider[] emailAttachmentProviders1) throws MessagingException {
    
12.         FineLoggerFactory.getLogger().info("自己发送邮件。。。。。。");
    
13.     }
    
14. }
    

复制代码

   实现自己去实现，我这里只理清思路，这里的参数值大概为：      
  从这里就能看到验证码，然后你使用找个验证码与返回的token来登录。下一个教程接着讲怎么使用这个验证码来登录。