AngularJS認証+ RESTful API
Auth /（re）Routing用のAPIを使用したAngular + RESTfulクライアント側通信
これについては、いくつかの異なる質問といくつかのチュートリアルで説明しましたが、これまでに出会ったすべてのリソースが頭に浮かぶわけではありません。
ナットシェルでは、する必要があります
- POSTから
http://client.fooからhttp://api.foo/loginにログインします logoutルートを提供するユーザーの「ログイン」GUI /コンポーネント状態を持っている- ユーザーがログアウトまたはログアウトするときにUIを「更新」できるようにします。 これが最もイライラしてきました
- ルートを保護して認証済み状態を確認し（必要な場合）、それに応じてユーザーをログインページにリダイレクトします
私の問題は
- 別のページに移動するたびに、
api.foo/statusを呼び出して、ユーザーがログインしているかどうかを判断する必要があります（ルートにExpressを使用している）これにより、Angularはng-show="user.is_authenticated"のようなものを決定します - 正常にログイン/ログアウトしたら、
{{user.first_name}}などの情報を入力するためにページを更新する必要があります（これを行う必要はありません）。ログアウトする場合は、その値を空にします。
// Sample response from `/status` if successful
{
customer: {...},
is_authenticated: true,
authentication_timeout: 1376959033,
...
}
私が試したこと
- http://witoldsz.github.io/angular-http-auth/1
- http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/2
- https://github.com/mgonto/restangular （私の人生では、
post dataではなくquery paramsでPOSTを使用する方法を理解できませんでした。ドキュメントは問題について何も示さなかった。
なぜ心を失いそうなのか
- すべてのチュートリアルが何らかのデータベース（多くのMongo、Couch、PHP + MySQL、ad infinitum）ソリューションに依存しているようで、ログイン状態を保持するためにRESTful APIとの通信のみに依存しているものはありません。ログインすると、追加のPOST/GETが
withCredentials:trueとともに送信されるため、問題ではありません - 私は、Angular + REST + Authを実行するバックエンド言語ではない例/チュートリアル/リポジトリを見つけることができません。
私はあまり誇りに思っていません
確かに、私はAngularに慣れていないので、これにとんでもない方法でアプローチしていても驚かないでしょう。誰かが代替案を提案してくれたら、それがナッツからスープであってもわくわくします。
ExpressとJadeが大好きなので、Stylusを使用しています。— Express 'ルーティングと結婚していないので、必要に応じて放棄しますdoは、Angularのルーティングでのみ可能です。
誰でも提供できる助けを事前に感謝します。また、約26ページの紫色のリンクがあるため、Googleに問い合わせないでください。 ;-)
1このソリューションは、Angularの$ httpBackendモックに依存しており、実際のサーバーと通信する方法は不明です。
2これは最も近いものでしたが、認証が必要な既存のAPIがあるため、パスポートの「localStrategy」を使用できず、insaneに見えましたOAUTHサービスを記述します...私だけが使用するつもりでした。
これはURLルート認証と要素セキュリティに関する私のブログ投稿から取られています here しかし、私は簡単に要点を要約します:-)
フロントエンドWebアプリケーションのセキュリティは、Joe Publicを停止するための開始手段にすぎませんが、ある程度のWeb知識を持つユーザーはそれを回避できるため、常にセキュリティサーバー側も必要になります。
angularのセキュリティ関連の主な関心事はルートセキュリティです。幸いなことにangularでルートを定義するとき、オブジェクト、他のプロパティを持つことができるオブジェクトを作成します。私のアプローチの基本は、このルートオブジェクトにセキュリティオブジェクトを追加することです。これは、特定のルートにアクセスできるようにするためにユーザーが持つ必要があるロールを基本的に定義します。
// 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'
});
全体のアプローチは、基本的にユーザーが必要な権限を持っているかどうかを確認するチェックを行う承認サービスに焦点を当てています。このサービスは、ログイン中にサーバーから取得されたユーザーおよびユーザーの実際の許可に関係するこのソリューションの他の部分からの懸念を抽象化します。コードは非常に冗長ですが、私のブログ投稿で完全に説明されています。ただし、基本的に許可チェックと2つの許可モードを処理します。 1つ目は、ユーザーが少なくとも1つ以上の定義済みのアクセス許可を持っている必要があることです。2つ目は、ユーザーがすべての定義済みのアクセス許可を持っている必要があります。
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;
};
ルートにセキュリティがあるため、ルート変更が開始されたときにユーザーがルートにアクセスできるかどうかを判断する方法が必要です。これを行うには、ルート変更リクエストをインターセプトし、ルートオブジェクト（新しいアクセスオブジェクトを含む）を調べ、ユーザーがビューにアクセスできない場合、ルートを別のルートに置き換えます。
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();
}
}
});
}]);
ここで重要なのは「.replace（）」です。これにより、現在のルート（表示する権利がないルート）がリダイレクト先のルートに置き換えられます。これにより、不正ルートへのナビゲートが停止します。
これで、ユーザーがログインする必要のあるルートに着陸した場合、 ログイン後のリダイレクト を含む、いくつかのクールなことができるルートをインターセプトできます。
ソリューションの2番目の部分は、権限に応じてユーザーに対してUI要素を非表示/表示できることです。これは、単純なディレクティブによって実現されます。
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);
}
}
};
}]);
次に、次のような要素を確認します。
<button type="button" access="CanEditUser, Admin" access-permission-type="AtLeastOne">Save User</button>
アプローチのより詳細な概要については、私の 完全なブログ投稿 をお読みください。
AngularJS module for serApp を作成しました。次のいずれかが可能です。
- モジュールを変更し、独自のAPIに関数を添付します。または
- モジュールをユーザー管理APIと一緒に使用します serApp
https://github.com/userapp-io/userapp-angular
保護/パブリックルート、ログイン/ログアウトの再ルーティング、ステータスチェックのハートビート、セッショントークンのCookie、イベントなどへの保存をサポートしています。
UserAppを試してみたい場合は、 Codecademyのコース を選択してください。
次に、その仕組みの例をいくつか示します。
エラー処理を伴うログインフォーム：
<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>パブリックにする必要があるルートと、ログインフォームであるルートを指定する方法：
$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true}); $routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});.otherwise()ルートは、ログイン後にユーザーをリダイレクトする場所に設定する必要があります。例：$routeProvider.otherwise({redirectTo: '/home'});ログアウトリンク：
<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リクエストで送信します。バックエンドで、 serApp API （UserAppを使用する場合）を使用して、トークンが有効かどうかを確認します。
助けが必要な場合は、私に知らせてください:)
アプリケーションのサービスコールを手作業で作成しているだけなので、$ resourceを使用していません。つまり、何らかの初期化データを取得する他のすべてのサービスに依存するサービスを持つことで、ログインを処理しました。ログインが成功すると、すべてのサービスの初期化がトリガーされます。
コントローラースコープ内でloginServiceInformationを監視し、それに応じてモデルの一部のプロパティを設定します（適切なng-show/hideをトリガーするため）。ルーティングに関しては、Angularの組み込みルーティングを使用していますが、ここに示されているloggedInブール値に基づいたng-hideがあり、ログインを要求するテキストまたはng-view属性を持つdivを表示しますログインするとすぐに正しいページに移動します。現在、すべてのビューのデータをロードしていますが、必要に応じてより選択的であると考えています）
//Services
angular.module("loginModule.services", ["gardenModule.services",
"surveyModule.services",
"userModule.services",
"cropModule.services"
]).service(
'loginService',
[ "$http",
"$q",
"gardenService",
"surveyService",
"userService",
"cropService",
function ( $http,
$q,
gardenService,
surveyService,
userService,
cropService) {
var service = {
loginInformation: {loggedIn:false, username: undefined, loginAttemptFailed:false, loggedInUser: {}, loadingData:false},
getLoggedInUser:function(username, password)
{
service.loginInformation.loadingData = true;
var deferred = $q.defer();
$http.get("php/login/getLoggedInUser.php").success(function(data){
service.loginInformation.loggedIn = true;
service.loginInformation.loginAttemptFailed = false;
service.loginInformation.loggedInUser = data;
gardenService.initialize();
surveyService.initialize();
userService.initialize();
cropService.initialize();
service.loginInformation.loadingData = false;
deferred.resolve(data);
}).error(function(error) {
service.loginInformation.loggedIn = false;
deferred.reject(error);
});
return deferred.promise;
},
login:function(username, password)
{
var deferred = $q.defer();
$http.post("php/login/login.php", {username:username, password:password}).success(function(data){
service.loginInformation.loggedInUser = data;
service.loginInformation.loggedIn = true;
service.loginInformation.loginAttemptFailed = false;
gardenService.initialize();
surveyService.initialize();
userService.initialize();
cropService.initialize();
deferred.resolve(data);
}).error(function(error) {
service.loginInformation.loggedInUser = {};
service.loginInformation.loggedIn = false;
service.loginInformation.loginAttemptFailed = true;
deferred.reject(error);
});
return deferred.promise;
},
logout:function()
{
var deferred = $q.defer();
$http.post("php/login/logout.php").then(function(data){
service.loginInformation.loggedInUser = {};
service.loginInformation.loggedIn = false;
deferred.resolve(data);
}, function(error) {
service.loginInformation.loggedInUser = {};
service.loginInformation.loggedIn = false;
deferred.reject(error);
});
return deferred.promise;
}
};
service.getLoggedInUser();
return service;
}]);
//Controllers
angular.module("loginModule.controllers", ['loginModule.services']).controller("LoginCtrl", ["$scope", "$location", "loginService", function($scope, $location, loginService){
$scope.loginModel = {
loadingData:true,
inputUsername: undefined,
inputPassword: undefined,
curLoginUrl:"partials/login/default.html",
loginFailed:false,
loginServiceInformation:{}
};
$scope.login = function(username, password) {
loginService.login(username,password).then(function(data){
$scope.loginModel.curLoginUrl = "partials/login/logoutButton.html";
});
}
$scope.logout = function(username, password) {
loginService.logout().then(function(data){
$scope.loginModel.curLoginUrl = "partials/login/default.html";
$scope.loginModel.inputPassword = undefined;
$scope.loginModel.inputUsername = undefined;
$location.path("home");
});
}
$scope.switchUser = function(username, password) {
loginService.logout().then(function(data){
$scope.loginModel.curLoginUrl = "partials/login/loginForm.html";
$scope.loginModel.inputPassword = undefined;
$scope.loginModel.inputUsername = undefined;
});
}
$scope.showLoginForm = function() {
$scope.loginModel.curLoginUrl = "partials/login/loginForm.html";
}
$scope.hideLoginForm = function() {
$scope.loginModel.curLoginUrl = "partials/login/default.html";
}
$scope.$watch(function(){return loginService.loginInformation}, function(newVal) {
$scope.loginModel.loginServiceInformation = newVal;
if(newVal.loggedIn)
{
$scope.loginModel.curLoginUrl = "partials/login/logoutButton.html";
}
}, true);
}]);
angular.module("loginModule", ["loginModule.services", "loginModule.controllers"]);
HTML
<div style="height:40px;z-index:200;position:relative">
<div class="well">
<form
ng-submit="login(loginModel.inputUsername, loginModel.inputPassword)">
<input
type="text"
ng-model="loginModel.inputUsername"
placeholder="Username"/><br/>
<input
type="password"
ng-model="loginModel.inputPassword"
placeholder="Password"/><br/>
<button
class="btn btn-primary">Submit</button>
<button
class="btn"
ng-click="hideLoginForm()">Cancel</button>
</form>
<div
ng-show="loginModel.loginServiceInformation.loginAttemptFailed">
Login attempt failed
</div>
</div>
</div>
上記の部分を使用して画像を完成させるベースHTML：
<body ng-controller="NavigationCtrl" ng-init="initialize()">
<div id="outerContainer" ng-controller="LoginCtrl">
<div style="height:20px"></div>
<ng-include src="'partials/header.html'"></ng-include>
<div id="contentRegion">
<div ng-hide="loginModel.loginServiceInformation.loggedIn">Please login to continue.
<br/><br/>
This new version of this site is currently under construction.
<br/><br/>
If you need the legacy site and database <a href="legacy/">click here.</a></div>
<div ng-view ng-show="loginModel.loginServiceInformation.loggedIn"></div>
</div>
<div class="clear"></div>
<ng-include src="'partials/footer.html'"></ng-include>
</div>
</body>
LoggingIn変数に基づいてページの本文領域を変更できるように、DOMの上位にあるng-controllerでログインコントローラーを定義しています。
注：ここではまだフォーム検証を実装していません。また、Angularにはまだかなり新鮮であるため、この投稿の内容へのポインタを歓迎します。 RESTfulベースの実装ではないため、これは質問に直接答えませんが、$ http呼び出しの上に構築されているので、同じことが$ resourcesに適応できると思います。
基本的にこの記事を要約したgithubリポジトリを作成しました： https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
できる限り良い説明をしようと思いますが、皆さんの助けになることを願っています。
（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）Session：ユーザーデータを保持するシングルトン。ここでの実装はあなた次第です。
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つのステップを実装する必要があります。
a）以下に示すように、UIルーターの$ stateProviderサービスで、各ルートへのアクセスを許可されたロールのデータを追加します（ngRouteでも同様に機能します）。
.config(function ($stateProvider, USER_ROLES) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard/index.html',
data: {
authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
}
});
})
b）$ 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 {d
// 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);
}
};
} ]);
P.S。1番目の記事に記載されているフォームデータの自動入力のバグは、directives.jsに含まれるディレクティブを追加することで簡単に回避できます。
P.S.2このコードは、さまざまなルートを表示したり、表示するつもりのないコンテンツを表示したりできるように、ユーザーが簡単に調整できます。ロジックはサーバー側で実装する必要があります。これは、ng-appで適切に表示するための方法にすぎません。