javascript - 如何为 vcRecaptchaService.execute() 使用 .then 方法？

Question

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

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

这里的问题是，库函数vcRecaptchaService.execute()没有在$promise这里返回。它实际上返回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 不返回承诺。此代码不起作用

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

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>