Document how to use invisible reCAPTCHA

[odedniv]

Apart from adding invisible to the possible values of the size option, there is no real explanation on how to use this directive with invisible reCAPTCHA.

I've been using size="invisible" with ng-model, but it doesn't set the model's value. I see a badge on the bottom right of my screen.

• How do I change the position of the badge? (I can see #174 added an option but no documentation)
• How do I make form submission wait for recaptcha response?
• Design suggestion: should vc-recaptcha directive be on a button or on the submitted form? To my understanding invisible recaptcha needs to delay the callback from a button click or a form submission until a response has been received, sometimes even requiring a dialog verification (when Google deems the user unsafe).

Your project is very much appreciated!

[notflorian]

Hi,

I need to submit a form with <form action="/signupValidation" method="GET">, without using ng-submit="submit().

It works well with the checkbox recaptcha, but don't works with size="invisible".

Can you please improve the documentation of the invisble reCAPTCHA? Is it possible to use it without ng-submit="submit() and $scope.submit = function(event) { vcRecaptchaService.execute(); }; ?

[DimitarNestorov]

@thewarpaint I see that you've added those lines in README.

Can you tell us what we're missing? Or give us a simple working example?

[thewarpaint]

@dimitarnestorov I'll try to set up a basic JSFiddle using the invisible option.

[mattW711]

I am trying to implement the invisible recaptcha as well. I have an invisible recaptcha key, and it is successfully verifying the response on the server side, but is always poping up an image selection test before sumbitting the form, so not invisible?

Otherwise is there a way to only require checkbox and not open the image selection everytime?

[RaghuMurugesan]

Question: How to use .then method for vcRecaptchaService.execute()?

Is there anything like vcRecaptchaService.execute().then(ret => { //do something here }) ?

[RaghuMurugesan]

Question: How to use .then method for vcRecaptchaService.execute()?

Is there anything like vcRecaptchaService.execute().then(ret => { //do something here }) ?

[TheSharpieOne]

Google's recaptcha execute does not return anything, then this library cannot return anything. When the execute is done, the callback will be called. The callback sets the value on the model AND triggers the user provided callback with the value and the widgetId.

A change could be made so that the vcRecaptchaService's create wraps the callback so that it knows when the callback is triggered and then can return a promise which gets resolved when that callback wrapper is called.

[josduj]

This is how I've done it...

In controller

this.onSubmit = () => {
    vcRecaptchaService.execute(this.widgetId)
}

this.onSuccess = token => {
    submitAndValidateOnBackend({
        // form data
        token: token,
    }).then(res => {
        console.log('success!')
    }).catch(err => {
        console.log('error')
        vcRecaptchaService.reload(this.widgetId)
    })
}

In template

<form ng-submit="$ctrl.onSubmit()">

    ...

    <div vc-recaptcha
         size="invisible"
         on-create="$ctrl.widgetId = widgetId"
         on-success="$ctrl.onSuccess(response)">
    </div>

    <button type="submit">Submit</button>
</form>

[sejas]

You just need to call to grecaptcha.execute() Maybe with a little timeout:

   $timeout(function () {
        grecaptcha.execute()
     }, 1000)

You don't need to add a form tag in the html, just the vc-recaptcha:

      <div vc-recaptcha
           key="ctrl.key"
           size="invisible"
           on-create="ctrl.widgetId = widgetId"
           on-success="ctrl.onSuccess(response)">
      </div>

I will add this code to the README.md to show the example ;)