İstemci taraflı İletişim w/ açısal Dinlendirici(re)Auth/Yönlendirme için API

Bu birkaç farklı dersler içinde birkaç farklı soru ve yok edildi; ama karşılaştığım tüm oldukça kafasına çivi vurmak yok.

Ceviz kabuğu, için ihtiyacım var

• http://api.foo/login http://client.foo POST üzerinden giriş yapın
• ""logout bir yol sağlar kullanıcı/GUI parça devlet . oturum var
• "Kullanıcı / günlükleri. günlükleri" UI güncelleme imkanı Bu en sinir bozucu olmuştur
• Benim rotalar-devlet kimliği için (gerekirse) kontrol ve giriş sayfasına kullanıcı buna göre yönlendirmek için güvenli

Benim konulardır

• Her zaman farklı bir sayfaya gidin, api.foo/status çağrı veya kullanıcı oturum olup olmadığını belirlemek için yapmak istiyorum. (Yollar için Express kullanıyorum ATM) Bu Açısal olarak bir hıçkırık nedenleri belirler ng-show="user.is_authenticated" gibi şeyler
• Ben başarıyla giriş/çıkış ihtiyacım var sayfayı yenile (istemiyorum bunu yapmak zorunda) için doldurmak gibi şeyler {{user.first_name}} ya da söz konusu oturum, boş değer.

// Sample response from `/status` if successful 

{
   customer: {...},
   is_authenticated: true,
   authentication_timeout: 1376959033,
   ...
}

Denedim

• http://witoldsz.github.io/angular-http-auth/¹
• http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/²
• https://github.com/mgonto/restangular (beni hayat İçin ben yapamadım 13 ** post data 15 ** nasıl anlamaya. Doktorlar bu konuda bir sonuç çıkmadı.

Neden ben aklımı kaybediyorum gibi hissediyorum

• Olsa her öğretici dayanır bazı veritabanı (çok Mongo, Kanepe, PHP MySQL ebediyen) çözüm, ve hiçbiri güvenin tamamen iletişim ile ilgili bir Dinlendirici API için ısrar giriş Birleşik Devletleri. Giriş yaptıktan sonra,/Alır ek Mesaj withCredentials:true, sorun o değil yani ile gönderilir
• Yapamam Açısal DİNLENME Auth yapmak/repo dersler/örnekler bulmak, sans arka uç bir dil.

Çok da gururlu değilim

Kuşkusuz, ben yeni Köşeli, ve olmaz da şaşırdım ben yaklaşan bu çok saçma bir şekilde; olacağımı heyecan eğer birini önermek bir alternatif olsa da çorba-fındık.

Kullanıyorum Express çoğunlukla çünkü ben gerçekten seviyorum Jade Stylus— evli değilim Express' Yönlendirme ve verecek kadar ne varsa yapmak istiyorum sadece mümkün olan Açısal yönlendirme.

Herkes sağlayabilir herhangi bir yardım için şimdiden teşekkür ederiz. Ve lütfen mor bağlantılar hakkında 26 sayfa var çünkü ben Google için yalvarmayın. ;-)

¹Bu çözüm Açısal dayanır $alay httpBackend ve gerçek bir sunucuya konuşturmak için nasıl belli değil.

²Bu ameliyat oldum ama varolan bir API beri kimlik doğrulaması gerekiyor, pasaport'', ve görünüyordu . localStrategy kullanımı edemedim ^strong>deliOAUTH bir hizmet yazmak...sadece kullanmak niyetinde olduğunu.

Bu url güzergah izin ve eleman güvenlik blog yazısı here alınır ama ben kısaca özetler ana noktaları :-)

Önyüz web uygulama güvenlik sadece bazı web bilgi ile herhangi bir kullanıcıyı güvenlik sunucu tarafında olmalıdır bu yüzden değiştirebilir ancak Joe Public, durdurmak için başlayan bir ölçüsüdür.

