为什么 recaptcha 不适用于聚合物

Question

这是我的元素

<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>

然而，它不工作，当我把javascript的recaptcha在一侧html的头部，所以我只能把它放在元素内。但是现在，数据回调函数不起作用了。如何解决这个问题?或者我的代码有一些bug ?

Answer 1

您的回调recaptchaCallback是聚合物对象的方法，而不是recaptcha API可用的公共函数。你注册函数的方式(通过String) API假定你的回调是全局的。

我会简单地切换到以编程方式附加所有的recapcha -logic:

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