Hello,
I have a requirement to include Google reCaptcha in an ADF page. This involves including a <div>...</div> inside ADF components. It is not working as intended. The reCaptcha component is not showing.
Here is the documentation on recaptcha: https://developers.google.com/recaptcha/docs/display
Here is the snippet inside my ADF page. I tried with and without the <f:verbatim> construct, but there is no change. Either case, nothing is displaying between "Captcha" in the header and the "Submit" button. Can someone provide any guidance?
<af:showDetailHeader xmlns:af="http://xmlns.oracle.com/adf/faces/rich" id="e799730315" text="Captcha" disclosed="true">
<af:panelGroupLayout xmlns:af="http://xmlns.oracle.com/adf/faces/rich" id="e8961476765" layout="vertical">
<af:resource type="javascript" source="https://www.google.com/recaptcha/api.js"/>
<af:resource type="javascript">
function isRecaptchaSuccessful() {
alert('captcha submitted');
var recaptchaResponse = grecaptcha.getResponse();
alert('captcha response=' + recaptchaResponse);
};
</af:resource>
<!-- <f:verbatim xmlns:f="http://java.sun.com/jsf/core" escape="false"> -->
<div id="gRecaptcha" class="g-recaptcha" data-sitekey="6LcjIA4TAAAAALgJOf0A35XY5tz0rnNZoRQeUUjr" data-callback="isRecaptchaSuccessful"/>
<!-- </f:verbatim> -->
<af:panelFormLayout xmlns:af="http://xmlns.oracle.com/adf/faces/rich" id="e4472705656" maxColumns="1" labelWidth="">
<af:commandToolbarButton xmlns:af="http://xmlns.oracle.com/adf/faces/rich" id="e3497918717" text="Submit" immediate="true"
actionListener="#{backingBeanScope.captchaBean.reCaptchaActionListener}"/>
</af:panelFormLayout>
</af:panelGroupLayout>
</af:showDetailHeader>