如何在RESTful中使用VisualCaptcha与AngularJS和slimPHP

时间：2015-01-12 05:14:08

标签： javascript php angularjs captcha slim

所以我在前端使用AngularJS，在后端使用REST网址SlimPHP。我正在尝试使用VisualCaptch并且我遵循PHP方面的指令并且它似乎在后端工作，我做了一个简单的Angular dataService调用url并在控制台上显示它但我根本就不明白如何将其与Angular连接，我也下载了该部分，但是当我创建HTML并在captcha内调用<div>时。那么实际上让我解释一下这个问题，它是Angular试图运行的url是不正确但我只是不知道如何配置它，是否有选项？因此，让我显示到目前为止的代码...顺便说一下，我使用Controller as vm语法，因此您在代码中找不到$scope。

HTML：

<div captcha options="vm.captchaOptions"></div>

AngularJS控制器代码：

// this work as a dataService call to SlimPHP
dataService.getCaptchaHowMany().then(function(data) {
    console.debug(data);
});

// where does my dataService call goes in here???
vm.captchaOptions = {
    imgPath: 'vendors/visual-captcha/img/',
    captcha: { numberOfImages: 5 },
    init: function ( captcha ) {
        vm.captcha = captcha;
    }
};

SlimPHP路线，我知道它们有效

# Captcha Routes
$app->get('/captcha/start/:howMany', function($howMany) use ($app) { CaptchaController::getCaptchaHowMany($app, $howMany); });
$app->get('/captcha/audio(/:type)', function($type = 'mp3') use ($app) { CaptchaController::getCatpchaDiskAudioStreaming($app, $type); });
$app->get('/captcha/image/:index', function($index) use ($app) { CaptchaController::getCatpchaDiskImageStreaming($app, $index); });
$app->post('/captcha/try', function() use ($app) { CaptchaController::postCatchaTryValidate($app); });

当我使用Angular复制VisualCaptcha示例并运行代码时，它显示了一个错误的url调用（因为我的SlimPHP Api位于不同的位置，所以很糟糕）。所以坏网址调用看起来像这样：
GET http://localhost/myproject/user/start/5

但要正确拨打我的SlimPHP Api路线，应该像这样GET http://localhost/myproject/api/captcha/start/5

那么在哪里可以用VisualCaptcha配置Angular的路由？我还附加了我的正​​确URL的结果，所以我认为我的后端（SlimPHP）正常工作，只是在控制器中配置Angular url是错误的。 enter image description here

编辑我现在进一步了解，我发现我们可以在url里面设置captchaOptions使用以下

正确调用我的SlimPHP API 
vm.captchaOptions = {
    imgPath: 'vendors/visual-captcha/img/',
    captcha: { 
        numberOfImages: 5,
        url: 'api/captcha'
    },
    // use init callback to get captcha object
    init: function ( captcha ) {
        vm.captcha = captcha;
    }
};

我现在遇到的问题是它没有显示图像。图像是假设来自PHP还是来自客户端的Angular？哪个文件夹应包含所有图像？我实际上在控制台中收到此错误消息：

HTTP "Content-Type" of "text/html" is not supported. Load of media resource http://localhost/investing/api/captcha/audio?r=353oeaysbjg failed.

我实际上不想要音频，虽然它给了我这个音频错误，我只是想使用图像，就是这样。请有人帮帮我，

1 个答案:

答案 0 :(得分：1)

经过2天后，我终于开始工作了。我必须做一些代码更改..所以这里是修改列表：

首先，我在SlimPHP应用程序中缺少会话变量：

// Inject Session closure into app
$app->session = function() use( $app ) {
    if ( $namespace = $app->request->params( 'namespace' ) ) {
        $session = new \visualCaptcha\Session( 'visualcaptcha_' . $namespace );
    } else {
        $session = new \visualCaptcha\Session();
    }
    return $session;
};

然后更改了HTML代码以使用Bootstrap代替Foundation，还添加了2个按钮，以检查它是否已填写且是否有效：

<div class="form-group">
    <label class="control-label col-sm-5">Visual Captcha Messages</label>
    <div class="col-sm-7" id="status-message">
        <div class="alert" ng-class="{ 'alert-danger': (vm.valid === false), 'alert-success': (vm.valid === true) }" role="alert" ng-show="vm.status !== null">
            <div ng-class="{ 'glyphicon glyphicon-remove-sign': (vm.valid === false), 'glyphicon glyphicon-ok-sign': (vm.valid === true) }" ></div>
            {{ vm.status }}
        </div>
    </div>
</div>

<div class="form-group">
    <label class="control-label col-sm-5">Visual Captcha</label>                
    <div class="col-sm-7" captcha options="vm.captchaOptions"></div>
</div>

