किसी बिंदु पर एक एप्लिकेशन को प्राधिकरण की आवश्यकता होती है। इसका मतलब है कि विभिन्न स्तरों की पहुंच एक वेबसाइट (या किसी भी चीज़ के लिए) पर अलग तरीके से व्यवहार करती है। यह डेटा देखने से लेकर पूरे क्षेत्रों तक कुछ भी हो सकता है जो उपयोगकर्ताओं के एक समूह द्वारा सुलभ नहीं हैं।

गैर-सिंगल पेज एप्लिकेशन (SPA) में, एक दावा या भूमिका डेटा या एप्लिकेशन के एक क्षेत्र से जुड़ी होती है, या तो उपयोगकर्ता के पास यह भूमिका या दावा है या नहीं। एक SPA में यह समान है, लेकिन एक विशाल अस्वीकरण के साथ। एक SPA ब्राउज़र में डाउनलोड किया जाता है। इस बिंदु पर ब्राउज़र के पास कोड पर पूर्ण नियंत्रण है। एक बुरे इरादे वाला व्यक्ति अपनी इच्छा के अनुसार कोड को बदल सकता है।

क्योंकि SPAs को सुरक्षित नहीं किया जा सकता है, एक SPA में प्रमाणीकरण और प्राधिकरण केवल उपयोगकर्ता अनुभव है। सभी सार्थक सुरक्षा वेब सर्वर पर की जानी चाहिए। यह लेख आपके API को हमलों से सुरक्षित करने के बारे में नहीं है। मैं Pluralsight से एक वीडियो देखने या एक पेपर पढ़ने की सिफारिश करता हूं जो आपकी सर्वर तकनीक के लिए सुरक्षा को संबोधित करता है।

इस लेख का उद्देश्य आपको दिखाना है कि मैंने अपने Angular 1.x SPA में एक प्राधिकरण उपयोगकर्ता अनुभव कैसे जोड़ा।

सुरक्षा स्कोप

मैंने UI के 3 क्षेत्रों की पहचान की है जिन्हें प्राधिकरण की आवश्यकता है: तत्व (HTML), मार्ग, और डेटा।

बस एक अनुस्मारक, एक SPA को सुरक्षित करना सर्वर को सुरक्षित करने का कोई विकल्प नहीं है। क्लाइंट पर अनुमतियां केवल ईमानदार लोगों को ईमानदार रखने और उपयोगकर्ता को एक अच्छा अनुभव प्रदान करने के लिए हैं।

विस्तार से 3 क्षेत्र:

तत्व

आपको विशिष्ट HTML तत्वों को छिपाने की आवश्यकता होगी। यह एक लेबल, डेटा वाली एक तालिका, एक बटन, या पृष्ठ पर कोई भी तत्व हो सकता है।

मार्ग

आप पूरे मार्गों को छिपाना चाहेंगे। कुछ मामलों में आप उपयोगकर्ता को एक दृश्य तक पहुंचने नहीं देना चाहते। मार्ग को सुरक्षित करके एक उपयोगकर्ता दृश्य पर नेविगेट नहीं कर सकता। इसके बजाय उन्हें “आप इस दृश्य पर नेविगेट करने के लिए अधिकृत नहीं हैं” संदेश दिखाया जाएगा।

डेटा

कभी-कभी दृश्य में तत्वों को छिपाना पर्याप्त नहीं होता है। एक चतुर उपयोगकर्ता बस स्रोत को देख सकता है और HTML स्रोत में छिपे हुए डेटा को देख सकता है या इसे ब्राउज़र में स्ट्रीम करते हुए देख सकता है। हम जो चाहते हैं वह यह है कि डेटा पहली जगह में पुनः प्राप्त न हो।

सुरक्षा जोड़ना मुश्किल है। शुरुआत में मैंने HTTP API (क्लाइंट पर) पर पहुंच को सीमित करने का प्रयास किया। मुझे जल्दी ही एहसास हुआ कि यह काम नहीं करेगा। एक उपयोगकर्ता के पास डेटा तक सीधी पहुंच नहीं हो सकती है, लेकिन इसका मतलब यह नहीं है कि उनके पास डेटा तक अप्रत्यक्ष पहुंच नहीं है। HTTP API परत पर (आमतौर पर एप्लिकेशन में सबसे कम), हम कॉल के संदर्भ को नहीं बता सकते और इसलिए इसमें सुरक्षा संबंधों को लागू नहीं कर सकते।

नीचे मैंने कोडिंग नमूने प्रदान किए हैं:

कोड

मैंने प्राधिकरण जांच कोड के लिए एक सेवा बनाई। यह प्राधिकरण का दिल है। सभी प्राधिकरण अनुरोध यह जांचने के लिए इस सेवा का उपयोग करते हैं कि क्या उपयोगकर्ता विशेष कार्रवाई के लिए अधिकृत है।

