[javascript] AngularJS : 단일 페이지 애플리케이션에서 인증을 사용하는 기본 예제
저는 AngularJS를 처음 접 했고 그들의 튜토리얼을 살펴보고 그것에 대한 느낌을 받았습니다.
각 REST엔드 포인트를 인증해야하는 프로젝트에 대한 백엔드가 준비 되어 있습니다.
내가하고 싶은 일
a.) 내 프로젝트를위한 단일 페이지를 갖고 싶습니다 http://myproject.com.
b.) 사용자가 브라우저에서 URL을 클릭하면 사용자가 로그인했는지 여부에 따라 동일한 URL 아래에 홈 페이지 /보기 또는 로그인 페이지 /보기가 표시됩니다 http://myproject.com.
c.) 사용자가 로그인하지 않은 경우 양식을 작성하고 서버 USER_TOKEN에서 세션을 설정 하므로 엔드 포인트에 대한 모든 추가 요청은 다음을 기반으로 인증됩니다.USER_TOKEN
내 혼란
a.) AngularJS를 사용하여 클라이언트 측 인증을 어떻게 처리 할 수 있습니까? 나는보고 여기 와 여기에 있지만 사용하는 방법을 이해하지 못했다
B를.) 사용자 또는하지 동일한 URL에서 로그인 한 경우에 사용자에게 나는 현재 다른 뷰를 기반으로 수있는 방법http://myproject.com
나는 angular.js를 처음으로 사용하고 있으며 시작하는 방법에 대해 정말로 혼란스러워합니다. 모든 조언 및 / 또는 리소스는 대단히 감사합니다.
답변
이 기사를 기본적으로 요약 한 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 서비스 : 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) 액세스 제어 : 특정 경로에서 액세스를 거부하려면 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 {
// 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);
}
};
} ]);PS 첫 번째 기사에 언급 된 양식 데이터 자동 완성 버그는 directives.js에 포함 된 지시문을 추가하여 쉽게 피할 수 있습니다.
PS2 이 코드는 사용자가 쉽게 조정할 수있어 다른 경로를 보거나 표시 할 의도가없는 콘텐츠를 표시 할 수 있습니다. 로직은 반드시 서버 측에서 구현해야합니다. 이것은 ng-app에서 제대로 표시하는 방법 일뿐입니다.
답변
나는 접근 방식을 좋아하고 프런트 엔드에서 인증 관련 작업을 수행하지 않고 서버 측에서 구현했습니다.
내 최신 앱에서 내 ‘기술’은 .. 클라이언트가 Auth를 신경 쓰지 않는다는 것입니다. 앱의 모든 항목은 먼저 로그인이 필요하므로 세션에서 기존 사용자가 감지되지 않는 한 서버는 항상 로그인 페이지를 제공합니다. session.user가 발견되면 서버는 index.html 만 보냅니다. Bam : -o
“Andrew Joslin”의 의견을 찾으십시오.
답변
비슷한 질문에 대답했습니다 .AngularJS 인증 + RESTful API
보호 / 공개 경로, 로그인 / 로그 아웃시 재 라우팅, 상태 확인을위한 하트 비트, 쿠키, 이벤트 등에 세션 토큰을 저장하는 UserApp 용 AngularJS 모듈 을 작성했습니다 .
다음 중 하나를 수행 할 수 있습니다.
- 모듈을 수정하고 자신의 API에 연결하거나
- UserApp (클라우드 기반 사용자 관리 API) 과 함께 모듈 사용
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()하여 세션 토큰을 가져 와서 AJAX 요청과 함께 보냅니다. 백엔드에서 UserApp API ( UserApp을 사용하는 경우)를 사용하여 토큰이 유효한지 확인합니다.
도움이 필요하면 알려주세요!
답변
angularjs에서는 UI 부분, 서비스, 지시문 및 UI를 나타내는 angularjs의 모든 부분을 만들 수 있습니다. 작업하기에 좋은 기술입니다.
이 기술을 처음 접하고 “사용자”를 인증하려는 사람이라면 C # 웹 API의 힘으로 수행하는 것이 좋습니다. 이를 위해 사용자를 인증하는 강력한 보안 메커니즘을 구축하는 데 도움이되는 OAuth 사양을 사용할 수 있습니다. OAuth로 WebApi를 빌드 한 후에는 토큰에 대해 해당 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;
};
토큰을 받으면 Token의 도움으로 angularjs에서 리소스를 요청하고 OAuth 사양으로 웹 API에서 안전하게 유지 된 리소스에 액세스합니다.
더 많은 도움이 필요하면 아래 기사를 살펴보십시오.
답변
모든 JSON 응답은 속성 (예 : {authenticated : false})을 포함해야하며 클라이언트는 매번 테스트해야한다고 생각합니다. false이면 Angular 컨트롤러 / 서비스가 로그인 페이지로 “리디렉션”됩니다.
그리고 사용자가 JSON을 잡아서 bool을 True로 변경하면 어떻게 될까요?
이런 종류의 일을 클라이언트 측에 의존해서는 안된다고 생각합니다. 사용자가 인증되지 않은 경우 서버는 로그인 / 오류 페이지로 리디렉션해야합니다.
답변
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;
};
답변
