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


Answers

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

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

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

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

Question

أنا جديدة على 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/




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




Related