angular.module('services')
    .service('AuthorizationContext',function(_, Session){

        this.authorizedExecution = function(key, action){

            //Looking for the claim key that was passed in. If it exists in the claim set, then execute the action.
            Session.claims(function(claims){
                var claim = findKey(key, claims);

                //If Claim was found then execute the call.
                //If it was not found, do nothing
                if(claim !== undefined){
                    action();
                }
            });
        };

        this.authorized = function(key, callback){
            //Looking for the claim key that was passed in. If it exists in the claim set, then execute the action.
            Session.claims(function(claims){
                var claim = findKey(key, claims);

                //If they don't have any security key, then move forward and authorization.
                var valid = claim !== undefined;
                callback(valid);
            });
        };

        //this.agencyViewKey = '401D91E7-6EA0-46B4-9A10-530E3483CE15';

        function findKey(key, claims){
            var claim = _.find(claims, function(item){
                return item.value === key;
            });

            return claim;
        }
    });

प्राधिकृत निर्देश

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

angular.module('directives')
    .directive('authorize', ['$compile', 'AuthorizationContext', function($compile, AuthorizationContext) {
        return {
            restrict: 'A',
            replace: true,
            //can't have isolated the scope in a shared directive
            link:function ($scope, element, attributes) {

                var securityKey = attributes.authorize;
                AuthorizationContext.authorized(securityKey, function(authorized){
                    var el = angular.element(element);
                    el.attr('ng-show', authorized);

                    //remove the attribute, otherwise it creates an infinite loop.
                    el.removeAttr('authorize');
                    $compile(el)($scope);
                });
            }
        };
    }]);

तत्व

मैं अपने एप्लिकेशन में टैब पर बहुत अधिक निर्भर करता हूं। मैं प्राधिकृत निर्देश को उस टैब पर लागू करता हूं जिसे मैं उचित दावों के बिना उपयोगकर्ताओं से छिपाना चाहता हूं।

<tabset>
<tab ng-cloak heading="Users" authorize="{{allowUserManagement}}">
...html content
</tab>
</tabset>

मार्ग

मैं ui-router का उपयोग कर रहा हूं। दुर्भाग्य से जो लोग नहीं हैं, मेरे पास बॉक्स के बाहर AngularJS राउटर के लिए कोड नहीं है।

$stateChangeStart में मैं मार्ग को प्रमाणित करता हूं। यह उस घटना में कोड है।

$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
   AuthenticationManager.authenticate(event, toState, toParams);
});

वह फ़ंक्शन जो मार्ग को अधिकृत करता है। यदि यह अधिकृत है, तो मार्ग को जारी रखने की अनुमति है। यदि यह अधिकृत नहीं है, तो उपयोगकर्ता को एक संदेश प्रदर्शित किया जाता है और उन्हें होम पेज पर निर्देशित किया जाता है।

function authorizedRoute(toState, location, toaster, breadCrumbs){
   if(toState.authorization !== undefined){
       AuthorizationContext.authorized(toState.authorization, function(authorized){
           if(!authorized){
               toaster.pop('error', 'Error', 'You are not authorized to view this page.');
               location.path("/search");
           } else {
               breadCrumbs();
           }
       });
   } else{
       breadCrumbs();
   }
}

इस राउटर परिभाषा में आप ‘authorization’ नामक एक संपत्ति देखेंगे। यदि उपयोगकर्ता के पास यह दावा है तो उन्हें आगे बढ़ने की अनुमति है।

angular.module('agency',
    [
        'ui.router',
        'services'
    ])
    .config(function config($stateProvider){
    $stateProvider.state( 'agency', {
        url: '/agency',
        controller: 'agency.index',
        templateUrl: 'agency/agency.tpl.html',
        authenticate: true,
        authorization:'401d91e7-6ea0-46b4-9a10-530e3483ce15',
        data:{ pageTitle: 'Agency' }
    });
});

डेटा

कुछ मामलों में, आप सर्वर से डेटा के लिए अनुरोध नहीं करना चाहते हैं। यदि उपयोगकर्ता के पास दावा है तो उन्हें अनुरोध करने की अनुमति दी जाएगी।

लेख की शुरुआत में उपरोक्त AuthorizationContext authoriedExecution के लिए कोड दिखाता है। यहां आप इसका उपयोग देखते हैं।

AuthorizationContext.authorizedExecution(Keys.authorization.allowUserManagement, function(){
    //execute code, if the loggedin user has rights.

                });

जैसा कि मैंने ऊपर उल्लेख किया है, यह सर्वर को सुरक्षित करने का कोई विकल्प नहीं है। यह कोड एक अद्भुत उपयोगकर्ता अनुभव प्रदान करने के लिए काम करता है।