DanSnow / vue-recaptcha

Google ReCAPTCHA component for Vue.js
http://dansnow.github.io/vue-recaptcha/
MIT License
869 stars 134 forks source link

execute() can be use only once #88

Closed PhPPgAdminBug closed 6 years ago

PhPPgAdminBug commented 7 years ago

1 - captcha not appearing 2 - it just shows some white screen blink, than captcha like successed or failed, we do not know rly, only console shows result 3 - after that page relaod required if captcha fails or succesed

`....
<vue-recaptcha
                                ref="invisibleRecaptcha"
                                @verify="onVerify"
                                @expired="onExpired"
                                size="invisible"
                                theme="dark"
                                :sitekey="site_key">
                        </vue-recaptcha>
                        <button type="submit" class="btn btn-secondary btn-block" @click="onSubmit()">
                            <i class="fa fa-btn fa-sign-in" v-show="!isLogging">
                                {{ trans('navigation_menu.login') }}
                            </i>
                            <i class="fa fa-spinner fa-spin" v-show="isLogging"></i>
                        </button>
....

 export default {
        components: {VueRecaptcha},
        props: {
            site_key: {
                type: String,
                required: true,
            },
        },
        data() {
....
            }
        },
        methods: {
            /**
             *Form Funcs
             */
            save: function () {
                if (this.isLogging) return;
                this.isLogging = true;
                // validate form data and send data
....
  this.isLogging = false;
// this function can be triggered ONLY ONCE!
            },

            /**
             * reCaptcha methods
             */
            onSubmit: function () {
                this.$refs.invisibleRecaptcha.execute()
            },
            //recaptcha callback function, if captcha verified
            onVerify: function (response) {
                this.save();
            },
            //recaptcha callback function, checks if expired
            onExpired: function () {
                console.log('Captcha key has expired, new captcha code generated');
            },
            //recaptcha function, resetss it
            resetRecaptcha() {
                this.$refs.recaptcha.reset() // Direct call reset method
            },`
DanSnow commented 7 years ago

First, if recaptcha's response is not expired, you won't get anything by calling execute. It's behavior of recaptcha. If you really need a new response, please call reset to reset recaptcha before.

And it's invisible because you set the size "invisible". Please remove prop size if you want a normal recaptcha. Or maybe you prefer compact size, it's smaller then the normal one. For more information, please reference to recaptcha's document

If you use the normal recaptcha, you don't need to call execute to trigger validation. It'll be done when user click the recaptcha. And calling execute will be an error.

I think you are misunderstanding something. If there is anything which can be improved in the document, please let me know.

aphofstede commented 7 years ago

Note: I had to put reset in a setTimeout to get it to work. Maybe due to some throttling on Google's end?

                setTimeout(() => {
                    this.$refs.invisibleRecaptcha.reset()
                }, 1000)
stale[bot] commented 6 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

SmirnovMaxim commented 3 years ago

I ran into this error too. To solve it, you need to store a token. Call reset only on the onExpired hook. execute is called only when there is no token.