AngularJS와는

Question

나는 내 응용 프로그램

을의 인증을 관리하기 위해 수행 한 AngularJS와 서비스에 내 로그인 형태로 면도기 MVC 도우미에 의해 생성되는 RequestVerificationToken를 전달하고 싶은 서비스에 requestVerificationToken를 전달 내 (가) @ Html.AntiForgeryToken() 이런 식으로 렌더링

<div ng-model="loginRequest" > 
     <form ng-submit="submit()" ng-controller="loginCtrl"> 
      @Html.AntiForgeryToken() 

      <input id="username" ng-model="loginRequest.Username" type="text" name="text" /> 
      <input id="password" ng-model="loginRequest.Password" type="text" name="text" /> 
      <input type="submit" id="submit" value="Submit" /> 
      <br/> 
      isValid: {{loginRequest.isValid}} 
      <br/> 
      username: {{loginRequest.Username}} 
      <br/> 
      Password: {{loginRequest.Password}} 
     </form> 
    </div> 

:

이

<input name="__RequestVerificationToken" type="hidden" value="AVzyqDKHSPjaY7L_GTpkasMAABRQRVRFUkFMSUVOV0FSRVxQZWRybwA1"> 

내 AngujarJs 컨트롤러가 성공적으로 주입 형태는이 다음이다 LY 내 "loginService"내가

function loginCtrl($scope, loginService) { 
    $scope.submit = function() { 
     loginService.authenticate($scope.loginRequest,function(data) { 
      $scope.loginRequest.isValid = (data.User!=null); 
      //console.log(data); 
     }); 

    }; 
} 

서비스 서비스에 포스트를 통해 사용자 이름과 암호를 보낼 수 있습니다

이

angular.module('App.services', ['ngResource']). 
    factory('loginService', 
     function ($resource) { 
      return $resource('/Api/User/login', '', 
       { 
         authenticate: { 
         method: 'POST', 
         isArray: false, 
         headers: { 'X-XSRF-Token': '?????' } 
        } 
       }); 
     }); 

내 문제는 내가 어떻게 읽을 형태로 렌더링 된 토큰 그것을 서비스에 전달하고 로그인 양식에서 가져온 토큰으로 헤더를 설정하십시오. 내가 알기로는 DOM을 조작하는 좋은 습관이 아니며이를 수행하기위한 지시문을 만들어야할지 모르겠습니다. 어떤 제안이라도 환영합니다.

Answer 1

내가 꽤 좋은 해결책을 찾은 것 같아요. 여기서 제안한 내용으로 시작한 http://www.novanet.no/no/blog/olav-nybo/dates/2013/12/anti-forgery-tokens-using-mvc-web-api-and-angularjs/하지만 컨트롤러 뒤에 지시문이 실행된다는 것이 문제였습니다. 따라서 컨트롤러에서 초기 데이터를 검색하려는 경우 매우 어려웠습니다.

지시문을 사용하는 대신 http 헤더 설정 섹션 아래에있는 $ http 서비스 설명서 http://docs.angularjs.org/api/ng.$http의 Module.run() 메서드를 사용하십시오.

나는 몸 요소와 위의 블로그 게시물에서 참조 Html 헬퍼 확장을 사용하고 내 Module.run()는 다음과 같습니다

myModule.run(['$http', function($http) { 
    $http.defaults.headers.common['RequestVerificationToken'] = angular.element("body").attr('ncg-request-verification-token'); 
}]); 

나는 그것이 매우 우아한 솔루션을하게 생각합니다.

Answer 2

슬프게도, 가장 쉬운 방법은 angular.js 전에 프로젝트에 jquery.js을 포함하는 것입니다, 다음을 수행하십시오

headers: { 'X-XSRF-Token': angular.element('input[name="__RequestVerificationToken"]') } 

Answer 3

나는이 동일한 문제를 가지고 있으며 사용자 정의 HtmlHelper에서 사용자 정의 AntiForgeryToken 메소드를 만드는 것으로 해결했습니다.

public static IHtmlString AngularAntiForgeryToken(this HtmlHelper html, string ngModelName = "AntiForgeryToken") 
{ 
    MvcHtmlString antiForgery = html.AntiForgeryToken(); 
    string antiForgeryString = antiForgery.ToString(); 
    Regex regex = new Regex(string.Format("value=[\"|']([a-zA-Z0-9+=/\\-_]+)[\"|']", ngModelName)); 
    Match match = regex.Match(antiForgeryString); 
    string antiForgeryToken = string.Empty; 
    if (match.Success) 
     antiForgeryToken = match.Groups[1].ToString(); 

    string result = antiForgeryString.Replace("<input", string.Format("<input ng-model=\"{0}\" ng-init=\"{0} = '{1}'\"", ngModelName, antiForgeryToken)); 

    return new HtmlString(result); 
}