dansnow / vue-recaptcha

Google ReCAPTCHA component for Vue.js

vue-recaptcha

Description

Notice: This is the branch for vue-recaptcha v3 which is in development

Google ReCAPTCHA component for vue. If you like this package, please leave a star on github.

This version is for Vue 3 first

Please see the document here

vue-recaptcha's Issues

vue-recaptcha must be in your package.json?

Installed with commands from tutorial, but there is no package added to package.json.
So we use
"vue-recaptcha": "*",
end this works fine.

But not sure it is right. maybe we should add version? How to know which one?

Also, Git link are broken from your docs.

For more information, please reference to ReCAPTCHA document and Invisible ReCAPTCHA document.

Callback

How to listen to the Recaptcha callback if someone is verified or not?

Issue with User provider function

When my signup page implementing vue-recaptcha is loaded, I keep seeing this message in my console;

ReCAPTCHA couldn't find user-provided function: vueRecaptchaApiLoaded

Seems to be referenced from https://www.gstatic.com/recaptcha/api2/r20170524165316/recaptcha__en.js
I don't know why this is happening as I can see from vue-recaptcha code that the method vueRecaptchaApiLoaded is attached to the window object.
I am using this with npm/webpack.

Thanks!

component does not support localization.

In order for the component to support localization, it is necessary to add the property 'hl'.

https://img.avalab.io/2018-07-04-9bry8g

Thank you!

Getting "TypeError: window.grecaptcha.render is not a function" errors

Getting a lot of errors:

TypeError: window.grecaptcha.render is not a function

I think this is due to the external script not being loaded yet?

Also, I am using SSR, so could be because of that?

An in-range update of eslint-config-standard-jsx is breaking the build 🚨

Version 4.0.2 of eslint-config-standard-jsx just got published.

Branch	Build failing 🚨
Dependency	eslint-config-standard-jsx
Current Version	4.0.1
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-config-standard-jsx is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ ci/circleci Your tests failed on CircleCI Details

---

Commits

The new version differs by 4 commits.

• 49b8fde 4.0.2
• 992be94 Merge pull request #24 from grxy/master
• c13637e Fix deprecation warning, close #23
• 352c068 update list of dependencies

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

multiple captcha and remote resources

I'm trying to use vue-recaptcha inside a (bootstrap) modal. I've one modal for each "item"... and I may show various items on the page at a time.

The issue is that each and every time vue-recaptcha template is used, a bunch of remote resources are loaded like recaptcha__en.js, styles__ltr.css + a lot of subresources like fonts, ...

I don't want all of these being massively reloaded each time one vue-recaptcha is referenced.
I tried to make my modals lazy : this is a workaround which avoid hanging my browser when showing 50 items, but recaptcha resources are still loaded and reloaded each time the modal is closed then reopened.

Is there something doable about this?

Is there any way to get recaptcha response directly, bypassing @onVerify?

What I have now to get recaptcha response is:

<vue-recaptcha @verify="onVerify"
    :sitekey="...">
</vue-recaptcha>

...

data() {
    return {
        recaptchaResponse: ''
    }
}

...

onVerify(response) {
    this.recaptchaResponse = response
},
methodWhereINeedRecaptchaResponse() {
    console.log(this.recaptchaResponse)
}

Can I get recaptcha response in other, simpler way, bypassing onVerify()? Thank you.

validation server side

how to validate recaptcha in server side?

Used with prerender spa plugin returns 400 error

Hello, I'm using a prerendering plugin (prerender spa plugin).
I got this error in console :

GET https://www.google.com/recaptcha/api/fallback?k=6Ld3CSMUAAAAANACpzW7Eef98DqcasUKWmMDrRjk&hl=en&v=r20170524165316&t=1&ff=true 400 ()

The network inspector returns :

Please enable JavaScript to get a reCAPTCHA challenge.

This seems not to work when prerendering. Is there any way to make it work ?
Thanks

change ReCaptcha language

How can I change the ReCaptcha language?

TypeError: window.grecaptcha.render is not a function

Hi, I'm getting an error using the component

It works fine if it's the first time I load the page, but any subsequent reloads of the page gives me this error

[Vue warn]: Error in mounted hook: "TypeError: window.grecaptcha.render is not a function"

found in

