Javascript 如何在RESTful中将VisualCaptcha与AngularJS和slimPHP结合使用
所以我在前端使用Javascript 如何在RESTful中将VisualCaptcha与AngularJS和slimPHP结合使用,javascript,php,angularjs,captcha,slim,Javascript,Php,Angularjs,Captcha,Slim,所以我在前端使用AngularJS，在后端使用REST-url使用SlimPHP。我正在尝试使用，我遵循PHP端的说明，它似乎在后端工作，我制作了一个简单的Angular数据服务，调用url并将其显示在控制台上，但我不知道如何将其与Angular连接，我也下载了这一部分，但是当我创建HTML并调用中的验证码时。事实上，让我来解释问题的一个方面，Angular试图运行的url是不正确的，但我不知道如何配置它，有选项吗？现在让我来显示我到目前为止的代码。。。顺便说一下，我使用控制器作为vm语法，因此
AngularJSSlimPHPHTML验证码时。事实上，让我来解释问题的一个方面，Angular试图运行的url是不正确的，但我不知道如何配置它，有选项吗？现在让我来显示我到目前为止的代码。。。顺便说一下，我使用控制器作为vm
语法，因此您不会在我的代码中找到$scope
。
HTML:
<div captcha options="vm.captchaOptions"></div>
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位于不同的位置）。因此，错误的url调用如下所示：
GEThttp://localhost/myproject/user/start/5
但是要正确地调用mySlimPHP
Api路由，它应该是这样的
GEThttp://localhost/myproject/api/captcha/start/5
那么我应该在哪里配置VisualCaptcha的Angular路由？？？我还附加了正确url的结果，因此我认为我的后端（SlimPHP）工作正常，只是在控制器中配置角度url是错误的。
编辑
我现在更进一步了，我发现我们可以在captchaOptions
中设置url
，现在可以通过以下内容正确调用我的SlimPHP
api url
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.
我其实不想要音频，虽然它给了我这个音频错误，我只是想使用图像，仅此而已。谁能帮帮我吗 在这方面花了两天时间后，我终于让它工作了。我不得不做一些代码更改。。下面是修改列表：
首先，我的SlimPHP
应用程序中缺少session变量：
// 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>
然后还必须在SlimPHP
应用程序中重写try
路径：
// 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
仅用于测试和开发目的，您应该在保存同样位于后端的表单之前，在后端验证VisualCaptcha
。因此，理论上，您在Angular中只有一个调用，这是通过数据服务进行的表单保存调用，然后在服务器后端需要进行两件事情（1-验证码验证，2-保存表单）
我还将数据修改为post
，因为我不喜欢他们做示例的方式，我从来没有在AngularJS SPA应用程序中直接发布表单，相反，我更喜欢使用由ng单击调用的dataService
，这就是我必须定义自己的postData
变量的原因。
所有这些变化。。。它最终在图像和音频上都能工作
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 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));
} );