CMS 統合 Web サイトでの recaptcha の実装に取り組んでいます。1 つ目は、javascript メソッドを呼び出して本文の読み込み時に recaptcha を作成する HTMl body タグです。
<body onload="return reloadRecaptcha();">
Recaptcha は、次のコードを使用してフォームの下に表示されます。recaptcha を生成する私の js メソッドは次のとおりです。
function reloadRecaptcha() {
console.log("@ reloadRecaptcha ");
var publicKey = "";
var strServername = location.hostname;
if (strServername.indexOf("01") >= 0 || strServername.indexOf("02") >= 0 ){
publicKey = "HARDCODED_INTERNAL_KEY1";
} else {
publicKey = "HARDCODED_PUBLIC_KEY2";
}
var div = "recap";
if (!$("#message").is(":empty")) {
console.log("@ if Recaptcha.create ");
Recaptcha.create(publicKey,div,{theme: "red", callback: Recaptcha.focus_response_field});
} else {
console.log("@ else Recaptcha.create ");
Recaptcha.create(publicKey,div,{theme: "red"});
}
console.log("@ Exit reloadRecaptcha ");
return false;
}
repatcha の回答を含むフォームをサーブレットに送信すると、サーブレットは回答を検証し、エラーが発生したときに同じフォームに転送します。ブラウザのコンソールに次のエラーが表示されます。
- CHROME で、エラー メッセージ "Uncaught TypeError: Cannot set property 'innerHTML' of null" @ 行 recaptcha_ajax.js:112。
- Firefox では、エラー メッセージ "TypeError: recaptcha.widget is null" @ line recaptcha_ajax.js:112 が表示されます。
エラー時にのみフォームjspに転送すると、フォームの初期ロード中ではなく、このエラーが発生する理由がわかりません。
私のサーバー側コード(サーブレット)のコードスニペット:
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("***** In the Captcha Validatation servlet**** ");
ReCaptchaImpl reCaptcha = new ReCaptchaImpl();
String remoteAddr = request.getRemoteAddr();
String strServerUrl = request.getServerName().toLowerCase();
String strPrivateKey = "";
if ((strServerUrl.indexOf("01") >= 0) || (strServerUrl.indexOf("02") >= 0))
strPrivateKey = getPropertyString("recaptcha.internal.privatekey");
else {
strPrivateKey = getPropertyString("recaptcha.external.privatekey");
}
reCaptcha.setPrivateKey(strPrivateKey);
String challenge = request.getParameter("recaptcha_challenge_field");
String uresponse = request.getParameter("recaptcha_response_field");
ReCaptchaResponse reCaptchaResponse = reCaptcha.checkAnswer(remoteAddr, challenge, uresponse);
HttpSession session = request.getSession(false);
if (session != null) {
String sessionId = session.getId();
Map paramMap = new HashMap();
for (Enumeration e = request.getParameterNames(); e.hasMoreElements(); ) {
String key = (String)e.nextElement();
String value = request.getParameter(key);
paramMap.put(key, value);
}
session.setAttribute("paramMap", paramMap);
if (reCaptchaResponse.isValid())
{
StringBuilder successUrl = new StringBuilder();
successUrl.append(getPropertyString("recaptcha.validationsuccess.url"));
successUrl.append("?evtvar=").append(request.getParameter("evtvar"));
successUrl.append("&vgnextoid=").append(request.getParameter("vgnextoid"));
RequestDispatcher rd = request.getRequestDispatcher(successUrl.toString());
rd.forward(request, response);
}
else
{
System.out.println("***** reCaptchaResponse INVALID *** ");
session.setAttribute("error1", getPropertyString("recaptcha.validationfailure.message"));
System.out.println("SERVLET PATH --> " + request.getServletPath());
String url_form = "/vgn-ext-templating/v/index.jsp?vgnextoid=40289c7c6099f210VgnVCM100000268315acRCRD&vgnextfmt=default";
System.out.println("Forwarding to the url after captcha validation --> " + url_form);
RequestDispatcher rd = request.getRequestDispatcher(url_form);
rd.forward(request, response);
}
}}
エラーからわかるのは、フォームをリロードして検証エラー メッセージを表示すると、div#recap が見つからないことです。
<div id="recap" style="height:130px;"></div>
これは、メイン フォームのすぐ下にある、私の html の一部として常に存在します。
この URL "http:///vgn-ext-templating/v/index.jsp?vgnextoid=40289c7c6099f210VgnVCM100000268315acRCRD&vgnextfmt=default" をブラウザーから直接ヒットすると、recaptcha とフォームは期待どおりに表示されますが、問題はエラーと転送時にのみ発生しますフォームに。どんな助けでも大歓迎です。