AngularJS: सिंगल पेज एप्लिकेशन में प्रमाणीकरण का उपयोग करने के लिए मूल उदाहरण


100

मैं AngularJS में नया हूं और उनके ट्यूटोरियल के माध्यम से गया और इसके लिए एक महसूस किया।

मेरे पास तैयार मेरी परियोजना के लिए एक बैकएंड है जहां प्रत्येक RESTसमापन बिंदु को प्रमाणित करने की आवश्यकता है।

मैं क्या करना चाहता हूं
।) मैं अपनी परियोजना के लिए एक ही पृष्ठ रखना चाहता हूं http://myproject.com
b।) एक बार जब कोई उपयोगकर्ता ब्राउज़र में URL को हिट करता है, तो इस आधार पर कि उपयोगकर्ता लॉग इन है या नहीं, उसे एक ही यूआरएल के तहत एक होम पेज / व्यू या लॉगिन पेज / व्यू के साथ प्रस्तुत किया जाता है http://myproject.com
सी।) यदि कोई उपयोगकर्ता लॉग इन नहीं है, तो यह फ़ॉर्म भरता है और सर्वर USER_TOKENसत्र में सेट करता है , इसलिए एंडपॉइंट्स के आगे सभी अनुरोधों को आधार पर प्रमाणित किया जाएगाUSER_TOKEN

मेरा भ्रम
क।) मैं AngularJS का उपयोग करके क्लाइंट-साइड प्रमाणीकरण कैसे संभाल सकता हूं? मैंने यहां और यहां देखा, लेकिन यह नहीं समझा कि उन्हें कैसे उपयोग किया जाए
।) मैं उपयोगकर्ता के आधार पर अलग-अलग विचार कैसे प्रस्तुत कर सकता हूं, यदि उपयोगकर्ता उसी यूआरएल के तहत लॉग इन है या नहीं।http://myproject.com

मैं पहली बार angular.js का उपयोग कर रहा हूं और वास्तव में भ्रमित हो रहा हूं कि कैसे शुरू किया जाए। किसी भी सलाह और / या संसाधनों की बहुत सराहना की जाती है।


कृपया नीचे लेख frederiknakstad.com/
अजय बेनीवाल

1
@MichaelCalkins सिर्फ एक लिंक रखना रचनात्मक नहीं है। आपको कम से कम यह कहना चाहिए कि लिंक क्या प्रदान करने वाला है।
डेव गॉर्डन


OAuth की टीम के पास इस andreareginato.github.io/oauth-ng के
Faktor 10

जवाबों:


48

मैंने इस लेख को मूल रूप से एक गितुब रेपो बनाया है: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf034sacec

एनजी-लॉगिन जीथब रेपो

Plunker

मैं जितना संभव हो उतना अच्छा समझाने की कोशिश करूँगा, आशा है कि मैं आप में से कुछ की मदद करूँगा:

(1) app.js: एप्लिकेशन परिभाषा पर प्रमाणीकरण स्थिरांक का निर्माण

var loginApp = angular.module('loginApp', ['ui.router', 'ui.bootstrap'])
/*Constants regarding user login defined here*/
.constant('USER_ROLES', {
    all : '*',
    admin : 'admin',
    editor : 'editor',
    guest : 'guest'
}).constant('AUTH_EVENTS', {
    loginSuccess : 'auth-login-success',
    loginFailed : 'auth-login-failed',
    logoutSuccess : 'auth-logout-success',
    sessionTimeout : 'auth-session-timeout',
    notAuthenticated : 'auth-not-authenticated',
    notAuthorized : 'auth-not-authorized'
})

(2) प्रामाणिक सेवा : सभी निम्नलिखित कार्य ओडिसी.जेएस सेवा में कार्यान्वित किए जाते हैं। प्रमाणीकरण प्रक्रियाओं के लिए सर्वर के साथ संचार करने के लिए $ http सेवा का उपयोग किया जाता है। इसमें प्राधिकरण पर कार्य शामिल हैं, अर्थात यदि उपयोगकर्ता को एक निश्चित कार्रवाई करने की अनुमति है।

angular.module('loginApp')
.factory('Auth', [ '$http', '$rootScope', '$window', 'Session', 'AUTH_EVENTS', 
function($http, $rootScope, $window, Session, AUTH_EVENTS) {

authService.login() = [...]
authService.isAuthenticated() = [...]
authService.isAuthorized() = [...]
authService.logout() = [...]

return authService;
} ]);

(3) सत्र: उपयोगकर्ता डेटा रखने के लिए एक सिंगलटन। यहां कार्यान्वयन आप पर निर्भर करता है।

angular.module('loginApp').service('Session', function($rootScope, USER_ROLES) {

    this.create = function(user) {
        this.user = user;
        this.userRole = user.userRole;
    };
    this.destroy = function() {
        this.user = null;
        this.userRole = null;
    };
    return this;
});

