如何对 vcRecaptchaService.execute() 使用 .then 方法？

Question

我正在使用 anuglar-recaptcha 将 Google Invisible Recaptcha 添加到我的登录表单

我面临的问题是，在调用 vcRecaptchaService.execute 之后，如果我打印 recaptcha_reponse，我将看到 undefined 作为输出。但是，如果我在几秒钟后使用测试函数 printRecaptchaReponse 打印 recaptcha_reponse，我将看到 recaptcha_reponse 被打印出来。

这里的问题是，库函数 vcRecaptchaService.execute() 不是 returning $promise。它实际上 returning none

有什么办法可以做到这一点吗？

问题是什么：

// 1. Call this function from html first
$scope.testRecaptchaExecute = function() {
    vcRecaptchaService.execute($scope.widgetId);
    console.log($scope.user.recaptcha_reponse);
    // undefined :-(
    return();
}

// 2. Call this function from html few seconds after testRecaptchaExecute() is called

$scope.printRecaptchaReponse = function() {
    console.log($scope.user.recaptcha_reponse);
    //JVRk4cZ4J_RluoH2
}

我想要什么： 像，

vcRecaptchaService.execute().then(ret => { //do something here }) 此代码的问题是 vcRecaptchaService.execute 不要 return 承诺。此代码无效

问题总结 vcRecaptchaService.execute()如何使用.then方法？

Answer 1

您可以尝试使用此工作代码 recaptcha

Javascript

$scope.captcha = {
    response: null,
    widgetId: null,
    modelKey: 'test key',
    size: 'normal',
    setResponse: function (response) {
        $scope.captcha.response = response;
    },
    setWidgetId: function (widgetId) {
        $scope.captcha.widgetId = widgetId;
    },
    cbExpiration: function () {
        vcRecaptchaService.reload($scope.captcha.widgetId);
        $scope.captcha.response = null;
    }
}

Html

<div ng-model="form.recaptcha" 
     size="captcha.size" 
     vc-recaptcha theme="'light'" 
     key="captcha.modelKey" 
     on-create="captcha.setWidgetId(widgetId)"
     on-success="captcha.setResponse(response)" 
     on-expire="captcha.cbExpiration()" 
     required>
</div>

<p ng-show="!form.recaptcha" class="error">Please resolve the captcha</p>