Google’s ReCaptcha not appearing?

Recently I had a weird problem that Recaptcha has not rendered at all in most of the cases. It seemed random however, but most of the cases it failed. Later I’ve figured out, that it was caused by some network race conditions. The solution was then quite straightforwad: manual initialization of ReCaptcha after the script has been loaded.

I’ve wrapped the whole solution as Angular directive, so everything is in one place. Feel free to use it

.directive('recaptcha', ['$window',
    function ($window) {

    //
    // The actual directive definition object
    //
    return {
        restrict: 'AE',
        scope: {
            sitekey: '='
        },

        template: '<script async defer src="https://www.google.com/recaptcha/api.js?onload=onloadCallbackReCaptcha&render=explicit"></script><div id="g-recaptcha-manual"></div>',

        link: function (scope, element, attrs) {
            $window.onloadCallbackReCaptcha = function onloadCallbackReCaptcha() {
                $window.grecaptcha.render('g-recaptcha-manual', { 'sitekey': scope.sitekey });
            }
        }
    };
}]);

Example of usage

<recaptcha sitekey="'@Html.Raw(ConfigurationProvider.Instance.GetSetting("CaptchaSiteKey"))'"></recaptcha>