Giter VIP home page Giter VIP logo

statamic-recaptcha's Introduction

For Statamic V3, please use the new Captcha addon: https://github.com/aryehraber/statamic-captcha


Recaptcha (Statamic V2)

Protect your Statamic forms using reCAPTCHA or hCaptcha.

This addon allows you to protect your Statamic forms from spam and abuse using reCAPTCHA or hCaptcha service.

After the initial setup, all you need to do is add the {{ recaptcha }} tag inside your forms, easy peasy!

reCAPTCHA

Setup

  1. Firstly, copy the Recaptcha folder into site/addons/.

  2. Next, you'll have to add reCAPTCHA's API script to your site's <head> using {{ recaptcha:head }}. You may also want to look into Statamic's Yield & Section tags to only render the script when needed.

  3. Then configure which forms will be using Recaptcha via the settings in the CP (Configure > Addons > Recaptcha). Here you can also customise the error message shown when validation fails, as well as various other settings.

  4. Finally, head over to https://www.google.com/recaptcha/admin, or https://dashboard.hcaptcha.com to create your SITE_KEY & SECRET and add them to Recaptcha's settings. Alternatively, add them to the site's .env file using RECAPTCHA_SITE_KEY & RECAPTCHA_SECRET. Please note: Recaptcha's Addon settings will take precedence over the .env settings.

Usage

<head>
    <title>My Awesome Site</title>

    {{ recaptcha:head }}
</head>
<body>
    {{ form:create in="my-awesome-form" }}

        <!-- Add your fields like normal -->

        {{ recaptcha }}

    {{ /form:create }}
</body>

This will automatically render the reCAPTCHA element on the page (if a valid SITE_KEY was found). After the form is submitted, the Addon will temporarily halt the form from saving while the submission is verified. If all is good, the form will save as normal, otherwise an error will be added to the {{ errors }} array (together with any other errors, if they exist) which you can handle the same way as you would normally.

hCaptcha

As of v2.7.0, this Addon also supports hCaptcha! Simply switch the Captcha Service setting to hCaptcha inside of Configure > Addons > Recaptcha and update the API keys to your hCaptcha keys.

User Registration

As of v2.8.0, Recaptcha can verify user registration submissions from Statamic's {{ user:register_form }} form. Activate the feature inside Configure > Addons > Recaptcha and follow the same usage instructions as above.

Invisible Recaptcha

As of v2.0, Recaptcha also supports the Invisible reCAPTCHA:

  1. Simply turn on the Invisible toggle in Recaptcha's settings.
  2. Turn on Hide Badge to hide Recaptcha badge
  3. Add required Google Terms and Privacy Policy using {{ recaptcha:disclaimer }}

statamic-recaptcha's People

Contributors

aryehraber avatar delz-dev avatar mikemartin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

statamic-recaptcha's Issues

reCaptcha only showing on Website Refresh

I have an issue when I click on a menu on the website as this template don't make a refresh of the page and the Google reCaptcha only gets loaded if I refresh the page if I click on the menu it doesn't shows at all.

How could I approach this situation?
Thanks for your help!

Diego.

reCAPTCHA bypasses form validation

Whenever the user adds input validation to the form (whether such form is sent via AJAX or the regular Statamic action), reCAPTCHA still submits the form, even if the form has errors or conditionals (i.e. empty required input, or preventDefault).

Not sure if it changes anything but I'm using Invisible reCAPTCHA.

Here's a quick example using Bootstrap's client-side validation (which gets overridden by reCAPTCHA)

form.addEventListener('submit', function(event) {
  if (form.checkValidity() === false) {
    event.preventDefault()
    event.stopPropagation()
  }
  
  form.classList.add('was-validated')

}, false)

Any help would be greatly appreciated!

Publish on marketplace?

Would be great if the v3 version was on the marketplace so that it's searchable from within the CP.

Possible to specify language for recaptcha?

Hi, thanks for building this plugin!

Is it possible to specify the language for recaptcha when using the render tag?
For now, I've bypassed this by including the link myself and appending with ?hl=language_shortcode - would prefer to use the tag provided by your package.

Main-thread blocking

Not sure if this is an issue with the add-on or just something I need to dig deeper on with Recaptcha in general.

I'm running Statamic 3 with recaptcha V2 invisible.

This is what's showing up in Google Pagespeed:

google-pagespeed-report

Anyhow, not sure if it's something that can be changed in the add-on, but this is my next step in fixing it.

FR: Work with Workshop

I would like to use Recaptcha on a Workshop form but the listener right now is only looking for form submissions.

