VisualCaptcha를 AngularJS와 함께 사용하고 RESTful에서 slimPHP를 사용하는 방법

Question

그래서 프론트 엔드에 AngularJS을, 백엔드에 REST URL을 사용합니다. SlimPHPVisualCaptch을 사용하려고하고 PHP 측의 지침을 따르고 백엔드에서 작동하는 것처럼 보입니다. URL을 호출하고 콘솔에 표시하는 간단한 Angular dataService를 만들었지 만 단순히 연결하는 방법을 이해하지 못합니다. Angular를 사용하여 해당 부분도 다운로드했지만 HTML을 작성한 경우 <div> 안에 captcha을 호출합니다. 실제로 실제로 문제의 1 개를 설명하겠습니다. Angular가 실행하려고 시도하는 URL이 잘못되었지만 구성 방법을 모르면 옵션이 있습니까? 그럼 내가 지금까지 가지고있는 코드를 보여 드리겠습니다 ... 그런데, Controller as vm 구문을 사용하기 때문에 코드에 $scope을 찾을 수 없습니다.

HTML :

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

AngularJS와 컨트롤러 코드 : 나는 각도로 VisualCaptcha의 예를 복사 할 때 그들이

# 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); }); 

일을 내가 실행 알고

// 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의 경로, 코드, 나쁜 URL 호출을 보여줍니다 (내 SlimPHP API가 다른 위치에 있기 때문에 좋지 않습니다). 그래서 나쁜 URL 호출은 다음과 같습니다 그러나
GET http://localhost/myproject/user/start/5

는이
GET http://localhost/myproject/api/captcha/start/5

같아야 내 SlimPHP API를 경로에 적절한 전화를 걸 어디 내가 VisualCaptcha와 각도에 대한 경로를 구성 할 ??? 나는 또한 나의 적당한 URL의 결과를 붙였다, 그래서 나는 나의 백엔드 (SlimPHP)가 제대로 작동하고 있다고 생각한다. 그것은 잘못된 컨트롤러의 Angular 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; 
    } 
}; 

나는 내 SlimPHP API를 URL에 적절한 전화를 만드는 captchaOptions 내부의 url을 설정할 수 있다는 것을 발견 이미지를 표시하지 않는 문제가 있습니다. 이미지가 PHP 나 클라이언트 측의 Angular에서 오는 것입니까? 어느 폴더에 모든 이미지가 포함되어야합니까? 실제로 콘솔이 오류 메시지가 : 실제로 오디오 원하지 않는

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

, 그것은 나에게이 오디오 오류를주고 있지만, 단순히 이미지를 사용하려면, 그게 다야. 누군가 나를 도울 수 있었습니까?

Answer 1

2 일이 지나면 마침내 작동하게되었습니다. 내가해야 할 몇 가지 코드 변경이 있습니다.그래서 여기에 수정 목록입니다 : 또한 확인이 버튼을 추가,

// 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; 
}; 

그런 다음 대신 Foundation의 Bootstrap와 함께 작동하는 HTML 코드를 변경 : 는

첫째, 나는 내 SlimPHP 응용 프로그램 내에서 세션 변수를 실종됐다 이 채워져 있다면 그것은 유효 인 경우 :

Controller as vm 구문을 사용하여 내 AngularJS 컨트롤러 내부의 다음

<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> 

:

를

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(); 
     });   
} 

다음 또한 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로 전화를 걸어서 dataService을 통해 양식을 저장하고, 그 다음 서버 백엔드 측에서 2 가지 일이 생길 것입니다 (1- captcha 유효성 확인, 2- 절약형 양식)
또한 나는 자신들의 예제를 수행 한 방식이 맘에 들지 않기 때문에 데이터를 post으로 수정했습니다. AngularJS SPA 애플리케이션에 직접 양식을 게시하지 않고 대신 이라는 dataService을 사용하는 것을 선호합니다. 내 postData 변수를 정의하십시오.

이러한 모든 변경 사항과 함께 ... 결국 두 이미지 모두에서 작동합니다. & 오디오 !!!