---> `

vue.runtime.esm.js?ff9b:1692 TypeError: window.grecaptcha.render is not a function at eval (vue-recaptcha.es.js?a250:48) at Object.then (vue-recaptcha.es.js?a250:20) at Object.render (vue-recaptcha.es.js?a250:47) at VueComponent.mounted (vue-recaptcha.es.js?a250:136) at callHook (vue.runtime.esm.js?ff9b:2864) at Object.insert (vue.runtime.esm.js?ff9b:4041) at invokeInsertHook (vue.runtime.esm.js?ff9b:5802) at Vue$3.patch [as __patch__] (vue.runtime.esm.js?ff9b:6021) at Vue$3.Vue._update (vue.runtime.esm.js?ff9b:2609) at Vue$3.updateComponent (vue.runtime.esm.js?ff9b:2737)

Make a proper npm release

Hey could you make a proper release on npm so we don't have to write:

npm install git+https://github.com/DanSnow/vue-recaptcha.git

but will be able to write:

npm install vue-recapthca

Example has wrong variable name

index.js

resetRecaptcha () {
      this.$refs.recaptcha.reset() // Direct call reset method
    }

resetRecaptcha () {
      this.$refs.invisibleRecaptcha.reset() // Direct call reset method
    }

dist/vue-recaptcha.es.js : not webpack-compatible

When bundling vue-recaptcha using webpack, it fail to render the template:

Failed to mount component: template or render function not defined. found in
---> <VueRecaptcha>

The issue does not arise when using direct/raw ES6 imports.

I also found that adding such an alias to webpack.config.babel.js did the trick (vue-recaptcha.es.js is used by default):

resolve: {
    alias: {
      'vue-recaptcha$': 'vue-recaptcha/dist/vue-recaptcha.js'
    }
}

I would thus say that there is an issue with dist/vue-recaptcha.es.js

IE Support

Hi,
i would like to use your component in a website which should run in IE 10. But Promise is even not supportet in IE 11, could you write the component without "new Promise". Maybe
this.$nextTick(function () {...}
is an option?

Edit: Sorry i have not seen #7 directly

execute() can be use only once

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
            },`

Mocking grecaptcha in tests

Using Vue-test-utils and Sinon, I'm mocking the execute() function in my contact form tests, so I can bypass the actual validation, but I suspect some things remain in global scope; grecaptchaMock.execute.called only succeeds the first time. Any examples of usage in tests would be greatly appreciated.

import { mount } from 'vue-test-utils';
import ContactForm from '../assets/js/components/ContactForm.vue';
import expect from 'expect';
import Vue from 'vue'
import moxios from 'moxios'
import sinon from 'sinon'
import { equal } from 'assert'

// ... snip