Any chance this can be updated to add that? Or are you open to a PR @aryehraber ?

Getting errors, unhandled promise timeout

Looks like this issue?

@aryehraber have you tried this recently?

This error is occurring when I hit the submit button on my form.

I have added head stuff, and the {{ recaptcha }} tag, everything is appearing in my page. I have added my test domain to my account on Google and put the two keys in .env.

Any ideas on how to troubleshoot?

Two Forms on One Page Issues

Has this been tested with two forms on one page? I am having issues with allowing two forms on one page. All handles are unique. I can't figure it out. Was wondering if you had tested?

Can Recaptcha be used on user registration?

I'm going through implementation and where I'm supposed to select which forms will use Recaptcha, there's no option to put it on User Registration, presumably because I don't have a formset for that.

Is user registration not supported, or is there some way I can still implement?

Ability for JS callback

I have a website that is submitting the form via ajax. It would be nice to be able to interact with the captcha via callback.

Docs have it for v2 as a simple data attribute, but I didn't see an option to add this in this plugin

data-callback="recaptcha_callback"

Is it possible to add this to the plugin or is there another way?

FR: Add Invisible support to hCaptcha

If you choose to use the new hCaptcha and you have {{ recaptcha:disclaimer }} in your template, the Google ReCaptcha Disclaimer will be rendered. This should be updated for hCaptcha:

   This site is protected by hCaptcha and its 
   <a href="https://hcaptcha.com/privacy">Privacy Policy</a> and 
   <a href="https://hcaptcha.com/terms">Terms of Service</a> apply.   

from the FAQ:

Do I need to display anything on the page when using hCaptcha in Invisible mode?

Recaptcha failed

I want to have a invisible recaptcha check on my website.
I have added
{{ recaptcha }} {{ recaptcha:disclaimer }}
Inside my form and in the control panel I have added de site key and the secret key and set the invisible toggle to true. And the site keys I have set it the same way.

On the website I get this icon:
Schermafbeelding 2019-08-05 om 16 03 11

How can I solve this problem?

How to access the error message directly.

Hi,

May I know how I can get the error message of the recaptcha directly? I can get it from {{form:errors}} but this gives me all the other errors in the forms as well. However, I only want the error message of the recaptcha.

Please and thanks!

High amount of spam coming through

Well, the only thing is I really don't think V2 is working anymore. I think the bots figured it out. I've had the V2 (for Statamic V3) installed and live for a week now and the spam is coming through like crazy. On Wednesday I turned the "security" up all the way. Just last night I got 0 leads and 20 spams. It is so bad I cannot let the executives get the email notifications right now because it would make me look so bad as their developer so I have to look for actual leads right now and then forward them out. It's bad because they really need to respond to these leads right away and this makes a lag.

I guess I don't understand why honeypot and this V2 solution doesn't work for me. All leads you see in following screenshot was spam leads from last night.

Originally posted by @twd3 in #5 (comment)

reCaptcha validation can be bypassed

The listener uses following code

        $response = request('g-recaptcha-response');
        
        if ($response === null) {
            return $submission;
        }

A spam bot can easily just omit the g-recaptcha-response field and bypass the captcha validation

Recommendation

I would add a list of forms to always check in the settings

  forms:
    type: suggest
    mode: form

And update the listener

    $formSetName = $submission->formset()->name();
    if (!in_array($formSetName, $this->getConfig('forms', []))) {
        return $submission;
    }

This will change the current behaviour and need manual settings changes on an update!

Invisible success message response missing

When setting up with a non-invisible set of keys and ensuring the plugin has been set to non-invisible, the form submits and notifies the user that it was succcesful.

By changing the api keys to the ones for an invisible setup, and checking the plugin setting is for invisible the form submits but no success message is returned to the user, the form fields just stay populated.

Error is Blank

The error array seems to have an entry for a reCAPTCHA that is left blank - but the error itself is empty. There is no text for it. The code below shows how I am trying to retrieve the errors:

{{ form:set is="contact-us" }}
    {{ if {form:errors} }}
    <div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <p><strong>Uh Oh!</strong> We need some more information from you.</p>
        {{ form:errors | ampersand_list }}
    </div>
    {{ /if }}
{{ /form:set }}

Port to Statamic V3?

Will you be porting this to work with Statamic V3? That would be very nice. I'll donate...

hcaptcha failing due to SameSite request

A cookie associated with a cross-site resource at https://hcaptcha.com/ was set without the SameSite attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

set header in .htaccess to Header edit Set-Cookie ^(.*)$ "$1; Secure; SameSite=None"

still unable to get this to work

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.