Question

我已按照here列出的说明操作，但仍无法在模板中渲染reCAPTCHA。我无法获得自动渲染，也无法使用显式渲染。任何人都可以给我更具体的指令，这些指令是针对ember.js量身定做的，这样我就能得到reCAPTCHA来渲染吗？我想你应该把它变成一个组件，因为它将在整个站点中以多种形式使用。

与往常一样，任何帮助都会受到赞赏，如果您需要任何进一步的细节，我将非常乐意为您提供帮助。

Answer 1

对于感兴趣的人来说，ember-cli-google-recaptcha是易于使用的ember插件，用于将Google reCAPTCHA添加到您的ember应用程序中。它支持在同一页面上具有多个Recaptcha组件，并且与FastBoot兼容。它还支持v2和不可见的Recaptcha小部件：

{{g-recaptcha-v2 verified=(action (mut response)) 
                 reset=reset}}

{{g-recaptcha-invisible verified=(action (mut response))
                        expired=(action (mut expired) true)
                        execute=execute
                        reset=reset}}

完全公开：我是此附加组件的开发人员。

Answer 2

我曾经在index.html中放置了Google nocaptcha recaptcha脚本标记，并设置了一个只将类绑定到g-recaptcha到DOM元素的组件，允许自动呈现recaptcha小部件但这曾经导致每次加载页面时都不呈现窗口小部件的问题。如果我们使用component lifecycle中所述的init挂钩，那么将脚本加载到组件中会使得呈现reCaptcha小部件变得一致，因为我们只想加载脚本一次而不是每次都加载脚本组件被重新渲染。如果我们将组件类绑定到g-recaptcha，也不需要显式地呈现reCaptcha小部件，并且除非特定用例需要挂钩到recaptcha脚本的回调中，否则它更容易使用。

无论如何，这里有一些代码来解释它的用法：

// app/components/nocaptcha-recaptcha.js
import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['g-recaptcha'],
    attributeBindings: ['data-sitekey'],
    'data-sitekey': '12398419391839j918839132plialkdf',

    init() {
        this._super(...arguments);
        Ember.$.getScript('https://www.google.com/recaptcha/api.js');
    }
});

现在您可以在任何地方使用此组件：

// app/templates/login.hbs
{{nocaptcha-recaptcha}}

测试这些组件并不是一件简单的事情！

谷歌与Ember.js的再版

2 个答案: