so I tried to implement reCaptcha v2 into my form in OctoberCMS. For that the SmallContactForm plugin by Janvince offers a settings area, where the secret key and the site key can be stored. It also implements the needed scripts. In the end, my code looks like this
<form method="POST" action="LINK" accept-charset="UTF-8" class="form-group" id="scf-form-id-contactForm" enctype="multipart/form-data"><input name="_handler" type="hidden" value="contactForm::onFormSend"><input name="_session_key" type="hidden" value="sessionkey"><input name="_token" type="hidden" value="token">
<div class="form-group"><label class="control-label required" for="contactForm-name" >Name</label><input id="contactForm-name" class="form-control" name="name" type="text" required=""></div>
<div class="form-group"><label class="control-label required" for="contactForm-email" >Email</label><input id="contactForm-email" class="form-control" name="email" type="email" required=""></div>
<div class="form-group"><label class="control-label " for="contactForm-betreff" >Betreff</label><input id="contactForm-betreff" class="form-control" name="betreff" type="text"></div>
<div class="form-group"><label class="control-label required" for="contactForm-nachricht" >Ihre Nachricht</label><textarea id="contactForm-nachricht" class="form-control" name="nachricht" rows="5" required=""></textarea></div>
<div id="_protect-wrapper-contactForm" class="form-group _protect-wrapper"><label class="control-label">Please clear this field</label><input type="hidden" name="_form_created" value="ididddhcfi"><input id="_protect-contactForm" name="_protect" class="_protect form-control" value="http://"></div>
<script>
document.getElementById('_protect-contactForm').setAttribute('value', '');
document.getElementById('_protect-wrapper-contactForm').style.display = 'none';
</script>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="data-sitekey"></div>
</div>
<div id="submit-wrapper-contactForm" class="form-group"><button type="submit" data-attach-loading class="oc-loader bg-innotechblue text-white font-bold rounded px-4 py-2">Send</button></div>
</form>
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
The function behind the scenes:
if( Settings::getTranslated('add_google_recaptcha') ) {
try {
$response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".Settings::get('google_recaptcha_secret_key')."&response=".post('g-recaptcha-response')."&remoteip=".$_SERVER['REMOTE_ADDR']), true);
} catch(\Exception $e) {
Log::error($e->getMessage());
$errors[] = e(trans('janvince.smallcontactform::lang.settings.antispam.google_recaptcha_error_msg_placeholder'));
}
I already double checked if I switched site key and secret key. I also tried to implement the script manually over and behind the form, but I always get an error: Google reCAPTCHA validation error! also this error is displayed twice, but I'm not sure if thats important. The Im not a robot button is rendered fine, and I works as well, but when I send the form, I get the error.
I hope someone can help me! thanks in advance!
So the I looked up the Errors in the CMS and got this:
file_get_contents(): https:// wrapper is disabled in the server configuration by allow_url_fopen=0
Turns out my server did not allow url fopen. After changing that, everything worked. I also wrote the author of the plugin. He changed the source code, so it should work without the allow_url_fopen parameter.