Cannot render reCaptcha module more than once on my Polymer app: Uncaught Error: reCAPTCHA has already been rendered in this element

Question

Polymer 1 应用中的 reCaptcha 模块出现问题。

我可以使用此模块一次（在注册表单上），但如果我尝试在任何其他组件上使用它会导致错误：未捕获错误：reCAPTCHA 已在此元素中呈现。

• 最初认为问题是因为我在模块中加载了 recaptcha 脚本，所以我将其移动到 index.html。但问题仍然存在。

• 尝试在不同的地方使用 grecaptcha.reset() 来卸载小部件，以便它可以在其他组件中呈现。

内部 recaptcha-module-html:

<dom-module id="recaptcha-module">
    <template>
        <div class="captcha-container">
            <div id="captcha"></div>
        </div>
    </template>
    <script>
        Polymer({
            is: "recaptcha-module",
            ready: function () {
                this.recaptchaCallback = this.recaptchaCallback.bind(this)
                this.recaptchaExpired = this.recaptchaExpired.bind(this)
                window.recaptchaCallback = this.recaptchaCallback
                window.recaptchaExpired = this.recaptchaExpired
            },

            attached: function () {
                grecaptcha.render('captcha', {
                    'sitekey': {SITE_KEY_HERE}
                    'size': 'compact',
                    'callback': 'recaptchaCallback',
                    'expired-callback': 'recaptchaExpired'
                });
            },

            recaptchaCallback: function () {
                this.fire('recaptcha-success')
            },

            recaptchaExpired: function () {
                this.fire('recaptcha-expired')
            }

        });
    </script>
</dom-module>

正在 index.html 中加载 recaptcha 脚本：

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

我如何尝试在其他组件中加载 recaptcha 模块：

<link rel="import" href="recaptcha-module.html">
...
<recaptcha-module></recaptcha-module>

我希望可以在多个表单组件中导入和使用该模块，但这样做会导致错误，并且小部件拒绝多次加载。

Answer 1

这个问题是因为模块没有为占位符 reCaptcha 元素分配唯一 ID。为了解决这个问题，我创建了一个名为 elementid 的 属性，它可用于为 reCaptcha 元素的每个呈现器提供一个唯一的 ID。

<dom-module id="recaptcha-module">
    <template>
        <div class="captcha-container">
            <div class="captcha" id="[[elementid]]"></div>
        </div>
    </template>
    <script>
        Polymer({
            is: "recaptcha-module",
            properties: {
                elementid : String,
                captchastyle : String
            },
            ready: function () {
                this.recaptchaCallback = this.recaptchaCallback.bind(this)
                this.recaptchaExpired = this.recaptchaExpired.bind(this)
                window.recaptchaCallback = this.recaptchaCallback
                window.recaptchaExpired = this.recaptchaExpired
            },

            attached: function () {
                grecaptcha.render(this.elementid, {
                    'sitekey': {MY_SITE_KEY},
                    'size': this.captchastyle,
                    'callback': 'recaptchaCallback',
                    'expired-callback': 'recaptchaExpired'
                });
            },

            recaptchaCallback: function () {
                this.fire('recaptcha-success')
            },

            recaptchaExpired: function () {
                this.fire('recaptcha-expired')
            }

        });
    </script>
</dom-module>

然后您可以导入模块并通过为其提供唯一 ID 在其他任何地方使用自定义元素。像这样：

<recaptcha-module elementid="UNIQUE_ID" captchastyle="normal"></recaptcha-module>