<button type="button" class="btn" ng-click="vm.isVisualCaptchaFilled()">Check if visualCaptcha is filled</button>
<button type="button" class="btn" ng-click="vm.isVisualCaptchaValid()">Validate Catpcha</button>

然后使用AngularJS语法在我的Controller as vm控制器内：

vm = this;  
vm.captcha = {};
vm.captchaOptions = {
    imgPath: 'vendors/visual-captcha/img/', // vendors folder on Angular side, only used for "refresh" and "audio" buttons
    captcha: { 
        numberOfImages: 5,
        url: 'api/captcha'                  // url for SlimPHP route calls
    },
    // use init callback to get captcha object
    init: function ( captcha ) {
        vm.captcha = captcha;
    }
};

// vm public functions revealing
vm.isVisualCaptchaFilled = isVisualCaptchaFilled;
vm.isVisualCaptchaValid = isVisualCaptchaValid;

function isVisualCaptchaFilled() {
    if ( vm.captcha.getCaptchaData().valid ) {
        window.alert( 'visualCaptcha is filled!' );
    } else {
        window.alert( 'visualCaptcha is NOT filled!' );
    }
}

function isVisualCaptchaValid() {
    // we will post the captcha image field name and image field value
    var postData = {
        fieldName: vm.captcha.getCaptchaData().name,
        fieldValue: vm.captcha.getCaptchaData().value
    };

    dataService.isVisualCaptchaValid(postData)
        .then(function(data) {
            // Show success/error messages
            if ( data.status === 'noCaptcha' ) {
                vm.valid = false;
                vm.status = 'visualCaptcha was not started!';
            } else if ( data.status === 'validImage' ) {
                vm.valid = true;
                vm.status = 'Image was valid!';
            } else if ( data.status === 'failedImage' ) {
                vm.valid = false;
                vm.status = 'Image was NOT valid!';
            } else if ( data.status === 'validAudio' ) {
                vm.valid = true;
                vm.status = 'Accessibility answer was valid!';
            } else if ( data.status === 'failedAudio' ) {
                vm.valid = false;
                vm.status = 'Accessibility answer was NOT valid!';
            } else if ( data.status === 'failedPost' ) {
                vm.valid = false;
                vm.status = 'No visualCaptcha answer was given!';
            }
        })
        .then(function() {
            vm.captcha.refresh();
        });        
}

然后还必须重写try应用内的SlimPHP路线：

// Try to validate the captcha
// -----------------------------------------------------------------------------
$app->post( '/try', function() use( $app ) {
    $captcha = new \visualCaptcha\Captcha( $app->session );
    $frontendData = $captcha->getFrontendData();
    $isCaptchaValid = false;
    $namespace = '';
    $status = '';

    //POST variables, they come as a JSON encoded inside the POST
    $jsonPostFields = $app->request();
    $post = json_decode($jsonPostFields->getBody(), $associativeArray = true);

    // Load the namespace into url params, if set
    if ( isset($post['namespace']) ) {
        $namespace = $post['namespace'];
    }
    if ( ! $frontendData ) {
        $status = 'noCaptcha';
    } else {
        // If an image field name was submitted, try to validate it
        if(isset($post["fieldName"]) && $post["fieldName"] === $frontendData['imageFieldName']) {
            $imageAnswer = $post["fieldValue"];
            if ( $captcha->validateImage( $imageAnswer ) ) {
                $isCaptchaValid = true;
                $status = 'validImage';
            } else {
                $status = 'failedImage';
            }
        } else if(isset($post["fieldName"]) && $post["fieldName"] === $frontendData['audioFieldName']) {
            $audioAnswer = $post["fieldValue"];
            if ( $captcha->validateAudio( $audioAnswer ) ) {
                $isCaptchaValid = true;
                $status = 'validAudio';
            } else {
                $status = 'failedAudio';
            }
        } else {
            $status = 'failedPost';
        }
        $howMany = count( $captcha->getImageOptions() );
        $captcha->generate( $howMany );
    }
    echo json_encode(array("isCaptchaValid" => $isCaptchaValid, "status" => $status));
} );

请注意，使用dataService仅用于测试＆amp;出于开发目的，您应该在保存同样位于后端的表单之前验证后端上的VisualCaptcha。所以从理论上讲，你只需要在Angular中进行一次调用，这是通过dataService进行的表单保存调用，然后在服务器后端方面就会有两件事情需要发生（1-验证码验证，2-保存）形成） 我还将数据修改为post，因为我不喜欢他们完成示例的方式，我从不直接在AngularJS SPA应用程序中发布表单，而是更喜欢使用{由dataService调用{1}}这就是为什么我必须定义自己的ng-click变量。

随着所有这些变化......它最终适用于图像和图像。音频!!!

相关问题
最新问题