describe ('Contact Form', () => {
    let wrapper, grecaptchaMock, widgetId;

    beforeEach(() => {
        // Ajax stub
        moxios.install()

        // reCaptcha stub
        widgetId = "WidgetId"
        grecaptchaMock = sinon.stub({
            render: function (options) { },
            reset: function (id) { },
            getResponse: function (id) { },
            execute: function() { }
        })
        grecaptchaMock.render.returns(widgetId)
        grecaptchaMock.execute.callsFake(function fakeFn() {
            wrapper.vm.onVerify('testtoken')
        })
        window.grecaptcha = grecaptchaMock

        // Mount the Vue component
        wrapper = mount(ContactForm)
    });
    afterEach(() => {
        // reCaptcha stub
        grecaptchaMock = null
        widgetId = null
        delete window.grecaptcha;

        // Ajax stub
        moxios.uninstall()
    });

// ... snip

    it ('should have errors if input was omitted', (done) => {

// ... snip (moxios setup)

        sinon.spy(wrapper.vm, "onVerify")

        // When the user submits the for without input
        wrapper.find('form').trigger('submit')

        // Then the execute flow should follow
        expect(grecaptchaMock.execute.called).toBe(true); // XXX only works if no tests were run before this
        expect(wrapper.vm.onVerify.called).toBe(true); // XXX seems to work every time

// ... snip

invisible reCaptcha?

Hello ,

is the invisble reCaptcha available?

https://developers.google.com/recaptcha/docs/invisible

No method for 'expired' scenario

After the user checks the box and solves the captcha, if a period of time passes recaptcha will invalidate it and ask them to solve it again, but I'm not seeing a way for that to be reflected in Vue. If there isn't a method available, there probably should be.

Would appreciate your thoughts on this.

Uncaught Error: ReCAPTCHA has not been loaded

This happens when I reload the page. It is working fine on the first to the page but when the page is reloaded I get this error. Also, there is no implementation of the 'vueRecaptchaApiLoaded' function which is supposed to be triggered on the load of the recaptcha from google. Please look into this.

Reset vue recaptcha

Hi,

I have a question, how do you reset vue recaptcha?

Warning by webpack

Peer dependency warning

The peer dependency version for vue is not correct.

I get the following warning message:

warning "[email protected]" has unmet peer dependency "vue@^2.0.0".

This is my package.json:

"vue": "^2.5.13"

Any vue 2.x version should be allowed as correct peer dependency.

Uncaught TypeError: this.getRecaptcha is not a function

I carefully followed your steps for installation but I keep getting this error.
I have done nothing special. Inserted the tag in the head, added VueRecaptcha as a component and put the key in the key attribute.

What do you need from me in order to debug this?

Automatically adding google recaptcha

Is there a specific reason that this library doesn't automatically inject the google recaptcha script?

It would be nice if this component did this automatically.

I'll create a PR showing how this would be achieved.

vue-recaptcha causes a memory leak on route changes

I believe the offending reference is window.___grecaptcha_cfg since when I force it to be null before destroying the component I use vue-recaptcha in the problem disappears.

To reproduce just enter and exit the page where vue-recaptcha is in use.

Automatically load script from Google

Loading recaptcha API from Google can easily be (and should be) automated.

Instead of requiring a user to insert this tag:

<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>

vue-recaptcha should simply run document.createElement('script') in its mount() and insert the script object to the document body. This will also fix "ReCAPTCHA couldn't find user-provided function: vueRecaptchaApiLoaded" race condition.

The current architecture is not optimal in two perspectives:

1. The developer needs to write extra code, and in some circumstances (e.g. with Nuxt or Ream) it's not even clear where should this code go.
2. Recaptcha API script will load even if it's not used on a particular page.

An in-range update of babel-core is breaking the build 🚨

Version 6.24.0 of babel-core just got published.

Branch	Build failing 🚨
Dependency	babel-core
Current Version	6.23.1
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As babel-core is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ ci/circleci Your tests failed on CircleCI Details

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

TSX/JSX Example

Hello all,

I've been trying to get this to work in a tsx file. I cannot seem to find the right place to put the google javascript script tag and have it load. If I add it to the index.html then it loads before vue and give me an error it cannot find the onload callback. If I put it in the tsx then webpack cannot load correctly.

Are there any examples or advice on how to get this to work?

Cheers,

James

Recaptcha not loading in IE windows7 OS

vue-recaptcha throws an error saying 'Recaptcha has been not loaded' in IE11 in windows 7 OS. It works fine in google chrome. #7 IE Error using es6-shim solved it.

An in-range update of eslint-config-standard is breaking the build 🚨

Version 7.0.2 of eslint-config-standard just got published.

Branch	Build failing 🚨
Dependency	eslint-config-standard
Current Version	7.0.1
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-config-standard is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ ci/circleci Your tests failed on CircleCI Details

Commits

The new version differs by 2 commits .

• d75816c 7.0.2
• eb9b41f Relax rule: Allow tagged template string expressions (no-unused-expressions)

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Execute method not firing in FireFox and Edge but does in Chrome

Hello,
I am trying to run this:
this.$refs.recaptcha.execute();
after my inputs are validated
submit: function () {

                    this.status = "submitting";
                    this.validateBeforeSubmit();
                    if(window.valid == true){
                        this.$refs.recaptcha.execute();
                    }
                },

But once it gets to that line, it does nothing from there in FireFox and Edge, but does in Chrome.

Any ideas?

responsive catpcha content

How to responsive capcha content ?

widgetId is undefined and captcha exits silently on execute

Really loved this, but randomly last week I've been unable to get it to work in my local environment. Anyway I was wondering where widget id is sourced from because locally its undefined and I just hang on executue.

This site key is not enabled for the invisible captcha

Hello. I did everything from code snippets in Docs, but when the page load I got this message from Google

This site key is not enabled for the invisible captcha

I don't want invisible in first place.
Ho to make it V2?

Official button

Hello boys, this doesnt have the official button implemented? Im doing it with css but.. I dont know if it is because I've installed it wrongly

An in-range update of babel-preset-env is breaking the build 🚨

Version 1.3.0 of babel-preset-env just got published.

Branch	Build failing 🚨
Dependency	babel-preset-env
Current Version	1.2.2
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As babel-preset-env is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ ci/circleci Your tests failed on CircleCI Details

Release Notes

v1.3.0

v1.3.0 (2017-03-30)

🐛 Bug Fix

• Add check for ArrayBuffer[Symbol.species] (#233) (@existentialism)

We now properly check for Symbol.species support in ArrayBuffer and include the
polyfill if necessary. This should, as a side effect, fix ArrayBuffer-related
errors on IE9.

💅 Polish

• Fill data with electron as a target. (#229) (@yavorsky)

We've simplified things by adding electron as a target instead of doing a bunch of
things at runtime. Electron targets should now also be displayed in the debug output.

• separate default builtins for platforms (#226) (@restrry)

If you are targeting the node environment exclusively, the always-included web polyfills
(like dom.iterable, and a few others) will now no longer be included.

📝 Documentation

• remove deprecated projects (#223) [skip ci] (@stevemao)

🏠 Internal

• npmignore: Add related to build data and codecov. (#216) (@yavorsky)

Commits

The new version differs by 8 commits .

• 8b2dc4f 1.3.0
• 6ebf857 Update changelog
• 046f326 Add check for ArrayBuffer[Symbol.species] (#233)
• aead61c Fill data with electron as a target. (#229)
• 48a329b separate default builtins for platforms (#226)
• a4d585c remove deprecated projects (#223) [skip ci]
• 88cbe17 Merge pull request #216 from babel/update-npmignore
• cf94af3 npmignore: Add related to build data and codecov.

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

"key" is a reserved attribute

[Vue warn]:"key" is a reserved attribute and cannot be used as component prop.

[Vue warn]: Missing required prop: "key" (found in component )

Verification issue

my code is the following:

          <vue-recaptcha
            ref="recaptcha"
            @verify="createCard"
            size="invisible"
            :sitekey="siteKey"/>

and then, in the mounted hook I execute this code:

    if (!window.recaptcha) {
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit'
      document.body.appendChild(script)
    }

When I go to see the stats in google recaptcha web page, I get the following error:

Do you know what could be happening?

emit successfully loaded event

hi, first of all thanks for this great plugin.

i would like to ask would u mind to add emitting an event after recaptcha has been successfully added?

Thanks,
Have a nice day.

Don't crash app when server-side rendering

I just did something crude like returning a dummy component and that seems to work. You'll probably be able to think of a more sensible implementation. This is what I did:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
      (global.VueRecaptcha = factory());
}(this, (function () {
  'use strict';

  // *************** CHANGED ***************
  if (typeof window == 'undefined') {
    console.log('RETURNING DUMMY COMPONENT...');
    return {
      name: 'VueRecaptcha',
      render: function render(h) {
        return h(
          'div',
          { ref: 'container' },
          []
        );
      }
    };;
  }
  // ***************************************

  var _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  var defer = function defer() {....... <the rest of the code beyond here>...

Missing required parameters: sitekey

i get this error even i set sitekey prop.
<vue-recaptcha sitekey="my key"></vue-recaptcha>

error in mounted hook: window.grecaptcha.render is not a function

I'm getting inconsistent result. Sometimes it works, sometimes I get error.

It seems that the vue-recaptcha is trying to create the component even when the google recaptcha is not yet recognized.

I placed the tag <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script> one line above my app.js and followed the usage guide.

An in-range update of babel-preset-es2015 is breaking the build 🚨

Version 6.24.0 of babel-preset-es2015 just got published.

Branch	Build failing 🚨
Dependency	babel-preset-es2015
Current Version	6.22.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As babel-preset-es2015 is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ ci/circleci Your tests failed on CircleCI Details

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Cannot read property '_fromJEN'

Followed the tutorials, and I'm stuck the below error, it all works but just wanted to get rid of the errors.

Uncaught TypeError: Cannot read property '_fromJEN' of null at content.js:210

Is it possible to bind recaptcha component to v-model?

I want to validate if recaptcha passed before AJAX request. Is it possible to bind component to v-model?
Like <vue-recaptcha v-model="recaptcha" type="checkbox" size="compact" sitekey=""></vue-recaptcha>

vue-recaptcha renders a div on body every render.

This video pretty much displays what I'm talking about.

https://youtu.be/NNgj98rsBTE

I'm using vue-recaptcha as added guard on form submissions, of which I have many on my site. I have a recaptcha for signing up, and when you change your profile settings I have one there also. Whenever the vue-recaptcha element is rendered it attached a div to the body. keep-alive is not an option because the component that vue-recaptcha is attached has a conditional which will "unrender" it once logged it. Same goes for the profile page since if you transition from one route to the next and back again it will re-render vue-recaptcha and insert the div.

Also having multiple recaptchas on different pages and transitioning to them seems to effect performance.

Documentation is not enough

type (optional)
The type of reCAPTCHA
size (optional)
The size of reCAPTCHA

I don't see any document about those parameter

IE error

Hi,

I got an error in Internet Explorer(all versions).
Error "SCRIPT438: Object doesn't support property or method 'call' "

When i disable the plugin the page is loading other wise it redirect me to '/ '