Google使用Ember.js的reCAPTCHA

Question

我已經按照此處列出的說明進行操作，但是仍然無法在模板中獲取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

我曾經將Google nocaptcha recaptcha腳本標記放置在index.html中，並設置了一個僅將g-recaptcha類綁定到DOM元素的組件，以允許自動呈現Recaptcha小部件，但這曾經導致小部件出現問題不會在每次加載頁面時呈現。 如果我們按照組件生命周期中的描述使用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}}

測試該組件並不是一件簡單的事情！