javascript - angularjs を使用してユーザー認証を管理する

Question

このようなアプローチがあるかどうか疑問に思っています

（これは非常に些細な例です）

管理の出発点になる可能性があります

angularjs + ユーザー認証

<!DOCTYPE html>
<html>
    <head>
        <title>My auth test</title>
    </head>
    <body>
    <div data-ng-app="myApp">
         <div data-ng-view></div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.factory('Devs', function() {
            var data = [{name:'Joe',auth:false},{name:'Whisher',auth:true}];
            return data;
        });
        app.factory('Projects', function() {
            var data = [{name:'Php'},{name:'Javascript'}];
            return data;
        });
        app.config(function($routeProvider) {
            $routeProvider.
                when('/', {
                    controller: 'OneCtrl',
                    resolve: {
                        projects: function(Projects) {
                            return Projects;
                        }
                    },
                    templateUrl:'./view.html'
                }).
                when('/one', {
                    controller: 'OneCtrl',
                    resolve: {
                        projects: function(Projects) {
                            return Projects;
                        }
                    },
                    templateUrl:'./view.html'
                }).
                when('/two', {
                    controller: 'TwoCtrl',
                    resolve: {
                        projects: function(Projects) {
                            return Projects;
                        }
                    },
                    templateUrl:'./view.html'
                })
                .otherwise({redirectTo:'/'});

        });
        app.controller('OneCtrl',function($scope,Devs, projects) {
            $scope.project = projects[0];
            $scope.dev = Devs[0];
        });
        app.controller('TwoCtrl',function($scope,Devs, projects) {
            $scope.project = projects[1];
            $scope.dev = Devs[1];
        });
        app.directive('checkAuth',function($location){
            return {
                link:function(scope){
                    scope.$on('$routeChangeSuccess', function(next, current) { 
                        if(!scope.dev.auth){    
                            $location.path('/');
                        }
                    });
                }
            }
        });
    </script>
    </body>
    </html>

ビューで

<div check-auth>
<p>{{project.name}}</p>
 <div><a ng-href="./#/one">one</a></div>
 <div><a ng-href="./#/two">two</a></div>
 <div>

認証が必要なビュー内でのみディレクティブを使用できます。

についてどう思いますか？私もいくつかのリンクに満足しています:)

score 1 · Accepted Answer

私は現在Angular JSを学んでいます。私はある日これを調理しました：

app.factory("user", function($http, $q) {

  var user = {};

  // query logged in status on initial page load
  $http.get("/loggedin").success(function() {
    user.isLogged = true;
  }).error(function() {
    user.isLogged = false;
  });

  user.login = function(username, password) {
    var defer = $q.defer();
    if(user.isLogged) {
        defer.resolve("Already logged in");
        return defer.promise;
    }
    $http.post("/login", {username: username, password: password})
      .success(function() {
        user.isLogged = true;
        defer.resolve("User login success");
      })
      .error(function() {
        defer.reject("User login failed");
      })
    return defer.promise;
  }

  user.logout = function() {
    var defer = $q.defer();
    $http.post("/logout", {})
      .success(function() {
        // sucessfully logged out
        user.isLogged = false;
        defer.resolve();
      }).error(function() {
        // unable to logout for some reason
        defer.reject();
      });
    return defer.promise;
  }

  return user;
});

Node JS のサーバー側は次のとおりです。

module.exports = function(app) {

    // GET users
    app.get('/users', function(req, res, next) {
        async.parallel([
            function(next) {
                User.count(next);
            },
            function(next) {
                // get all users (within specified query parameters)
                var query = User.find({});
                restUtil.setSort(query, req);
                restUtil.setLimits(query, req);
                query.exec(next);
            }
        ], function(err, results) { // final callback
            if(err) {
                return next(err);
            }

            var count = results[0];
            var users = results[1];

            // add total number as header (for pagination, etc)
            res.set('total', count); 

            res.json(users);
        });
    });

    // POST a new user
    app.post('/users', hashPassword, function(req, res, next) {

        User.create(req.body, function(err, user) {
            if(err) {
                if(err.code===11000) {
                    res.send("Conflict", 409);
                } else {
                    next(err);
                }
            }
            res.json(user);
        });
    });

  // POST a login request
  app.post("/login", loadUserByUsername, function(req, res, next) {

    bcrypt.compare(req.body.password, req.user.passwordHash, function(err, ok) {
      if(ok) {
        req.session.user = req.user; // logged in
        res.send("Login ok", 200);
      } else {
        // incorrect password
        res.send("Incorrect password", 400);
      }
    })
  })

  // POST a logout request
  app.post("/logout", function(req, res, next) {
    req.session.destroy();
    res.send(200);
  })

  // GET logout status
  app.get("/loggedIn", function(req, res, next) {
    if(req.session.user) {
      res.send("Logged in", 200);
    } else {
      res.send("Not Logged in", 400)
    }
  })


  app.delete("/users/:_id", loadUserById, function(req, res, next) {
    User.remove({ _id: req.params._id }, function(err) {
      if(err) {
        res.send("An error occurred", 404);
      } else {
        res.send("Delete Success", 200);
      }
    });
  });
};

まだそれ以上のことはしていませんが、クライアント側のコードは今のところ気に入っています。ユーザーの役割などについてはあまり考えていませんが、これで始められるはずです。解決する約束をさらに追加することは難しくありません。resolve: user.login多くのニーズをカバーします。

このブログ投稿もご覧ください。

score 1 · Accepted Answer

保護された/パブリックルート、ログイン/ログアウト時の再ルーティング、ステータスチェック用のハートビート、セッショントークンの Cookie への保存、サインアップ/ログイン/ログアウトのディレクティブなどをサポートするユーザー認証用のAngularJS モジュールを作成しました。

UserApp (クラウドベースのユーザー管理 API)用に構築されていますが、独自の API に簡単にアタッチできます。UserApp を使用する場合、ユーザー用のサーバー側コードを記述する必要はありません。Codecademyのコースを受講して試してみてください。

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

これがどのように機能するかの例を次に示します。

どのルートをパブリックにするか、どのルートをログインフォームにするかを指定する方法:
```
$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 を使用している場合) を使用して、トークンが有効かどうかを確認します。

これがあなたの質問に答えることを願っています。助けが必要な場合はお知らせください:)

javascript - angularjs を使用してユーザー認証を管理する

2 に答える 2

Related

Reference