(4) पैरेंट कंट्रोलर: इसे अपने एप्लिकेशन के "मुख्य" फंक्शन के रूप में समझें, सभी कंट्रोलर इस कंट्रोलर से इनहेरिट करते हैं, और यह इस ऐप के ऑथेंटिकेशन की रीढ़ है।

<body ng-controller="ParentController">
[...]
</body>

(5) अभिगम नियंत्रण: कुछ मार्गों पर पहुंच से इनकार करने के लिए 2 चरणों को लागू करना होगा:

क) यूआई राउटर की $ स्टेटप्रॉइडर सेवा पर प्रत्येक मार्ग तक पहुंचने की अनुमति दी गई भूमिकाओं का डेटा जोड़ें, जैसा कि नीचे देखा जा सकता है (उसी तरह यह एनकाउंटर के लिए काम कर सकता है)।

.config(function ($stateProvider, USER_ROLES) {
  $stateProvider.state('dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard/index.html',
    data: {
      authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
    }
  });
})

ख) $ rootScope पर। $ पर ('$ StateChangeStart') उपयोगकर्ता को अधिकृत नहीं होने पर राज्य परिवर्तन को रोकने के लिए फ़ंक्शन जोड़ें।

$rootScope.$on('$stateChangeStart', function (event, next) {
    var authorizedRoles = next.data.authorizedRoles;
    if (!Auth.isAuthorized(authorizedRoles)) {
      event.preventDefault();
      if (Auth.isAuthenticated()) {
        // user is not allowed
        $rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
      } else {
        // user is not logged in
        $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
      }
    }
});

(6) प्रामाणिक इंटरसेप्टर: इसे लागू किया गया है, लेकिन इस कोड के दायरे में जाँच नहीं की जा सकती है। प्रत्येक $ http अनुरोध के बाद, यह इंटरसेप्टर स्टेटस कोड की जाँच करता है, यदि नीचे में से कोई एक लौटाया जाता है, तो यह उपयोगकर्ता को फिर से लॉग-इन के लिए बाध्य करने के लिए एक घटना प्रसारित करता है।

angular.module('loginApp')
.factory('AuthInterceptor', [ '$rootScope', '$q', 'Session', 'AUTH_EVENTS',
function($rootScope, $q, Session, AUTH_EVENTS) {
    return {
        responseError : function(response) {
            $rootScope.$broadcast({
                401 : AUTH_EVENTS.notAuthenticated,
                403 : AUTH_EVENTS.notAuthorized,
                419 : AUTH_EVENTS.sessionTimeout,
                440 : AUTH_EVENTS.sessionTimeout
            }[response.status], response);
            return $q.reject(response);
        }
    };
} ]);

PS आलेख प्रपत्र में बताए गए प्रपत्र डेटा ऑटोफिल के साथ एक बग को निर्देश में शामिल किए गए निर्देश को जोड़कर आसानी से टाला जा सकता है। js।

PS2 इस कोड को आसानी से उपयोगकर्ता द्वारा देखा जा सकता है, विभिन्न मार्गों को देखने की अनुमति देने के लिए, या ऐसी सामग्री प्रदर्शित करने के लिए जो प्रदर्शित होने के लिए नहीं थी। तर्क को सर्वर-साइड लागू किया जाना चाहिए, यह आपके एनजी ऐप पर चीजों को ठीक से दिखाने का एक तरीका है।


1
मैं क्लाइंट-साइड लॉजिक के लिए अपना सिर लपेटने के लिए आपके गाइड का अनुसरण कर रहा हूं। ये सचमुच अच्छा है!! मैंने सत्रों को मैन्युअल रूप से नष्ट करने के बारे में कुछ याद किया, लेकिन हमें चीजों को प्रयोग करना और तोड़ना है!
सेबास्टियलोनो

