AngularJS

Question

का उपयोग कर ब्राउज़र कुकी में प्रमाणीकरण बेयरर टोकन को संग्रहीत करने के लिए मैंने ASP.net पहचान का उपयोग करके एक भालू टोकन बनाया है। AngularJS में मैंने अधिकृत डेटा प्राप्त करने के लिए यह फ़ंक्शन लिखा था।

$scope.GetAuthorizeData = function() { 
$http({ 
      method: 'GET', 
      url: "/api/Values", 
      headers: { 'authorization': 'bearer <myTokenId>' }, 
}).success(function (data) { 
      alert("Authorized :D"); 
      $scope.values = data; 
     }).error(function() { 
      alert("Failed :("); 
     }); 
    }; 

तो मैं ब्राउजर कुकीज में इस टोकन संग्रहीत करना चाहते हैं। यदि यह टोकन मौजूद है, तो टोकन लें और आईआईएस सर्वर से डेटा प्राप्त करें अन्यथा नया टोकन प्राप्त करने के लिए लॉगिन करने के लिए लॉगिन पेज पर रीडायरेक्ट करें।

इसी प्रकार, यदि उपयोगकर्ता लॉग आउट बटन पर क्लिक करता है, तो उसे ब्राउज़र कुकी से टोकन को हटा देना चाहिए।

यह कैसे करें? यह संभव है? क्या उपयोगकर्ता को प्रमाणीकृत और अधिकृत करने का यह उचित तरीका है? यदि एकाधिक उपयोगकर्ता टोकन हैं तो क्या करें?

Answer 1

वहाँ एक $cookies सेवा उपलब्ध है ngCookies मॉड्यूल का उपयोग कर AngularJS API में। यह नीचे की तरह इस्तेमाल किया जा सकता है:

function controller($cookies) { 
    //set cookie 
    $cookies.put('token', 'myBearerToken'); 

    //get cookie 
    var token=$cookies.get('token'); 

    //remove token 
    $cookies.remove('token'); 
} 
controller.$inject=['$cookies']; 

अपने मामले के लिए यह होगा:

//inject $cookies into controller 
$scope.GetAuthorizeData = function() { 
    $http({ 
     method: 'GET', 
     url: "/api/Values", 
     headers: { 'authorization': 'bearer <myTokenId>' }, 
    }) 
    .success(function (data) { 
     $cookies.put('token', data); 
    }).error(function() { 
     alert("Failed :("); 
    }); 
}; 

तुम भी angular-cookies module कोड जोड़ने के लिए होगा। और इसे अपने कोणीय ऐप में जोड़ें: angular.module('myApp', ['ngCookies']);। Docs for Angular Cookies.

मैं Http interceptor के उपयोग का भी सुझाव देना चाहूंगा जो प्रत्येक अनुरोध के लिए मैन्युअल रूप से सेट करने के बजाय प्रत्येक अनुरोध के लिए भालू शीर्षलेख सेट करेगा।

//Create a http interceptor factory 
function accessTokenHttpInterceptor($cookies) { 
    return { 
     //For each request the interceptor will set the bearer token header. 
     request: function($config) { 
      //Fetch token from cookie 
      var token=$cookies.get['token']; 

      //set authorization header 
      $config.headers['Authorization'] = 'Bearer '+token; 
      return $config; 
     }, 
     response: function(response) { 
      //if you get a token back in your response you can use 
      //the response interceptor to update the token in the 
      //stored in the cookie 
      if (response.config.headers.yourTokenProperty) { 
        //fetch token 
        var token=response.config.headers.yourTokenProperty; 

        //set token 
        $cookies.put('token', token); 
      } 
      return response; 
     } 
    }; 
} 
accessTokenHttpInterceptor.$inject=['$cookies']; 

//Register the http interceptor to angular config. 
function httpInterceptorRegistry($httpProvider) { 
    $httpProvider.interceptors.push('accessTokenHttpInterceptor'); 
} 
httpInterceptorRegistry.$inject=['$httpProvider']; 

//Assign to module 
angular 
    .module('myApp') 
    .config(httpInterceptorRegistry) 
    .factory('accessTokenHttpInterceptor', accessTokenHttpInterceptor) 

होने http interceptor जगह में आप प्रत्येक अनुरोध के लिए Authorization header निर्धारित करने की आवश्यकता नहीं है।

function service($http) { 
    this.fetchToken=function() { 
     //Authorization header will be set before sending request. 
     return $http 
      .get("/api/some/endpoint") 
      .success(function(data) { 
       console.log(data); 
       return data; 
      }) 
    } 
} 
service.$inject=['$http'] 

जैसा कि बोरीस ने कहा है: इसे हल करने के अन्य तरीके हैं। टोकन को स्टोर करने के लिए आप localStorage का भी उपयोग कर सकते हैं।इसका उपयोग http इंटरसेप्टर के साथ भी किया जा सकता है। कुकीज़ से स्थानीय स्टोरेज में कार्यान्वयन को बस बदलें।

function controller($window) { 
    //set token 
    $window.localStorage['jwt']="myToken"; 

    //get token 
    var token=$window.localStorage['jwt']; 
} 
controller.$inject=['$window']; 

Answer 2

मैं सुरक्षा के उद्देश्यों के लिए कुकी को डेटा को रखने के खिलाफ सलाह दूंगा, आपको कुकीज को सुरक्षित रखने के लिए सेट करना चाहिए और केवल (जावास्क्रिप्ट से सुलभ नहीं)। यदि आप एसएसएल का उपयोग नहीं कर रहे हैं, तो मैं https पर जाने का सुझाव दूंगा।

$window.sessionStorage.setItem('userInfo-token', 'tokenData'); 

यह साफ कर दिया जाएगा: $window सेवा का उपयोग करके

{ 
    tokenData: 'token' 
} 

आप sessionStorage में टोकन डेटा बचा सकते हैं:

मैं एक json प्रतिक्रिया में अधिकार का अंतिम बिंदु से टोकन से होकर गुजरेगा एक बार उपयोगकर्ता पृष्ठ को बंद कर देता है, और आप इसे मैन्युअल रूप से खाली स्ट्रिंग पर सेट करके हटा सकते हैं:

$window.sessionStorage.setItem('userInfo-token', ''); 

संपादित करें:

पकड़ने डेटा, cbass (परीक्षण नहीं किया है, तो आप प्रतिक्रिया/अनुरोध जानकारी के साथ बेला के लिए वस्तुओं का निरीक्षण कर सकते हैं) से अनुकूलित के लिए

इंटरसेप्टर कार्यान्वयन:

//Create a http interceptor factory 
function accessTokenHttpInterceptor($window) { 
    return { 
     //For each request the interceptor will set the bearer token header. 
     request: function($config) { 
      //Fetch token from cookie 
      var token=$window.sessionStorage.getItem('userInfo-token'); 

      //set authorization header 
      $config.headers['Authorization'] = 'Bearer '+token; 
      return $config; 
     }, 
     response: function(response) { 
      //if you get a token back in your response you can use 
      //the response interceptor to update the token in the 
      //stored in the cookie 
      if (response.config.url === 'api/token' && response.config.data.tokenData) { 
        //fetch token 
        var token=response.config.data.tokenData; 

        //set token 
        $window.sessionStorage.setItem('userInfo-token', token); 
      } 
      return response; 
     } 
    }; 
} 

accessTokenHttpInterceptor.$inject=['$window'];