reCAPTCHA: Cannot combine methods in JavaScript

Question

I tried to integrate reCAPTCHA v3 to my Login form and applied all the necessary configuration combinations and examples. Here is my implementation based on Documentation page. However, I cannot pass the g-recaptcha-response value to my Java backend. I think the problem is related to combining grecaptcha and submit methods below.

index.html:

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

login.vue:

<a-button class="primary g-recaptcha" <!-- added "g-recaptcha" to the class -->
          @click="onSubmit">
          Login
</a-button>

onSubmit() {
    grecaptcha.ready(function() {
      grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'})
                .then(function(token) {

        // I move my login block to here ---------------------------------
        this.$refs.formContainer.validate((valid) => { // --> throws error
        if (valid) {
            const params = { email: 'test@test.com', password: '******' };
            this.login(params).then((response) => {
              // pass "token" value to the backend
            });
          }
          return false;
        });
        // ---------------------------------------------------------------

      });
    });
  }
},

Although I get the token value properly, the this.$refs.formContainer.validate((valid) line throws "Uncaught (in promise) TypeError: Cannot read property '$refs' of undefined" error. So, how should I combine these methods (grecaptcha.execute and my login block) properly?

Correct me if I'm wrong but I think it is because the scope of `this` changed. Take a look at the answer on this question: https://stackoverflow.com/questions/34930771/why-is-this-undefined-inside-class-method-when-using-promises — Marcel, Jul 05 '21 at 09:07
@Marcel Thank you very much Marcel, yes the problem seems to be that. But it is really very interesting for `this` in JavaScript. Regards — , Jul 05 '21 at 12:09

reCAPTCHA: Cannot combine methods in JavaScript

0 Answers0