Как использовать VisualCaptcha с AngularJS и slimPHP в RESTful

Пройдя 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 был только для тестирования & в целях развития, вы должны вместо этого проверить VisualCaptcha на сервере перед сохранением формы, которая также находится на сервере. Так что в теории у вас будет только 1 вызов в Angular, который является вызовом сохранения формы через dataService, то на стороне сервера должно быть 2 вещи, которые должны произойти (1 — проверка кода, 2 — форма сохранения)

Я также изменил данные в post потому что мне не нравится, как они сделали свой пример, я никогда не публикую форму непосредственно в приложении AngularJS SPA, вместо этого я предпочитаю использовать dataService вызванный ng-click вот почему я должен был определить свой собственный postData переменная.

Со всеми этими изменениями … он наконец работает на обоих изображениях & Аудио !!!