为什么 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>

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

Answer 1

您的回调 recaptchaCallback 是聚合物对象的一种方法，而不是可用于重新验证 API 的 public 函数。您注册函数的方式（通过字符串）API 假定您的回调是全局的。

我只想切换到以编程方式附加所有 recaptcha 逻辑：

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