Monday, November 19, 2012

Adding CAPTCHA to WebCenter/ ADF web application

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is type of challenge-response test used in computing as attempt to ensure that response is generated by human being. This is requirement for several web sites, especially on registration forms

Sample CAPTCHA is shown below
Figure 1

1. Download Simplecaptcha-1.2.1.jar. This is available for download for free on Internet. This is also available under MyWebApplicationWithCaptcha\Portal\public_html\WEB-INF\lib in application provided for download

2. Create new WebCenter Portal - Framework Application at C:\JDeveloper\mywork

3.  Create lib folder as follows
C:\JDeveloper\mywork\MyWebApplicationWithCaptcha\Portal\public_html\WEB-INF\lib

4. Paste Simplecaptcha-1.2.1.jar under lib folder

5. In JDeveloper, select View → Application Navigator, add Simplecaptcha-1.2.1.jar by right clicking Portal, Project Properties… → Libraries and Classpath → Add JAR/ Directory… Browse to
C:\JDeveloper\mywork\MyWebApplicationWithCaptcha\Portal\public_html\WEB-INF\lib

6. Add following to web.xml of application between <web-app></web-app>

<servlet>
  <servlet-name>CaptchaServlet</servlet-name>
  <servlet-class>nl.captcha.servlet.SimpleCaptchaServlet</servlet-class>
  <init-param>
    <param-name>width</param-name>
    <param-value>250</param-value>
  </init-param>
  <init-param>
    <param-name>height</param-name>
    <param-value>75</param-value>
  </init-param>
</servlet>


<servlet-mapping>
  <servlet-name>CaptchaServlet</servlet-name>
  <url-pattern>/captchaservlet</url-pattern>
</servlet-mapping> 


7. Add following code in MyRegistrationForm.jspx file that needs to have CAPTCHA

<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=windows-1252"/>
  <f:view>
    <af:document id="d1" title="My Registration Form">
      <af:form id="f1">
        <af:panelFormLayout id="pfl1">
          <af:panelGroupLayout id="pgl" layout="vertical">
            <af:image source="/captchaservlet" id="i1" clientComponent="true"
                      inlineStyle="width:251px; height:76.0px;"/>
            <af:commandButton text="Refresh CAPTCHA" id="cb2" immediate="true">
              <af:clientListener method="refreshCaptcha" type="action"/>
            </af:commandButton>
          </af:panelGroupLayout>
          <af:panelGroupLayout id="pgl1" layout="horizontal" halign="left">
            <af:inputText id="it1" label="Enter text as seen in above image: "
                          value="#{requestScope.bestGuess}"/>
            <af:commandButton text="Go" id="cb1"
                              actionListener="#{MyRegistrationFormBean.verifyAnswer}"></af:commandButton>
          </af:panelGroupLayout>
          <af:message id="m1" messageType="info" for="it1"/>
        </af:panelFormLayout>
      </af:form>
      <af:resource type="javascript">
        function refreshCaptcha(evt) {
            try {
                var component = evt.getSource();
                var i1 = component.findComponent("i1");
                i1.setSource(i1.getSource() + "?force=" + new Date().getMilliseconds());
                evt.cancel();
                return false;
            }
            catch (err) {
                alert(err);
            }
            return false;
        }
      </af:resource>
    </af:document>
  </f:view>
</jsp:root>



8. Open pages.xml. Drag drop MyRegistrationForm.jspx under Root. Select Delegate Security radio button. Ensure anonymous-role has View permission check box checked

9. Add a package mypackage under Portal and MyRegistrationFormBean in 
request scope as follows. Open MyCapthcaPage.jspx in Design mode. Double click Go button. Enter values as shown below
Figure 2
Click New...

Figure 3
Click OK

Figure 4
Click OK


10. Implementation of MyRegistrationFormClass.java class is as follows


package myPackage;

import java.io.UnsupportedEncodingException;

import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import javax.servlet.http.HttpServletRequest;

import nl.captcha.Captcha;

import oracle.adf.view.rich.context.AdfFacesContext;

public class MyRegistrationFormClass {
    public MyRegistrationFormClass() {
    }

    public void verifyAnswer(ActionEvent actionEvent) {
        FacesContext fctx = FacesContext.getCurrentInstance();
        ExternalContext ectx = fctx.getExternalContext();
        HttpServletRequest request = (HttpServletRequest)ectx.getRequest();
        Captcha captcha = (Captcha)ectx.getSessionMap().get(Captcha.NAME);
        try {
            request.setCharacterEncoding("UTF-8");
        } catch (UnsupportedEncodingException e) {
            System.out.println("UTF not supported!");
        }
        String myAnswer = (String)ectx.getRequestMap().get("bestGuess");
        if (myAnswer != null && captcha.isCorrect(myAnswer)) {
            getMessage("Congratulations! You are human");
        } else {
            getMessage("Sorry! You could be a computer!");
            UIComponent panelLabelAndMessage =
                ((UIComponent)actionEvent.getSource()).getParent().getParent();
            UIComponent panelFormlayout = panelLabelAndMessage.getParent();
            AdfFacesContext.getCurrentInstance().addPartialTarget(panelFormlayout);
        }
    }

