添加 google reCAPTCHA 到 ExtJS 组件

Question

我正在尝试将 google recaptcha 放入 extjs 应用程序中，但它没有被渲染。

{
    xtype:'panel',
    width:300,
    height:60,
    html:'<div class="g-recaptcha" id="recaptcha" data-sitekey="MyKey" data-callback="correctCaptcha"></div>'
}

Answer 1

嗯，在 ExtJS 中使用 google recaptha 是这样的：

1. 加载recaptha代码，添加

   <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer>
   </script>
   

在您的代码中的适当位置。

2. 向任何组件添加 recaptcha，如下所示：

   {
       xtype: 'box',
       id: 'myCaptcha',
       listeners: {
           'afterrender': function () {
               grecaptcha.render('myCaptcha', {
                   'sitekey': 'your_site_key'
               });
           }
       }
   }
   

例如，您必须在 afterrender 侦听器中执行此操作，因为当您刚刚定义 ExtJS 组件时，相关的 DOM 元素尚未添加到文档元素中。

如果有人正在寻找它 - Google reCAPTCHA guide.