reCaptcha + RequireJS

reCaptcha + RequireJS

如何使用 requirejs 导入 recaptcha。我已经尝试了几件事，但没有任何效果。

我需要这样做才能在加载后使用 reCaptcha 的渲染方法自己渲染它。

require.config({
    paths: {
        'recaptcha': 'http://www.google.com/recaptcha/api'
    }
});

require( ['recaptcha'], function( recaptcha ) {
    // do something with recaptcha
    // recaptcha.render  /// at this point recaptcha is undefined
  console.log(recaptcha);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>

是的，我有一个解决方案。所以最终发生的是 recaptcha 在从 google api.

加载它需要的内容之前无法呈现

所以你需要做的是以下（也不要在你的路径中使用 http/https）：

require.config({
  paths: {
      'recaptcha': '//www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'
  }
});

现在这将允许在从 google API 下载必要的库后执行回调。不幸的是，这个回调需要是全局的。

JS

var requireConfig = {
 paths: {
  'recaptcha': '//www.google.com/recaptcha/api.js?    onload=onloadCallback&render=explicit'
 }
};

function render(id) {
  console.log('[info] - render');
  recaptchaClientId = grecaptcha.render(id, {
    'sitekey': '6LdntQgUAAAAANdffhZl0tIHw0fqT3MwNOlAI-xY',
    'theme': 'light'
  });
};
window.renderRecaptcha = render;

var onloadCallback = function() {
  console.log('[info] - onLoadCallback');
  if (!document.getElementById('g-recaptcha')) {
    return;
  }
  window.renderRecaptcha('g-recaptcha');
};

requirejs.config(requireConfig);

require(['recaptcha'], function(recaptcha) {

});

HTML

<body>
    <form action="?" method="POST">
      <div id="g-recaptcha"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js">    </script>


</body>

希望对你有用！

Link 例如：https://jsbin.com/kowepo/edit?html,js,console,output

我知道这个问题有点老，但是我最近在我的项目中发现了另一种不需要创建全局方法的解决方案。该解决方案最终成为 OP 首次尝试将 Google reCaptcha 与 ReCaptcha 结合使用的非常简单的补充。

在 main.js 中，添加以下内容：（与 OP 完全一样）

require.config({
    paths: {
        'recaptcha': 'http://www.google.com/recaptcha/api'
    }
});

在您进行显式渲染的 JS 文件中，执行以下操作：

require( ['recaptcha'], function(recaptcha) {
    // render when recaptcha is ready
    // injecting recaptcha here will give access to the grecaptcha object and it's ready method
    grecaptcha.ready(function()
        grecaptcha.render('elementId', {
          'sitekey': 'SITE_KEY',
          'callback': someCallbackMethod
        });
    );
});

这对我有用，我相信这是一个更干净的解决方案！