Spark Registration form & Recaptcha

I think it may deal with binding the v-model="registerForm.g-recaptcha-response" to the recaptcha element. Google's recaptcha javascript code generates the element on the fly. I'm not sure how to go about adding this custom attribute...or if that's the right approach.

Any thoughts? Still stuck on this.

I've been thinking about adding a recaptcha on my registration form as well so I'm interested in this thread. Any luck yet?

Just search laracasts for captcha, i think jeff had made a custom one you can use.

The Laracasts I've found are not aimed at Spark. The Spark registration page uses a Vue application - which is where the struggle is. I've implemented recaptcha on regular Laravel applications without issue. The custom Vue application adds a new layer of complexity.

I too am very interested in this, it's going to be a must have for my site.

Any update on this? I also have this same issue.

Are you offering free plans? If not, you don't need it! A credit card is more than sufficient.

Had to resort back to good 'ol jQuery, but this is one way to make it work:

// In your vue component asset file
data() {
        return {
            recaptcha_key: 'your key',
            form: new SparkForm({
                name: '',
                email: '',
                grecaptcharesponse: null
            })
        };
    },

    methods: {
        create() {

            // Grab the g-recaptcha-response value via jQuery
            this.form.grecaptcharesponse = $('#g-recaptcha-response').val();


            Spark.post('/thing/store', this.form)
                .then(result=> {
                    this.form.name = '';
                    this.form.email = '';
                    this.form.grecaptcharesponse = null;
                    grecaptcha.reset();
                })
        },
    },

// in your vue component blade file
<form class="form-horizontal" role="form">
                            {{ csrf_field() }}
                            <div class="form-group" :class="{'has-error': form.errors.hasErrors()}">
                            <!-- Name -->
                                <div class="row p-b-md">
                                    <div class="col-md-10 col-md-offset-1">
                                        <input type="text" class="form-control" name="name" v-model="form.name" autofocus placeholder="Your Name">
                                        <span class="help-block" v-show="form.errors.has('name')">@{{ form.errors.get('name') }}</span>
                                    </div>
                                </div>

                            <!-- Email Address -->
                                <div class="row p-b-md">
                                    <div class="col-md-10 col-md-offset-1">
                                        <input type="email" class="form-control" name="email" v-model="form.email" placeholder="Your Email Address">
                                        <span class="help-block" v-show="form.errors.has('email')">@{{ form.errors.get('email') }}</span>
                                    </div>
                                </div>

                            <!-- reCaptcha -->
                                <div class="row p-b-md">
                                    <div class="col-md-10 col-md-offset-1">
                                        <div class="g-recaptcha col-md-offset-4" :data-sitekey="recaptcha_key"></div>
                                        <span class="help-block" v-show="form.errors.has('grecaptcharesponse')">@{{ form.errors.get('grecaptcharesponse') }}</span>
                                    </div>
                                </div>

                            <!-- Submit Button -->
                                <div class="row">
                                    <div class="col-md-offset-5 col-md-2">
                                        <button type="submit" class="btn btn-primary"
                                                @click.prevent="create"
                                                :disabled="form.busy">
                                            Submit
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>

I had to explicitly call grecaptcha.reset(); after my post is successful since this particular form is in a modal, and without it, a user could open the modal and resubmit without re-verifying the captcha.