reCaptcha + RequireJS

Как импортировать recaptcha с помощью requirejs. Я уже пробовал несколько вещей, и ничего не работает.reCaptcha + RequireJS

Мне нужно сделать это, чтобы иметь возможность отображать его самостоятельно, используя метод рендеринга 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>

источник

2016-10-04 Herbert Pimentel

Да у меня есть для вас решение. Итак, что происходит, так это то, что recaptcha не может отображать до тех пор, пока он не загрузит то, что ему нужно, из google api.

Так что вам нужно сделать, это следующее (также не использовать HTTP/HTTPS в ваших путях):

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

Теперь, позволит обратного вызова будет выполняться после того, как необходимые библиотеки были загружены из API Google. Этот обратный вызов должен быть глобальным, к сожалению.

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>

Я надеюсь, что работает для вас!

Ссылка на примере: https://jsbin.com/kowepo/edit?html,js,console,output

источник

2016-10-06 15:19:05

Пожалуйста, включите рабочий пример в виде jsfiddle, в jsbin или даже Stack Snippet. Когда я попытался добавить 'onload =' к коду OP, это не сработало. – Louis

Эй, извините. Я должен был это сделать с самого начала. Я редактировал ссылку на jsbin –

Да, я понимаю, это работает, но не очень помогает мне, потому что эти ограничения ломают мою организацию :( –

reCaptcha + RequireJS

ответ

Смежные вопросы