开放原子开发者工作坊

一、验证码所需jar包

<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

<!-- https://mvnrepository.com/artifact/com.jhlabs/filters -->
<dependency>
    <groupId>com.jhlabs</groupId>
    <artifactId>filters</artifactId>
    <version>2.0.235</version>
</dependency>

二、配置修改

1.打开WEB-INF/login-webflow.xml 找到这段代码

<action-state id="generateLoginTicket">
        <evaluate expression="generateLoginTicketAction.generate(flowRequestContext)" />
        <transition on="generated" to="viewLoginForm" />
    </action-state>
    
    <view-state id="viewLoginForm" view="casLoginView" model="credential">
        <binder>
            <binding property="username" />
            <binding property="password" />
        </binder>
        <on-entry>
            <set name="viewScope.commandName" value="'credential'" />
        </on-entry>
        <transition on="submit" bind="true" validate="true" to="realSubmit">
            <evaluate expression="authenticationViaFormAction.doBind(flowRequestContext, flowScope.credential)" />
        </transition>
    </view-state>

2.username、password两个属性，这就是对应我们登录页面上的表单。所以我们要在这边加上验证码这个属性。

<binder>
            <binding property="username" />
            <binding property="password" />
             <!-- 新添加 验证码-->
            <binding property="captcha" />
        </binder>

3. 然而新增的属性在org.jasig.cas.authentication.UsernamePasswordCredential.java文件中并不存在所以，我们需要自己写个java文件去重写掉它，并添加上

captcha这个属性

import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

import org.jasig.cas.authentication.UsernamePasswordCredential;


public class UsernamePasswordCaptchaCredential extends UsernamePasswordCredential{

    /**
     * 
     */
    private static final long serialVersionUID = -1688519399926023651L;
    
    @NotNull
    @Size(min=1,message = "required.captcha")
    private String captcha;

    public String getCaptcha() {
        return captcha;
    }

    public void setCaptcha(String captcha) {
        this.captcha = captcha;
    }
    
    
    
}

4.这个新增的javabean需要回到 login-webflow.xml中做一些修改，让cas可以找到我们这个javabean

<!-- 
    修改用户验证javaBean将cas原有的 JavaBean替换成我们的javaBean
    <var name="credential" class="org.jasig.cas.authentication.UsernamePasswordCredential" />
     -->
    <var name="credential" class="com.nc.cas.authentication.UsernamePasswordCaptchaCredential" />

5.准备工作做完了，接下来就需要添加验证码了，login-webflow.xml中找到这段代码，<transition on="submit" bind="true" validate="true" to="realSubmit">

将Cas原有的realSubmit替换成先去校验验证码的操作validatorCaptcha ，验证码校验成功返回SUCCESS 在去指向将Cas原有的realSubmit校验

<view-state id="viewLoginForm" view="casLoginView" model="credential">
        <binder>
            <binding property="username" />
            <binding property="password" />
             <!-- 新添加 验证码属性-->
            <binding property="captcha" />
        </binder>
        <on-entry>
            <set name="viewScope.commandName" value="'credential'" />
        </on-entry>
        <transition on="submit" bind="true" validate="true" to="validatorCaptcha">
            <evaluate expression="authenticationViaFormAction.doBind(flowRequestContext, flowScope.credential)" />
        </transition>
    </view-state>
    
 <!-- 新增校验验证码的操作 -->
    <action-state id="validatorCaptcha">
        <evaluate expression="authenticationViaFormAction.validatorCaptcha(flowRequestContext, flowScope.credential, messageContext)"></evaluate>
        <transition on="error" to="generateLoginTicket" />
        <transition on="success" to="realSubmit" />
    </action-state>    

 在校验验证码这段代码中我们可以看到 authenticationViaFormAction.validatorCaptcha()这个方法，所以我们需要去后台在去添加验证码校验的代码

<evaluate expression="authenticationViaFormAction.validatorCaptcha(flowRequestContext, flowScope.credential, messageContext)"></evaluate>

6.后台需要重写下 authenticationViaFormAction.java 添加我们新的验证规则

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.jasig.cas.authentication.Credential;
import org.jasig.cas.web.flow.AuthenticationViaFormAction;
import org.jasig.cas.web.support.WebUtils;
import org.springframework.binding.message.MessageBuilder;
import org.springframework.binding.message.MessageContext;
import org.springframework.util.StringUtils;
import org.springframework.webflow.execution.RequestContext;

import com.nc.cas.authentication.UsernamePasswordCaptchaCredential;

/**
 * 验证
 * @author Carl 
 *
 */
public class CnBlogAuthenticationViaFormAction extends AuthenticationViaFormAction{
    
    
    public final String validatorCaptcha(final RequestContext context, final Credential credential,
            final MessageContext messageContext){
        
            final HttpServletRequest request = WebUtils.getHttpServletRequest(context);  
            HttpSession session = request.getSession();  
            String captcha = (String)session.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);  
            session.removeAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);  
            
            UsernamePasswordCaptchaCredential upc = (UsernamePasswordCaptchaCredential)credential;  
            String submitAuthcodeCaptcha =upc.getCaptcha(); 
            
            
            if(!StringUtils.hasText(submitAuthcodeCaptcha) || !StringUtils.hasText(submitAuthcodeCaptcha)){
                messageContext.addMessage(new MessageBuilder().error().code("required.captcha").build());
                return ERROR; 
            }  
            if(submitAuthcodeCaptcha.equals(captcha)){    
                return SUCCESS;  
            }  
            messageContext.addMessage(new MessageBuilder().error().code("error.authentication.captcha.bad").build());
            return ERROR;    
    }
}

这边有抛出两个异常，这两个异常信息 required.captcha、error.authentication.captcha.bad 需要在 messages_zh_CN.properties 文件下添加

required.captcha=请输入验证码
error.authentication.captcha.bad=您输入的验证码有误

 三、前台添加验证

1.打开src/cas-theme-default.properties 配置js路径

standard.custom.css.file=/css/cas2.css
javascript.jquery.file=/js/jquery-1.8.2.min.js

 2.打开top.jsp引入所需的js，这里的code对应 cas-theme-default.properties中的键

<spring:theme code="javascript.jquery.file" var="jqueryJs" />
  <script type="text/javascript" src="<c:url value="${jqueryJs}" />"></script>

3.接来下就可以去添加我们的验证码了 html 代码如下：

<input type="text" class="inputstyle" id="captcha"
                            name="captcha" placeholder="请输入验证码" tabindex="3" type="captcha" style="width: 135px;">
                        <img align="absmiddle" id="kaptcha" src="kaptcha.jpg" >
                        <a id="changeCaptcha" href="javascript:void(0);">换一张</a>

<script type="text/javascript">
    $(function(){
        $('#changeCaptcha').click(function() {   
                   $("#kaptcha").hide().attr('src','kaptcha.jpg?' + Math.floor(Math.random() * 100)).fadeIn();     
        });
    });
</script>

注：这里input标签 name属性对应的就是后台新增的字段 <binding property="captcha" /> 验证码所需要的html必须写在

<form:form method="post" id="fm1" commandName="${commandName}" htmlEscape="true">标签内

附上验证成功和失败的效果