~~ यकीन नहीं है कि अगर मैं उस लाइन को सही ढंग से समझता हूं: authService.login() = [...]उन चौकोर कोष्ठक कुछ के लिए खड़े होंगे; $http.get(url, {uID, pwd}~ ~ ठीक है, प्लंकर में देखा, यह था जैसा मैंने कहा XD
netalex

1
क्या आप सर्वर साइड के लिए अपने उत्तर का विस्तार कर सकते हैं?
क्वेरी

25

मुझे दृष्टिकोण पसंद है और फ्रंट-एंड पर कोई प्रमाणीकरण संबंधित चीज़ किए बिना इसे सर्वर-साइड पर लागू किया गया है

मेरे नवीनतम ऐप पर मेरी 'तकनीक' है .. क्लाइंट को Auth की परवाह नहीं है। ऐप में हर एक चीज़ के लिए पहले एक लॉगिन की आवश्यकता होती है, इसलिए सर्वर हमेशा एक लॉगिन पेज पर कार्य करता है जब तक कि सत्र में किसी मौजूदा उपयोगकर्ता का पता नहीं चल जाता है। यदि session.user पाया जाता है, तो सर्वर केवल index.html भेजता है। बम: -ओ

"एंड्रयू जोसलिन" की टिप्पणी के लिए देखें।

https://groups.google.com/forum/?fromgroups=#!searchin/angular/authentication/angular/POXLTi_JUgg/VwStpoWCPUQJ


3
अगर यह एक वेब एपीआई है? मुझे आपका जवाब नहीं मिला मुझे लगता है कि :(
Leandro De Mello Fagundes

1
यदि आप उपयोगकर्ता नाम प्रदर्शित करना चाहते हैं तो क्या होगा? या यदि आप एंडपॉइंट यूआरएल में उपयोगकर्ता नाम के साथ एक सेवा के लिए बात कर रहे हैं?
पेरीजियो

2
क्षमा करें, लेकिन मुझे उत्तर समझ में नहीं आया। आप कोणीय में सत्र को कैसे संभालते हैं? सत्र कहां है। सेट सेट करें क्या आप कृपया इसका एक कोड उदाहरण बना सकते हैं? धन्यवाद
फ्रांस्वा रोमैन

4
सत्र क्लाइंट अंत में संभाला जाता है और सर्वर साइड नहीं, क्लाइंट टोकन को बचाता है और इसे प्रत्येक अनुरोध के हिस्से के रूप में भेजता है। सर्वर टोकन को सत्यापित करता है और अनुरोध को संसाधित करता है
दिनमान

4
जो कोई इसे समझता है, वह इस उत्तर को हममें से बाकी लोगों के लिए संपादित कर सकता है?
अलोजज जनेज

14

मैंने यहां एक समान प्रश्न का उत्तर दिया: AngularJS Authentication + RESTful API


मैंने UserApp के लिए एक AngularJS मॉड्यूल लिखा है जो संरक्षित / सार्वजनिक मार्गों का समर्थन करता है, लॉगिन / लॉगआउट पर री-आउट , स्टेटस चेक के लिए दिल की धड़कन, एक कुकी, सत्र आदि में सत्र टोकन को संग्रहीत करता है।

आप या तो कर सकते हैं:

  1. मॉड्यूल को संशोधित करें और इसे अपने स्वयं के एपीआई, या से संलग्न करें
  2. UserApp (क्लाउड-आधारित उपयोगकर्ता प्रबंधन API) के साथ मॉड्यूल का उपयोग करें

https://github.com/userapp-io/userapp-angular

यदि आप UserApp का उपयोग करते हैं, तो आपको उपयोगकर्ता सामग्री के लिए कोई भी सर्वर-साइड कोड नहीं लिखना होगा (एक टोकन को सत्यापित करने से अधिक)। इसे आज़माने के लिए Codecademy पर कोर्स करें।

यहां कुछ उदाहरण दिए गए हैं कि यह कैसे काम करता है:

  • कैसे निर्दिष्ट करें कि कौन से मार्ग सार्वजनिक होने चाहिए, और कौन सा मार्ग लॉगिन फ़ॉर्म है:

    $routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
    $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
    $routeProvider.when('/home', {templateUrl: 'partials/home.html'});

    वह .otherwise()मार्ग निर्धारित किया जाना चाहिए जहाँ आप अपने उपयोगकर्ताओं को लॉगिन के बाद पुनर्निर्देशित करना चाहते हैं। उदाहरण:

    $routeProvider.otherwise({redirectTo: '/home'});

  • त्रुटि से निपटने के लिए लॉगिन फ़ॉर्म:

    <form ua-login ua-error="error-msg">
        <input name="login" placeholder="Username"><br>
        <input name="password" placeholder="Password" type="password"><br>
        <button type="submit">Log in</button>
        <p id="error-msg"></p>
    </form>
  • त्रुटि से निपटने के लिए साइनअप फॉर्म:

    <form ua-signup ua-error="error-msg">
      <input name="first_name" placeholder="Your name"><br>
      <input name="login" ua-is-email placeholder="Email"><br>
      <input name="password" placeholder="Password" type="password"><br>
      <button type="submit">Create account</button>
      <p id="error-msg"></p>
    </form>
  • लॉग आउट लिंक:

    <a href="#" ua-logout>Log Out</a>

    (सत्र समाप्त करता है और लॉगिन मार्ग पर पुनर्निर्देश करता है)

  • उपयोगकर्ता के गुणों तक पहुँचें:

    उपयोगकर्ता गुण userसेवा का उपयोग करके एक्सेस किए जाते हैं , जैसे:user.current.email

    या टेम्पलेट में: <span>{{ user.email }}</span>

  • उन तत्वों को छिपाएं जो केवल लॉगिन होने पर दिखाई देनी चाहिए:

    <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

  • अनुमति के आधार पर एक तत्व दिखाएं:

    <div ua-has-permission="admin">You are an admin</div>

और अपनी बैक-एंड सेवाओं को प्रमाणित करने के लिए, बस user.token()सत्र टोकन प्राप्त करने और AJAX अनुरोध के साथ भेजने के लिए उपयोग करें। बैक-एंड पर, UserApp API का उपयोग करें (यदि आप UserApp का उपयोग करते हैं) यह जांचने के लिए कि टोकन मान्य है या नहीं।

अगर आपको कोई मदद चाहिए, तो मुझे बताएं!


मैं कैसे होगा "मॉड्यूल संशोधित करें और इसे अपने एपीआई से संलग्न" ?
प्योरफ्रेट

2

Angularjs में आप UI भाग, सेवा, निर्देश और सभी भाग angularjs बना सकते हैं जो UI का प्रतिनिधित्व करते हैं। यह काम करने के लिए अच्छी तकनीक है।

किसी भी एक के रूप में जो इस तकनीक में नए हैं और "उपयोगकर्ता" को प्रमाणित करना चाहते हैं, तो मैं इसे सी # वेब एपी की शक्ति के साथ करने का सुझाव देता हूं। इसके लिए आप OAuth विनिर्देश का उपयोग कर सकते हैं जो आपको उपयोगकर्ता को प्रमाणित करने के लिए एक मजबूत सुरक्षा तंत्र बनाने में मदद करेगा। एक बार जब आप OAuth के साथ WebApi का निर्माण करते हैं, तो आपको टोकन के लिए उस एप को कॉल करने की आवश्यकता होती है:

var _login = function (loginData) {
 
        var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;
 
        var deferred = $q.defer();
 
        $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {
 
            localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName });
 
            _authentication.isAuth = true;
            _authentication.userName = loginData.userName;
 
            deferred.resolve(response);
 
        }).error(function (err, status) {
            _logOut();
            deferred.reject(err);
        });
 
        return deferred.promise;
 
    };
 

