`
learnmore
  • 浏览: 588947 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

验证码kaptcha

 
阅读更多
以下内容摘自:http://code.google.com/p/kaptcha/wiki/HowToUse

Basic use of kaptcha in your webapp is quite easy. All you need to do is add the jar to your project, make a reference to the kaptcha servlet in your web.xml and then check the servlet session for the generated kaptcha value and compare it to what the user submits on your form.

For those of you looking for an audio kaptcha solution, this product probably won't ever support that unless someone else wants to work on it. Sorry.

    Note: If you are currently using JCaptcha in the same .war file as Kaptcha, you will have a conflict with the image generation library. You must remove JCaptcha. See this issue for details.

Example

Included in the distribution is an example .war file for you to play with. Note that this .war file will only work with Java 1.5 and higher. For easiest setup, download Tomcat. I use 5.5.x and I download the 'Core' distribution.

Then, copy the kaptcha.war file into the webapps directory. Make sure it is named 'kaptcha.war'. Then, start up Tomcat. I type on Unix: ./bin/catalina.sh run or on Windows: bin/catalina.bat run.

Now, visit: http://localhost:8080/kaptcha/KaptchaExample.jsp

If you edit the web.xml file in the exploded kaptcha.war folder you can test changes to the ConfigParameters quite easily.
Details

Here are the details of how to integrate Kaptcha into your own application.

    Put the appropriate .jar file (depending on which JDK you are using) into the WEB-INF/lib directory of your .war file.

    Put the image tag into your page (checking that the path to the .jpg matches up with what is defined in your web.xml below for the url-pattern):

<form action="submit.action">
    <img src="kaptcha.jpg" /> <input type="text" name="kaptcha" value="" />
</form>

    Put the reference in your web.xml (checking that the url-pattern path matches up with what you put in your html fragment above):

<servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping>

    In your code that manages the submit action:

String kaptchaExpected = (String)request.getSession()
    .getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
String kaptchaReceived = request.getParameter("kaptcha");

if (kaptchaReceived == null || !kaptchaReceived.equalsIgnoreCase(kaptchaExpected))
{
    setError("kaptcha", "Invalid validation code.");
}

    Make sure to start your JDK with -Djava.awt.headless=true

That is it!
Extra

If you love JQuery like I do, you can use it to easily solve the problem that happens when someone can't read the image that was generated for them. What this does is bind a function to the onclick handler for the img element so that when the image is clicked on, it will get reloaded. Note the use of the query string to append a random number to the end. This is because the browser has already cached the image and the query string makes it look like a new request.

<img src="/kaptcha" width="200" id="kaptchaImage" />
<script type="text/javascript">
    $(function(){
        $('#kaptchaImage').click(function () { $(this).attr('src', '/kaptcha.jpg?' + Math.floor(Math.random()*100) ); })
    });
</script>
<br /><small>Can't read the image? Click it to get a new one.</small>

If you want to get fancy, you can add an extra visual effect when refreshing the image. This example uses the fadeIn() effect when you click on it:

  $('#kaptchaImage').click(function () {
    $(this).hide()
      .attr('src', '/kaptcha.jpg?' + Math.floor(Math.random()*100) )
      .fadeIn();
  })

关于验证码的扩展配置:
Configuration is done through web.xml. All values can be left blank and a default value will be chosen.

Below is an example of the init-param you would add to your web.xml. If you want to set other variables, then you would add more init-param blocks.

<init-param>
    <param-name>kaptcha.border</param-name>
    <param-value>yes</param-value>
</init-param>

Note: This only works with the KaptchaServlet. SimpleServlet does not pay attention to the web.xml parameters.
Details

These values are stored in the com.google.code.kaptcha.Constants class.

Constant Description Default
kaptcha.border Border around kaptcha. Legal values are yes or no. yes
kaptcha.border.color Color of the border. Legal values are r,g,b (and optional alpha) or white,black,blue. black
kaptcha.border.thickness Thickness of the border around kaptcha. Legal values are > 0. 1
kaptcha.image.width Width in pixels of the kaptcha image. 200
kaptcha.image.height Height in pixels of the kaptcha image. 50
kaptcha.producer.impl The image producer. com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.impl The text producer. com.google.code.kaptcha.text.impl.DefaultTextCreator
kaptcha.textproducer.char.string The characters that will create the kaptcha. abcde2345678gfynmnpwx
kaptcha.textproducer.char.length The number of characters to display. 5
kaptcha.textproducer.font.names A list of comma separated font names. Arial, Courier
kaptcha.textproducer.font.size The size of the font to use. 40px.
kaptcha.textproducer.font.color The color to use for the font. Legal values are r,g,b. black
kaptcha.textproducer.char.space The space between the characters 2
kaptcha.noise.impl The noise producer. com.google.code.kaptcha.impl.DefaultNoise
kaptcha.noise.color The noise color. Legal values are r,g,b. black
kaptcha.obscurificator.impl The obscurificator implementation. com.google.code.kaptcha.impl.WaterRipple
kaptcha.background.impl The background implementation. com.google.code.kaptcha.impl.DefaultBackground
kaptcha.background.clear.from Starting background color. Legal values are r,g,b. light grey
kaptcha.background.clear.to Ending background color. Legal values are r,g,b. white
kaptcha.word.impl The word renderer implementation. com.google.code.kaptcha.text.impl.DefaultWordRenderer
kaptcha.session.key The value for the kaptcha is generated and is put into the HttpSession. This is the key value for that item in the session. KAPTCHA_SESSION_KEY
kaptcha.session.date The date the kaptcha is generated is put into the HttpSession. This is the key value for that item in the session. KAPTCHA_SESSION_DATE
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics