javascript - AngularJS: مثال أساسي لاستخدام المصادقة في تطبيق صفحة واحدة





authentication login (6)


أجبت على سؤال مماثل هنا: مصادقة AngularJS + RESTful API

لقد كتبت وحدة UserApp لـ UserApp التي تدعم المسارات المحمية / العامة ، إعادة توجيه على تسجيل الدخول / الخروج ، نبضات القلب لفحص الحالة ، يخزن رمز الجلسة في ملف تعريف الارتباط ، والأحداث ، إلخ.

يمكنك إما:

  1. تعديل الوحدة النمطية وإرفاقها API الخاصة بك أو
  2. استخدم الوحدة مع UserApp (واجهة برمجة تطبيقات إدارة المستخدم المستندة إلى مجموعة النظراء)

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() ، ما user.token() سوى استخدام user.token() للحصول على رمز الجلسة وإرساله مع طلب AJAX. في النهاية الخلفية ، استخدم واجهة برمجة التطبيقات UserApp (إذا كنت تستخدم UserApp) للتحقق مما إذا كان الرمز المميز صالحًا أم لا.

إذا كنت بحاجة إلى أي مساعدة ، فيرجى إبلاغي بذلك!

أنا جديدة على AngularJS وذهبت من خلال برنامجهم التعليمي وشعرت به.

لديّ خلفية للمشروع الخاص بي ، حيث يجب توثيق كل نقطة من نقاط نهاية REST .

ما أريد القيام به
أ) أريد الحصول على صفحة واحدة http://myproject.com .
ب) بمجرد وصول المستخدم إلى عنوان URL في المستعرض ، بناءً على ما إذا كان المستخدم قد قام بتسجيل الدخول أم لا ، يتم تقديمه مع صفحة رئيسية / عرض أو صفحة تسجيل دخول / عرض تحت نفس عنوان url http://myproject.com .
ج) إذا لم يتم تسجيل دخول المستخدم ، فإنه يملأ النموذج USER_TOKEN الخادم USER_TOKEN في الجلسة ، لذلك سيتم مصادقة جميع الطلبات الأخرى إلى النقاط النهائية استنادًا إلى USER_TOKEN

إرادتي
أ) كيف يمكنني التعامل مع المصادقة من جانب العميل باستخدام AngularJS؟ رأيت here ، لكني لم أفهم كيفية استخدامها
ب) كيف يمكنني تقديم طرق عرض مختلفة للمستخدم استنادًا إلى ما إذا كان المستخدم قد قام بتسجيل الدخول أم لا تحت عنوان url نفسه http://myproject.com

أنا أستخدم angular.js لأول مرة وحقاً في حيرة حول كيفية البدء. أي نصائح و / أو موارد هي محل تقدير كبير جدا.




في angularjs يمكنك إنشاء جزء واجهة المستخدم ، وخدمة ، والتوجيهات ، وكل جزء من angularjs التي تمثل واجهة المستخدم. إنها تقنية رائعة للعمل عليها.

مثل أي شخص جديد في هذه التكنولوجيا وترغب في المصادقة على "المستخدم" ثم أقترح أن تفعل ذلك مع قوة واجهة برمجة تطبيقات الويب # c #. لذلك ، يمكنك استخدام مواصفات OAuth التي ستساعدك على بناء آلية أمان قوية لمصادقة المستخدم. بمجرد إنشاء WebApi باستخدام OAuth ، يلزمك الاتصال بذلك api للرمز المميز:

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;
 
    };
 

وبمجرد الحصول على الرمز ، فإنك تطلب الموارد من angularjs بمساعدة Token والوصول إلى المورد الذي تم الحفاظ عليه آمنًا في Web Api بمواصفات OAuth.

يرجى إلقاء نظرة على المادة أدناه لمزيد من المساعدة: -

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




لقد قمت بإنشاء ريبو جيثب تلخيص هذه المادة في الأساس: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

ng-login جيثوب ريبو

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) خدمة المصادقة: يتم تنفيذ جميع الوظائف التالية في خدمة auth.js. يتم استخدام خدمة 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) التحكم في الوصول: لمنع الوصول على مسارات معينة يجب تنفيذ خطوتين:

أ) إضافة بيانات للأدوار المسموح لها بالوصول إلى كل مسار ، على خدمة stateProvider $ لواجهة المستخدم كما يمكن رؤيته أدناه (يمكن أن يعمل نفس الشيء بالنسبة لـ ngRoute).

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

ب) على $ rootScope. $ on ('$ 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);
        }
    };
} ]);

ملاحظة: يمكن تجنب الخطأ مع الملء التلقائي لبيانات النموذج كما هو مذكور في المقالة الأولى عن طريق إضافة التوجيه المتضمن في directives.js.

PS2 يمكن تعديل هذا الرمز بسهولة من قبل المستخدم ، للسماح بعرض طرق مختلفة ، أو عرض محتوى لم يكن من المفترض أن يتم عرضه. يجب أن يتم تطبيق المنطق من جانب الخادم ، هذه مجرد طريقة لعرض الأشياء بشكل صحيح على ng-app الخاص بك.




أعتقد أن كل استجابة JSON يجب أن تحتوي على خاصية (على سبيل المثال {Authenticated: false}) ويجب على العميل اختبارها في كل مرة: إذا كانت false ، فستقوم وحدة التحكم / الخدمة الزاوي "بإعادة التوجيه" إلى صفحة تسجيل الدخول.

وماذا يحدث إذا قام المستخدم بالقبض على JSON وتغيير البول إلى True؟

أعتقد أنك لا يجب أن تعتمد على جانب العميل للقيام بهذا النوع من الأشياء. إذا لم تتم مصادقة المستخدم ، فيجب على الخادم فقط إعادة التوجيه إلى صفحة تسجيل الدخول / الخطأ.




أنا أحب النهج ونفذته على جانب الخادم دون القيام بأي شيء ذات الصلة المصادقة على الواجهة الأمامية

بلدي "تقنية" على أحدث تطبيق بلدي هو .. العميل لا يهتم بصيانة. يتطلب كل شيء في التطبيق تسجيل الدخول أولاً ، لذلك يعمل الخادم دائمًا فقط بصفحة تسجيل دخول ما لم يتم اكتشاف مستخدم حالي في الجلسة. إذا تم العثور على session.user ، سيرسل الخادم index.html. بام: -

ابحث عن تعليق "Andrew Joslin".

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




في تطوري وجدت اثنين من المزايا المميزة لاستخدام SPA. هذا لا يعني أنه لا يمكن تحقيق ما يلي في تطبيق ويب تقليدي فقط لأنني أرى فائدة تدريجية دون تقديم عيوب إضافية.

  • احتمال تقديم طلب أقل للملقم لأن تقديم محتوى جديد ليس دائمًا أو دائمًا طلب خادم http لصفحة html جديدة. لكنني أقول إمكانات لأن المحتوى الجديد يمكن أن يتطلب بسهولة دعوة أياكس لسحب البيانات ولكن هذه البيانات قد تكون أخف وزنا من نفسها بالإضافة إلى علامة تقدم فائدة صافية.

  • القدرة على الحفاظ على "الدولة". في أبسط الشروط ، قم بتعيين متغير على الدخول إلى التطبيق وسيكون متاحًا للمكونات الأخرى من خلال تجربة المستخدم دون المرور بها أو إعدادها على نمط التخزين المحلي. ومع ذلك ، فإن إدارة هذه القدرة بذكاء أمر أساسي للحفاظ على نطاق المستوى الأعلى غير مرتب.

بخلاف تتطلب JS (وهو أمر ليس من الجنون أن تتطلب من تطبيقات الويب) عيوب أخرى مشهورة في رأيي إما لا تقتصر على SPA أو يمكن التخفيف من خلال العادات الجيدة وأنماط التنمية.





javascript angularjs authentication login