और एक बार जब आप टोकन प्राप्त कर लेते हैं तो आप टोकन की मदद से कोणीयरज से संसाधनों का अनुरोध करते हैं और उस संसाधन तक पहुंच प्राप्त करते हैं जो OAuth विनिर्देशन के साथ वेब एप में सुरक्षित रहता है।

कृपया अधिक मदद के लिए नीचे दिए गए लेख में देखें: -

http://bitoftech.net/2014/06/09/angularjs-token-authentication-using-asp-net-web-api-2-owin-asp-net-identity/


1

मुझे लगता है कि प्रत्येक JSON की प्रतिक्रिया में एक संपत्ति होनी चाहिए (जैसे {प्रमाणीकृत: गलत}) और ग्राहक को हर बार इसका परीक्षण करना होगा: यदि गलत है, तो कोणीय नियंत्रक / सेवा लॉगिन पृष्ठ पर "रीडायरेक्ट" करेगी।

और क्या होगा यदि उपयोगकर्ता डे JSON पकड़ता है और बूल को True में बदल देता है?

मुझे लगता है कि इस तरह के सामान को करने के लिए आपको कभी भी ग्राहक की तरफ से भरोसा नहीं करना चाहिए। यदि उपयोगकर्ता प्रमाणित नहीं है, तो सर्वर को बस एक लॉगिन / त्रुटि पृष्ठ पर पुनर्निर्देशित करना चाहिए।


2
इसे देखें: github.com/witoldsz/angular-http-auth - सर्वर रिस्पांस स्टेटस कोड के लिए इंटरसेप्टर चेक करता है और यदि यह 403 ('लॉगिन आवश्यक') है, तो यह ईवेंट को प्रसारित करता है, इसलिए आप इसे ऐप के अंदर पकड़ सकते हैं और लॉगिन बॉक्स प्रदर्शित कर सकते हैं।
एहरोक

10
उत्तर का उपयोग करके एक दूसरे को जवाब देना बंद करें। टिप्पणी के लिए यही है!
सोवियुत

@ हेरोक सुझाव, आपकी टिप्पणी को एक उत्तर के रूप में प्रचारित किया जाना चाहिए, यह समय में शीर्ष पर मतदान किया जाएगा। बाकी सिर्फ शोर है।
user237419

0

var _login = function (loginData) {
 
        var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password;
 
        var deferred = $q.defer();
 
        $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) {
 
            localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName });
 
            _authentication.isAuth = true;
            _authentication.userName = loginData.userName;
 
            deferred.resolve(response);
 
        }).error(function (err, status) {
            _logOut();
            deferred.reject(err);
        });
 
        return deferred.promise;
 
    };
 

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.