I am developing an ASP.NET MVC Web Application. I am using Angular JS. But I am having a problem with submitting post form to server because of CSRF validation. First of all, I am new to Angular JS. Please see my scenario below.
In angular js, I am submitting form like this on button click event
angular.module('loginApp', ['ui.bootstrap', 'blockUI']).controller('loginController', function ($scope) {
$scope.loginFormData = { }
$scope.submitLoginForm = function()
{
$http.post("url", $scope.loginFormData, function (response) {
})
}
});
At server side, I do CSRF validation to form post
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<JsonResult> Login(LoginViewModel model)
{
//Do other stuff
}
Please see my form html here
@Html.AntiForgeryToken()
<div class="lock-container">
<div class="panel panel-default text-center paper-shadow" data-z="0.5">
<div class="panel-body">
<div class="form-group">
<div class="form-control-material">
<input class="form-control" ng-model="username" type="text" placeholder="Username">
@Html.LabelFor(x => x.UserName)
</div>
</div>
<div class="form-group">
<div class="form-control-material">
<input class="form-control" ng-model="password" type="password" placeholder="Enter Password">
@Html.LabelFor(x=>x.Password)
</div>
</div>
<button ng-click="submitLoginForm()" class="btn btn-primary">Login <i class="fa fa-fw fa-unlock-alt"></i></button>
</div>
</div>
</div>
Actually it is not a form. I am just submitting data with Ajax basically. You noticed @Html.AntiForgeryToken() at the top. When I inspect in browser, I can see like this.
What I want to do is I want to get that token value and send in the $http post like below.
$http.post("url",{ "_RequestVerificationToken": $scope.csrfToken }, function (response) {
})
If I send like above, csrf validation will be successful at the server. Please how can I achieve it it angular js? Please help me. Please.
