AngularJS: 한 페이지 응용 프로그램에서 인증을 사용하는 기본 예
Angular는 처음입니다.JS가 튜토리얼을 보고 감을 잡았어요.
프로젝트 백엔드가 준비되어 있습니다.이 백엔드는 각각REST엔드포인트 인증이 필요합니다.
하고 싶은 일
a.) 프로젝트의 페이지를 1페이지로 하고 싶다.http://myproject.com.
b.) 사용자가 브라우저에서 URL을 누르면 로그인 여부에 따라 동일한 URL 아래에 홈페이지/뷰 또는 로그인 페이지/뷰가 표시됩니다.http://myproject.com.
c.) 사용자가 로그인하지 않은 경우 폼이 작성되고 서버가 이 폼을 설정합니다.USER_TOKEN세션 중이기 때문에 엔드포인트에 대한 모든 추가 요구는 다음 기준에 따라 인증됩니다.USER_TOKEN
나의 혼란
a.) AngularJS를 사용한 클라이언트 측 인증은 어떻게 처리합니까?이쪽과 이쪽을 보았지만 사용법을 이해하지 못했다
b.) 사용자가 같은 URL로 로그인하고 있는지 여부에 따라 사용자에게 다른 뷰를 표시하는 방법http://myproject.com
처음 angular.js를 사용하고 있는데 어떻게 시작해야 할지 정말 혼란스럽습니다.조언 및/또는 리소스를 제공해주시면 대단히 감사하겠습니다.
이 기사를 요약한 github repo를 작성했습니다.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) 세션:사용자 데이터를 보관하는 싱글톤.여기서의 실장은, 고객에게 달려 있습니다.
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) 부모 컨트롤러:이것을 애플리케이션의 「메인」기능이라고 하면, 모든 컨트롤러가 이 컨트롤러로부터 계승되어 이 앱의 인증의 backbone이 됩니다.
<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로.$on440$상태Change Start') 사용자가 인증되지 않은 경우 상태 변경을 방지하기 위해 기능을 추가합니다.
$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);
}
};
} ]);
추신: 첫 번째 기사에서 설명한 바와 같이 data autofill 형식의 버그는 directives.js에 포함된 디렉티브를 추가하면 쉽게 피할 수 있습니다.
추신.2 이 코드는 사용자가 쉽게 조정할 수 있으며, 다른 경로를 볼 수 있도록 하거나, 표시해야 할 내용이 아닌 내용을 표시할 수 있습니다.논리는 서버 측에서 구현해야 합니다. 이는 단지 ng-app에서 올바르게 표시하는 방법일 뿐입니다.
접근 방식이 마음에 들어 프런트 엔드에서 인증 관련 작업을 수행하지 않고 서버 측에서 구현합니다.
최신 앱의 '기술'은...클라이언트는 Auth에 대해 신경 쓰지 않습니다.앱 내의 모든 것은 먼저 로그인이 필요하기 때문에 세션에서 기존 사용자가 검출되지 않는 한 서버는 항상 로그인 페이지를 제공합니다.session.user가 발견되면 서버는 index.html만 전송합니다.밤:-o
Andrew Joslin의 댓글을 찾아보세요.
여기서도 비슷한 질문에 대답했습니다. 각진.JS 인증 + RESTful API
나는 Angular를 썼다.보호된/공용 경로, 로그인/로그아웃 시 재루팅, 상태 확인을 위한 하트비트, 쿠키에 세션 토큰 저장, 이벤트 등을 지원하는 UserApp용 JS 모듈.
다음 중 하나를 수행할 수 있습니다.
- 모듈을 수정하여 자체 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()는 loginroute 후 .§:$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 부품, 서비스, Directives 및 UI를 나타내는 angularjs의 모든 부품을 생성할 수 있습니다.그것은 일하기 좋은 기술이다.
이 테크놀로지를 처음 도입하여 "사용자"를 인증하고 싶은 사람은 c# web 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;
};
토큰을 얻으면 토큰의 도움으로 angularjs에서 리소스를 요청하고 OAuth 사양으로 웹 API에서 안전하게 유지된 리소스에 액세스합니다.
자세한 내용은 아래 문서를 참조해 주십시오.
모든 JSON 응답에는 속성(예를 들어 {authenticated: false})이 포함되어 클라이언트는 매번 테스트해야 합니다.false일 경우 Angular 컨트롤러/서비스는 로그인 페이지로 "리다이렉트"됩니다.
그리고 사용자가 de JSON을 포착하여 부울을 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;
};
언급URL : https://stackoverflow.com/questions/16139660/angularjs-basic-example-to-use-authentication-in-single-page-application
'programing' 카테고리의 다른 글
| useEffect Hook 예제:재렌더의 원인은 무엇입니까? (0) | 2023.03.22 |
|---|---|
| create-react-app에서 제공하는 ESLint 사용 안 함 (0) | 2023.03.22 |
| Oracle: 보류 중인 트랜잭션이 있는지 확인하려면 어떻게 해야 합니까? (0) | 2023.03.22 |
| 리액트 컴포넌트에 대해 es6 Import alias 구문을 사용할 수 있습니까? (0) | 2023.03.22 |
| 임의의 키에 대해 JSON Schema를 어떻게 설계하시겠습니까? (0) | 2023.03.22 |