কোনো না কোনো সময় একটি অ্যাপ্লিকেশনের অনুমোদনের প্রয়োজন হয়। এর অর্থ বিভিন্ন স্তরের অ্যাক্সেস একটি ওয়েব সাইটে (বা অন্য কোনো কিছুতে) ভিন্নভাবে আচরণ করে। এটি ডেটা দেখা থেকে শুরু করে সম্পূর্ণ এলাকা পর্যন্ত হতে পারে যা ব্যবহারকারীদের একটি গ্রুপের জন্য অ্যাক্সেসযোগ্য নয়।

অ-একক পৃষ্ঠা অ্যাপ্লিকেশন (SPA) এ, একটি দাবি বা ভূমিকা ডেটা বা অ্যাপ্লিকেশনের একটি এলাকার সাথে যুক্ত থাকে, ব্যবহারকারীর কাছে এই ভূমিকা বা দাবি আছে বা নেই। একটি SPA তে এটি একই, কিন্তু একটি বিশাল দায়িত্ব সহ। একটি SPA ব্রাউজারে ডাউনলোড করা হয়। এই পর্যায়ে ব্রাউজারের কোডের উপর সম্পূর্ণ নিয়ন্ত্রণ রয়েছে। একজন দুষ্ট ব্যক্তি কোডটি পরিবর্তন করে তার ইচ্ছা অনুযায়ী কাজ করাতে পারে।

যেহেতু SPA গুলি সুরক্ষিত করা যায় না, একটি 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.

                });

যেমনটি আমি উপরে উল্লেখ করেছি, এটি সার্ভার সুরক্ষিত করার কোনো বিকল্প নয়। এই কোড একটি দুর্দান্ত ব্যবহারকারী অভিজ্ঞতা প্রদানের জন্য কাজ করে।