CODEWITHSUNDEEP
google-apipolymerpolymer-1.0
M.Huang
M.Huang

Reputation: 15

why recaptcha doesn't work with polymer

this is my element

<dom-module id="user-verify">
<style>
    paper-dialog {
        --paper-dialog-background-color: white;
        width: 348px;
        height: 205.594px;
    }
</style>

<template>
    <paper-dialog id="id_verify" modal>
        <h2><content></content></h2>
        <div id="maincontainer">
            <div class="g-recaptcha" 
                data-sitekey="6Lc0pAkTAAAAAGcsiru1MX6kjI6HGV8mbImc0cwk"
                data-callback="recaptchaCallback"></div>
        </div>
        <div class="buttons">
            <paper-button dialog-confirm id="varify_button" disabled>Ok</paper-button>
        </div>
    </paper-dialog>
</template>

<script>
    Polymer({
        is: "user-verify",
        attached: function(){
            this.$.id_verify.open();
        },
        recaptchaCallback: function(){
            this.$.varify_button.disabled = false;
        }
    });
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>

However, it doesn't work when i put the javascript of recaptcha in side the head of the html, so i can only put it inside the element. But now ,the data-callback function doesn't work. How to solve this? Or my code have some bugs?

Upvotes: 0

Views: 470

Answers (1)

Kjell
Kjell

Reputation: 832

Your callback recaptchaCallback is a method of the polymer object and not public function available for the recaptcha API. The way you register the function (via String) the API assumes your callback is global.

I would simply switch to attaching all the recaptcha-logic programmatically:

...
attached: function() {
    grecaptcha.render(this.$.maincontainer.querySelector('.g-recaptcha'), {
      'sitekey' : 'your_site_key',
      'callback' : this.recaptchaCallback,
    });
    this.$.id_verify.open();
}
...

Upvotes: 1

Related Questions