AEM/CQ6.2：AdaptiveフォームにGoogle reCaptchaまたは組み込みのcaptchaを統合するにはどうすればよいですか？

Question

誰かがAdaptive Formを使用するフォームを作成しました。

フォームに何らかの種類のキャプチャ機能を含める必要があります。

1. 組み込みのcaptcha（Form => Captcha）を試してみました。私はキャプチャフィールドが必要に応じてチェックされていることを確認しましたが、キャプチャフィールドが空白の場合でもフォームを送信するのに問題はありません。

2. 私はGoogleのreCaptchaを組み込みたいと思っていました。私が見てきた最良のガイドはPracticalAEM articleです。しかし、この新しいコンポーネントを既存のセットアップにどのように組み込むかは実際には分かりません。

ありがとうございました！

Answer 1

Captchaは、アプリケーションクライアントとサーバーの両方に実装する必要があります。 はreCAPTCHAの作業方法について説明します：

1）ブラウザは、それはあなたが）記事に基づいたものです（site IDでreCAPTCHAのスクリプトでページをレンダリングする

のreCAPTCHAとGoogleがキャプチャコードでいくつかの長い文字列を戻ら2）ユーザーの回答（その瞬間に技術的にキャプチャはまだ検証されません）

3）あなたのフロントエンドは、（通常は、必須フィールドに置く）

4）バックエンドにreCAPTCHAのcaptcha codeを提出し、応答をどのように処理するかを決定する必要があります。（キャプチャまだ検証されない）

この部分は、それがすべてのCAPTCHAのための基本的なものですので、あなたが読ん資料に記載されていない：

5）バックエンドは現在site ID

ReCaptchaImpl reCaptcha = new ReCaptchaImpl(); 
    reCaptcha.setPrivateKey("your_private_key"); 

    String challenge = request.getParameter("recaptcha_challenge_field"); 
    String uresponse = request.getParameter("recaptcha_response_field"); 
    ReCaptchaResponse reCaptchaResponse = reCaptcha.checkAnswer(remoteAddr, challenge, uresponse); 

    if (reCaptchaResponse.isValid()) { 
     .... 
    } else { 
     //send response to browser with message "Captcha is invalid" 
    } 

ため captcha codeの検証のため captcha codeと要求グーグルをお読みください

googleからバックエンドへの応答のみがreCaptchaの検証です。

し、任意のCAPTCHAの実装のための2つの部分があります：

1）を使用すると、キャプチャチェック

2を満たすことができるフロントエンド）あなたはそのチェックが適切に行われたことを確認することができますバックエンド。

Answer 2

これが役立つかどうかを確認してください。私はこれを単純なhtml形式（アダプティブではない）で行っています。

フォルダ構造..

recaptcha (main component folder name) 
> _cq_editConfig.xml 
> .content.xml 
> dialog.xml 
> recaptch.html 

cq_editConfig.xml

<?xml version="1.0" encoding="UTF-8"?> 
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" 
    xmlns:jcr="http://www.jcp.org/jcr/1.0"  
    xmlns:nt="http://www.jcp.org/jcr/nt/1.0" 
    cq:disableTargeting="true" 
    jcr:primaryType="cq:EditConfig"/> 

.content。XML

​​3210

dialog.xml

<?xml version="1.0" encoding="UTF-8"?> 
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" 
jcr:primaryType="cq:Dialog" 
title="ABC reCaptcha Component"  
xtype="dialog"> 
<items jcr:primaryType="cq:WidgetCollection"></items> 
</jcr:root> 

recaptcha.html

<div class="col-md-12"> 
<div id="response-div" style="color:red; font-weight: bold;"></div> 
<script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit' async defer></script> 
<div id="rcaptcha" class="g-recaptcha" data-sitekey="SITE-KEY"></div> 
<input type="hidden" value="true" id="recaptchaRequired" name="recaptchaRequired" />  
<button id="addButton" class="btn plus btn-success">Submit</button> 
</div>   
</div> 

<script> 
var RC2KEY = 'SITE-KEY'; 
var doSubmit = false; 

function reCaptchaVerify(response) { 
    if (response === document.querySelector('.g-recaptcha-response').value) { 
    doSubmit = true; 
    } 
} 

function reCaptchaExpired() { 
    /* do something when it expires */ 
} 

function reCaptchaCallback() {  
    grecaptcha.render('rcaptcha', { 
    'sitekey': RC2KEY, 
    'callback': reCaptchaVerify, 
    'expired-callback': reCaptchaExpired 
    }); 
} 

$("#addButton").click(function (e) { 
    e.preventDefault(); 
    if (doSubmit) { 
     //alert('submit pressed'); 
     $("form:first").submit(); 
    } else { 
     //alert('recaptcha not selected'); 
     document.getElementById("response-div").innerHTML = "Recaptcha is required!";    
    } 
}); 

</script> 

注：置き換えSITE-KEY