    private void getMessage(String myMessage) {
        FacesContext fctx = FacesContext.getCurrentInstance();
        fctx.addMessage("it1",
                        new FacesMessage(FacesMessage.SEVERITY_INFO, null,
                                         myMessage));
    }
}


11. To test application, download it by clicking on 'Download Application' below, unzip it, right click MyRegistrationForm.jspx in Application Navigator and click Run
Download application

35 comments:

  1. Thank you so much for this review! I found it very helpful, this seem like a program that would be of great use to me. Keep it up!

    Ahman Adam - Web Design Dubai

    ReplyDelete
  2. hi
    i use this recommendation and it's work for me but i change the design of page and move the registration form to the popup and unfortunately it doesn't work in popup
    and when user click the refresh button captcha dot'n changed and show it's last text(image)
    can you help me ??!
    i add the refresh button to the captcha image partial target but noting change!!

    ReplyDelete
  3. Softage is one indicated supplement that has expertized in the ground of refreshment designing and effortlessly gives convoluted and propelled dissolvable to your endeavor.java programming

    ReplyDelete
  4. I feel pleasure to read the content that you are posting.web design tips

    ReplyDelete
  5. Enjoyed every detail of this impressive blog. Specially how the writer has instilled life to it.
    wordpress website

    ReplyDelete
  6. I read your post and i appreciate your efforts. The information that you share in the above article is very nice and useful. All the things that you share with people, are very nice.

    Website design in Dubai

    ReplyDelete
  7. You have to pick a creative web design organization that can satisfy the greater part of your needs from making a website which suits your image picture and charms the client. https://addons.prestashop.com/en/sliders-galleries/26873-slider-pro.html%22

    ReplyDelete
  8. The topic ought to ideally be pertinent to the administrations/item that your organization is managing. hybrid app development

    ReplyDelete
  9. Code is great. If you are looking to get work done by a reliable freelance web designer, feel free to contact.
    Thanks,
    Web service provider dubai, Freelance web designer dubai

    ReplyDelete
  10. We are a professional SEO company in Dubai. Our aim is to help you in growing your business online. We’re expert in organic SEO Dubai, we do our best to get your website ranked on your keywords as soon as possible.
    SEO dubai

    ReplyDelete
  11. Domain hosting wiki: for bloggers, business owners and webmasters looking for starting, maintaining and knowing more about domains and hosting
    business

    ReplyDelete
  12. Wow, thank you for sharing this information. I can't wait to download ant test the app!
    Should You Choose VueJS Over React?

    ReplyDelete
    Replies
    1. Today Vue.js is one of the top JavaScript frameworks and it is replacing Angular and React in many cases. Read more React vs Vue.js

      Delete
  13. There's one more hot research vue vs react. I guess it will be useful for you!

    ReplyDelete
  14. Al Muheet Tech is also planning to add CAPTCHA to their website to make their website secure from spam bots

    ReplyDelete
  15. This is an awesome article, Given such a great amount of information in it, These sort of articles keeps the clients enthusiasm for the site, and continue sharing more ... good fortunes.
    internet marketing

    ReplyDelete
  16. Your post is amazing. keep sharing the informative post like this.
    SEO Dubai

    ReplyDelete
  17. I can give you the address Here you will learn how to do it correctly. Read and write something good.
    mason soiza

    ReplyDelete
  18. Well, If there's a way then it's better small business sites to have features like this.
    We are a Website Design Company Dubai it is difficult for us and this blog made it easy :) Thanks a bunch!

    ReplyDelete
  19. Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.
    Data Science training in Chennai
    Data science training in Bangalore
    Data science training in pune
    Data science online training
    Data Science Interview questions and answers
    Data Science Tutorial

    ReplyDelete
  20. This is the exact information I am been searching for, Thanks for sharing the required infos with the clear update and required points. To appreciate this I like to share some useful information regarding Microsoft Azure which is latest and newest,

    Regards,
    Ramya

    azure training in chennai
    azure training center in chennai
    best azure training in chennai
    azure devops training in chenna
    azure training institute in chennai

    ReplyDelete
  21. I have read your blog its very attractive and impressive. I like it your blog.
    Data Science course in Bangalore | Best Power BI course in marathahalli

    ReplyDelete
  22. I have to search sites with relevant information on given topic and provide them to teacher our opinion and the article.
    big data course

    ReplyDelete
  23. https://www.trishanatechnologies.com

    ReplyDelete
  24. https://www.trishanatechnologies.com

    ReplyDelete
  25. smart outsourcing solutions is the best outsourcing training
    in Dhaka, if you start outsourcing please
    visit us: Seo training in dhaka
    seo training in bangladesh

    ReplyDelete