-
19장 Angular.js (앵귤러js) 의 인증관리MeanStack (deprecated) 2016. 7. 12. 22:17
이번 장에서는 angular.js 를 이용한 인증관리에 대해 알아보겠다.
angular.js 인증 관리는 angular.js 공동체에서 가장 많이 논의도니 사안 중 하나이다. 서버가 인증된 사용자에 대한
정보를 들고 있는 동안 angular.js 애플리케이션이 해당 정보를 인지하지 못한다는 문제가 있다. 이를 해결하기 위
해서 익스프레스 애플리케이션이 user 객체를 직접 EJS 뷰에 출력하고 angular.js 서비스를 사용해 해당 객체를
감싸게 만드는 해법이 있다.
인증된 user 객체를 출력하려면 , 여러 곳을 변경해야 한다. 먼저 app/controllers 폴더의 index.server.controller.js
파일을 변경하자.
exports.render = function(req,res) { res.render('index', { title : 'Hello World', user : JSON.stringify(req.user) }); };그리고 나서, app/views 폴더의 index.ejs 파일을 변경하자.
<!DOCTYPE html> <html> <head> <title><%= title %></title> </head> <body> <% if (user) { %> <!-- 변경 --> <a href="/signout">Sign out</a> <!-- 변경 --> <% } else { %> <a href="/signup">Signup</a> <a href="/signin">Signin</a> <% } %> <section ng-view></section> <script type="text/javascript"> window.user = <%- user || 'null' %> </script> <br> <img src="images/overwatchlogo.png" alt="logo"> <script type="text/javascript" src="/lib/angular/angular.js"></script> <script type="text/javascript" src="/lib/angular-route/angular-route.js"></script> <script type="text/javascript" src="/example/example.client.module.js"></script> <script type="text/javascript" src="/example/controllers/example.client.controller.js"></script> <script type="text/javascript" src="/example/config/example.client.routes.js"></script> <script type="text/javascript" src="/application.js"></script> </body> </html>이렇게 변경하고 나면 주 뷰 애플리케이션에서 올바른 JSON 표현으로 user 객체를 출력할 것 이다.
angulsr.js 애플리케이션 부트스트랩이 일어날 때, 인증 상태는 항상 확인 가능할 것 이다. 사용자 인증이 되어
있으면, user 객체는 사용 가능할 것 이며, 그렇지 않으면 user 객체는 NULL 이 될 것 이다.
이제 angular.js 서비스를 사용해 사용자 정보를 공유하는 방법을 살펴보자.
Authentication 서비스를 만들건데, 생성하기에 앞서 모든 사용자 관련 논리를 담을 특정 모듈을 생성하는 방법이
최선이다. 이 모듈을 users 모듈이라 부를 것 이다. 먼저 static 폴더에서 users 라는 새로운 폴더를 생성하자.
이 폴더에 services 라는 폴더와 users.client.module.js 라는 파일을 생성하자.
이 파일에 angular 모듈을 생성하자.
angular.module('users',[]);그리고 나서 static/users/services 폴더에 authentication.client.service.js 라는 서비스 파일을 생성하자.
새로운 서비스 파일에는 다음 코드를 넣자.
angular.module('users').factory('Authentication', [ function() { this.user = window.user; return { user : this.user }; }; ]);위 코드에서 angular.js 서비스에서 온 window.user 객체를 참조했다는 사실에 주목하자. 마지막으로 주 애플리케
이션 페이지에 모듈과 서비스 파일을 포함하는 작업을 수행해야 한다. app/views/ 폴더의 index.ejs 파일을 열어
새로운 자바스크립트 파일을 추가하자.
<!DOCTYPE html> <html> <head> <title><%= title %></title> </head> <body> <% if (user) { %> <a href="/signout">Sign out</a> <% } else { %> <a href="/signup">Signup</a> <a href="/signin">Signin</a> <% } %> <section ng-view></section> <script type="text/javascript"> window.user = <%- user || 'null' %> </script> <br> <img src="images/overwatchlogo.png" alt="logo"> <script type="text/javascript" src="/lib/angular/angular.js"></script> <script type="text/javascript" src="/lib/angular-route/angular-route.js"></script> <script type="text/javascript" src="/example/example.client.module.js"></script> <script type="text/javascript" src="/example/controllers/example.client.controller.js"></script> <script type="text/javascript" src="/example/config/example.client.routes.js"></script> <script type="text/javascript" src="/users/users.client.module.js"></script> <!-- 추가 --> <script type="text/javascript" src="/users/services/authentication.client.service.js"></script> <!-- 추가 --> <script type="text/javascript" src="/application.js"></script> </body> </html>그리고 나중에 OAuth 서비스를 사용할 때 인증 왕복 후 애플리케이션의 URL 해시(#_=_) 를 추가하는 페이스북의
리다이렉트 버그를 해결하기 위해 변경사항이 있다. 미리 변경을 해놓자.
먼저 static 폴더의 application.js 파일을 수정하자.
var mainApplicationModuleName = 'mean'; var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngRoute','users','example']); // users 추가 mainApplicationModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix('!'); } ]); if(window.location.hash === '#_=_') window.location.hash = '#!'; // 추가 angular.element(document).ready(function(){ angular.bootstrap(document, [mainApplicationModuleName]); });이제 다 되었다. 마지막으로 angular.js 엔티티에 Authentication 서비스를 주입하는 작업이 남았다.
이 때 user 객체를 사용할 수 있어야 한다. example 컨트롤러 내부에서 authenticate 서비스를 사용해보자.
static/example/controllers 폴더에서 example.client.controller.js 파일을 변경하자.
angular.module('example').controller('ExampleController', ['$scope', 'Authentication', function($scope, Authentication) { $scope.name = Authentication.user ? Authentication.user.username : 'MEAN Application' } ]);위 코드에서 Authentication 서비스를 컨트롤러에 주입했고, 이를 사용해 사용자의 모델 name 필드가 username
을 참조하게 만들었다.
이제 node server 를 실행하고 한번 테스트 해보자.
로그인을 하면 텍스트 창에 username 이 나타나야 된다.
이제 angular.js 의 기본 원리는 다 알아보았다. angular.js 의 핵심 개념을 살펴봤고, 핵심 개념이 angular.js
애플리케이션의 아키텍처에 맞아 떨어지는 방식을 설명했다. 또한 바우어를 사용해 angular.js 를 설치하는 방법과
애플리케이션의 구조를 잡고 angular.js 를 부트스트랩하는 방법도 알아보았다. 또한 ngRoute 모듈을 사용해
애플리케이션 라우팅 정책을 구성했다.
이제 다음장에서는 지금까지 사용한 모든 것을 연결하여 MongoDB 와 연동하여 CRUD 모듈을 만들 것 이다.
(끝)
(추가 파일 폴더)
'MeanStack (deprecated)' 카테고리의 다른 글
21장 Angular.js , Express (앵귤러js, 익스프레스) CRUD 모듈 만들기 (8) 2016.07.20 20장 Node.js express 를 이용한 CRUD 모듈 (0) 2016.07.13 18장 Angular.js 를 이용한 라우팅 처리 (0) 2016.07.07 17장 Angular.js 를 이용한 MVC 엔티티 (2) 2016.07.05 16장 Angular.js 설치 , bower 를 이용한 의존성 관리 (1) 2016.06.30
