Using with AngularJS SPA

Jul 9, 2013 at 3:12 PM
Edited Jul 9, 2013 at 3:33 PM
Not really a question, just thanks to the author for the library!

I succeeded using it in SPA with AngularJS. If someone else wants to, here goes a simplified example of how to do it.

Html code:
<form ng-controller="Ctrl.RecoverPassword">
    Email:
    <input type="text" class="input_text" ng-model="email">
    Digits from the picture:
    <img ng-src="{{captchaImageUrl}}">
    <input type="text" ng-model="captcha">
    <a href="#" ng-click="updateCaptchaCall()">Refresh</a>
    <input type="submit" value="Submit" ng-click="recoverPasswordCall()">
</form>
Angular controller code ($user is my custom service):
Ctrl.RecoverPassword = function($scope, $user, $http) {
    $scope.recoverPasswordCall = function() {
        $user.recoverPassword($scope.email, $scope.captcha, $scope.captchaToken)
        .then(function () {
            delete $scope.errors;
        }, function (errors) {
            $scope.errors = errors;
            $scope.updateCaptchaCall(); // Image is validated only once, so refresh it
        });
    };

    $scope.updateCaptchaCall = function() {
        $http.post('/Account/JsonCaptchaInit')
            .success(function(data) {
                $scope.captchaImageUrl = data.imageUrl;
                $scope.captchaToken = data.tokenValue;
                $scope.captcha = '';
            });
    };

    $scope.updateCaptchaCall();
};
MVC controller code to generate captcha:
[AllowAnonymous, HttpPost]
public JsonResult JsonCaptchaInit()
{
    var parameterLength = new ParameterModel(DefaultCaptchaManager.LengthAttribute, 5);
    var parameters = new ParameterModelContainer(new[] { parameterLength });
    var info = CaptchaUtils.CaptchaManager.GenerateNew(this, parameters);
    return Json(new { imageUrl = info.ImageUrl, tokenValue = info.TokenValue });
}
MVC controller code to check captcha (model contains posted data):
var captchaValue = CaptchaUtils.CaptchaManager.StorageProvider
                             .GetValue(model.CaptchaToken, TokenType.Validation);
if (captchaValue == null || !captchaValue.IsEqual(model.Captcha))
{
    // Process error
}
Application_Start code to set some parameters:
CaptchaUtils.ImageGenerator.Height = 37;
CaptchaUtils.ImageGenerator.Width = 128;
((DefaultCaptchaManager) CaptchaUtils.CaptchaManager)
    .CharactersFactory = () => "1234567890";
Coordinator
Jul 9, 2013 at 3:20 PM
Great, thank you.
I think someone will find this information very useful.

Regards,
Vyacheslav Volkov
Apr 14, 2014 at 5:06 PM
Hi aleyush

Thanx for the code, but i have encountered that, the line below is returning null..
var captchaValue = CaptchaUtils.CaptchaManager.StorageProvider
                             .GetValue(token, TokenType.Validation);
Could you perharps point me to the right direct or has this changed..
Apr 14, 2014 at 5:21 PM
In my opinion, this line of code reads the value that is stored by CaptchaUtils.CaptchaManager.GenerateNew. Returning null must mean that it was not stored or has disappeared from the storage for some reason...
May 15, 2014 at 2:02 PM
Edited May 15, 2014 at 2:37 PM
This is a great post and exactly what i need for my angular spa. I've run into an error when calling the "GenerateNew" function and i'm hoping someone can point me in the right direction. When I make the call i get the following error: "Value cannot be null.Parameter name: imageUrl". Any ideas?

also i was wondering what version of Captcha MVC you used in this write up?

i installed the latest nuget drop (CaptchaMvc.Mvc5 1.5.0)
May 16, 2014 at 5:36 PM
also i was wondering what version of Captcha MVC you used in this write up?
<package id="CaptchaMvc.Mvc4" version="1.5.0" targetFramework="net45" />
Dec 17, 2014 at 6:07 PM
Thank you @aleyush for sharing this!