Açısal güvenlik şeyler etrafında ana endişe rota güvenlik ve köşeli bir nesne, diğer özellikleri bir nesne oluşturmak için bir yol tanımlarken neyse ki. Benim yaklaşım için temel taşı temelde kullanıcı belirli bir rota erişmek mümkün olması gerekir rolleri tanımlayan bu rota nesne için güvenlik bir nesne eklemek için.

 // route which requires the user to be logged in and have the 'Admin' or 'UserManager' permission
    $routeProvider.when('/admin/users', {
        controller: 'userListCtrl',
        templateUrl: 'js/modules/admin/html/users.tmpl.html',
        access: {
            requiresLogin: true,
            requiredPermissions: ['Admin', 'UserManager'],
            permissionType: 'AtLeastOne'
        });

Bütün bu yaklaşım temelde eğer kullanıcı gerekli izinlere sahip olup olmadığını görmek için kontrol etmez, hangi yetki bir hizmet etrafında odaklanır. Bu hizmet oturum açma sırasında bu çözüm, diğer kısımlarını uzak kaygıları kullanıcı ve sunucudan alınan olurdu gerçek onların izni soyut. Kod oldukça ayrıntılı olsa da tam olarak benim blog yazısı açıklanmıştır. Ancak, temelde izin onay ve izin iki modu kolu. İlk kullanıcı en az tanımlanmış izinleri olması gerekir, ikincisi kullanıcı tanımlı izinler olmalı.

angular.module(jcs.modules.auth.name).factory(jcs.modules.auth.services.authorization, [  
'authentication',  
function (authentication) {  
 var authorize = function (loginRequired, requiredPermissions, permissionCheckType) {
    var result = jcs.modules.auth.enums.authorised.authorised,
        user = authentication.getCurrentLoginUser(),
        loweredPermissions = [],
        hasPermission = true,
        permission, i;

    permissionCheckType = permissionCheckType || jcs.modules.auth.enums.permissionCheckType.atLeastOne;
    if (loginRequired === true && user === undefined) {
        result = jcs.modules.auth.enums.authorised.loginRequired;
    } else if ((loginRequired === true && user !== undefined) &&
        (requiredPermissions === undefined || requiredPermissions.length === 0)) {
        // Login is required but no specific permissions are specified.
        result = jcs.modules.auth.enums.authorised.authorised;
    } else if (requiredPermissions) {
        loweredPermissions = [];
        angular.forEach(user.permissions, function (permission) {
            loweredPermissions.push(permission.toLowerCase());
        });

        for (i = 0; i < requiredPermissions.length; i  = 1) {
            permission = requiredPermissions[i].toLowerCase();

            if (permissionCheckType === jcs.modules.auth.enums.permissionCheckType.combinationRequired) {
                hasPermission = hasPermission && loweredPermissions.indexOf(permission) > -1;
                // if all the permissions are required and hasPermission is false there is no point carrying on
                if (hasPermission === false) {
                    break;
                }
            } else if (permissionCheckType === jcs.modules.auth.enums.permissionCheckType.atLeastOne) {
                hasPermission = loweredPermissions.indexOf(permission) > -1;
                // if we only need one of the permissions and we have it there is no point carrying on
                if (hasPermission) {
                    break;
                }
            }
        }

        result = hasPermission ?
                 jcs.modules.auth.enums.authorised.authorised :
                 jcs.modules.auth.enums.authorised.notAuthorised;
    }

    return result;
};

Rota güvenlik var şimdi Eğer bir kullanıcı bir rota değişikliği başladı rota erişebilir belirlemek için bir yol gerekir. Bunu yapmak için rota değiştirme isteği, rota nesne (yeni erişim bizim nesne ile) incelenmesi, müdahale edilmesi ve eğer kullanıcı erişim görüntüleyemez eğer biz başka bir rota değiştirin.

angular.module(jcs.modules.auth.name).run([  
    '$rootScope',
    '$location',
    jcs.modules.auth.services.authorization,
    function ($rootScope, $location, authorization) {
        $rootScope.$on('$routeChangeStart', function (event, next) {
            var authorised;
            if (next.access !== undefined) {
                authorised = authorization.authorize(next.access.loginRequired,
                                                     next.access.permissions,
                                                     next.access.permissionCheckType);
                if (authorised === jcs.modules.auth.enums.authorised.loginRequired) {
                    $location.path(jcs.modules.auth.routes.login);
                } else if (authorised === jcs.modules.auth.enums.authorised.notAuthorised) {
                    $location.path(jcs.modules.auth.routes.notAuthorised).replace();
                }
            }
        });
    }]);

Burada önemli olan, gerçekten.() değiştirin geçerli rotayı değiştirmek gibi' (görmeye hakları var değil) yolu ile yönlendirmek. Bu durdurmak için, herhangi bir zaman geri yetkisiz yol için gezinme.

Şimdi Eğer bir kullanıcı için oturum açmış olması gereken bir rota üzerinde inip inmediğini redirecting after a login da dahil olmak üzere pek çok serin bir şeyler yapabiliriz yolları müdahale edebiliriz.

Çözümün ikinci kısmı kullanıcı için Kullanıcı Arabirimi öğesi Göster/Gizle mümkün oraya göre hak ediliyor. Bu basit bir yönerge ile elde edilir.

angular.module(jcs.modules.auth.name).directive('access', [  
        jcs.modules.auth.services.authorization,
        function (authorization) {
            return {
              restrict: 'A',
              link: function (scope, element, attrs) {
                  var makeVisible = function () {
                          element.removeClass('hidden');
                      },
                      makeHidden = function () {
                          element.addClass('hidden');
                      },
                      determineVisibility = function (resetFirst) {
                          var result;
                          if (resetFirst) {
                              makeVisible();
                          }

                          result = authorization.authorize(true, roles, attrs.accessPermissionType);
                          if (result === jcs.modules.auth.enums.authorised.authorised) {
                              makeVisible();
                          } else {
                              makeHidden();
                          }
                      },
                      roles = attrs.access.split(',');


                  if (roles.length > 0) {
                      determineVisibility(true);
                  }
              }
            };
        }]);

Sonra emin bir eleman çok istiyorum:

 <button type="button" access="CanEditUser, Admin" access-permission-type="AtLeastOne">Save User</button>

** 31 yaklaşımı için çok daha detaylı bir bakış için okuyun.