java - Struts 2 フォームでの SimpleCaptcha の表示

Question

Struts 2で実装しようとしていますSimpleCaptchaが、これまでのところ画像が表示されています。ただし、それはの上部に表示され<s:form>ます。

ここに画像の説明を入力

register.jsp:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<head>
...
<s:head />
</head>

<body>
  <b>REGISTER</b>
  <p>Please fill up the form below.</p>
  <s:form action="register" method="post">
    <s:textfield label="Enter username" key="userId" maxlength="25"
      size="30" />
    <s:textfield label="Enter email" key="userEmail1" type="email"
      placeholder="someone@domain.com" size="30" />
    <s:textfield label="Re-enter email" key="userEmail2" type="email"
      placeholder="someone@domain.com" size="30" />
    <s:password label="Enter password" key="userPassword1" size="30" />
    <s:password label="Re-enter password" key="userPassword2"
      size="30" />
    <img src="<c:url value='simple-captcha.png' />" />
    <br />
    Cannot read? Refresh page for new CAPTCHA.                      
    <s:textfield label="Enter CAPTCHA" key="captchaAnswer" size="30" />
    <s:submit value="Register" />
  </s:form>
</body>

Enter CAPTCHAコードで指定されているように、テキストフィールドの上に画像を表示するにはどうすればよいですか?

score 1 · Accepted Answer

画像はcaptchaアクションによって生成される必要があります。<img>次に、タグでこのアクションへの URL を提供します。プロジェクトにキャプチャを実装するには、以下の手順に従います

jar を Web プロジェクトクラスパスに追加しますsimplecaptcha-1.2.1.jar。通常、web-inf/libフォルダー内。
新しいアクションクラスを追加RegisterAction

注: 次のコードでは、コンベンションプラグインを使用してアクションをマップしています。簡単にするために、フォームの送信時にアクションクラスのいくつかのメソッドを呼び出すために DMI が使用されています。DMI を有効にするには、次の定数を使用しますstruts.xml。

<constant name="struts.enable.DynamicMethodInvocation" value="true"/>

RegisterAction.java:

public class RegisterAction extends ActionSupport {
  private String userId;
  private String userEmail1;
  private String userEmail2;
  private String userPassword1;
  private String userPassword2;

  private String captchaResponse;
  private InputStream inputStream;

  //getters and setters

  public String create() {
    //RegisterAction is the form bean of the current action and captchaResponse is the field of user input

    String answer = (String) ActionContext.getContext().getSession().get("CorrectAnswer");
    if (answer == null || getCaptchaResponse()==null || !answer.equals(getCaptchaResponse())){
      addFieldError("captchaResponse", getText("error.captcha"));
    }
    return SUCCESS;
  }

  @Action(value = "captcha", results = {@Result(type="stream", params = {"contentType", "image/jpeg"})})
  public String captcha() {
    try {
      Captcha captcha = new Captcha.Builder(200, 50).addText(new DefaultTextProducer()).gimp(new DropShadowGimpyRenderer()).build();
      ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
      //write the image
      CaptchaServletUtil.writeImage(outputStream, captcha.getImage());
      //store the answer for this in session
      ActionContext.getContext().getSession().put("CorrectAnswer", captcha.getAnswer());
      //return image
      inputStream = new ByteArrayInputStream(outputStream.toByteArray());
      return SUCCESS;
    } catch (Exception e) {
      e.printStackTrace();
      throw e;
    }

  }

}

RegisterAction.propertiesエラーキーの次の値が含まれています。

RegisterAction.properties:

error.captcha=Invalid value of shown text!

したがって、成功したか、キャプチャに関するエラーに追加するかを確認します。

register.jsp通常は追加web-inf\content

register.jsp:

<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
  <meta charset="UTF-8">
  <title>Register</title>
</head>
<body>
<b>REGISTER</b>
<p>Please fill up the form below.</p>
<s:form action="register" method="post">
  <s:textfield label="Enter username" key="userId" maxlength="25"
               size="30" />
  <s:textfield label="Enter email" key="userEmail1" type="email"
               placeholder="someone@domain.com" size="30" />
  <s:textfield label="Re-enter email" key="userEmail2" type="email"
               placeholder="someone@domain.com" size="30" />
  <s:password label="Enter password" key="userPassword1" size="30" />
  <s:password label="Re-enter password" key="userPassword2"
              size="30" />
  <tr><td>
  <img id="captchaImg" src="<s:url action='captcha'/>" alt="Captcha Image" height="45">
  <img src="<c:url value='/images/reload.jpg' />" alt="Reload" onclick="document.forms[0].captchaImg.src='<s:url action='captcha'/>'+'?id='+Math.random();" style="cursor:pointer"/>
  <s:textfield label="Enter CAPTCHA" key="captchaResponse" size="30" requiredLabel="*"/>
  <tr><td>
  Cannot read? Refresh page for new CAPTCHA.
  </td></tr>
  <s:submit method="create" value="Register" />
</s:form>

</body>
</html>

これにより、値を入力するための Captcha とテキストフィールド、フィールドにエラーを表示するための Struts エラーメッセージcaptchaResponse、および更新アイコンが作成されます。

注: ここで使用した良いトリックは、javascriptMath.random()関数です。この方法により、Firefox などの特定のブラウザーが URL をキャッシュし、同じキャプチャイメージを投稿し続けることを防ぎます。これにより、何もしなくても新しい値を取得することが強制されます。

これは次のようになります。ここに画像の説明を入力

詳細については、Web サイトを参照してください: SimpleCaptcha

java - Struts 2 フォームでの SimpleCaptcha の表示

2 に答える 2

Related

Reference