웹 어플리케이션 보안 2016년 2학기 8. MEAN APP – USER CRM

8. Mean App – CRM Chap 17. MEAN App: Users Management CRM

목표 가정 서버측 코드(node API, JWT 인증)는 이미 개발 완료되어 있고 다 른 사람이 운영하고 있어서 내가 수정할 수 없다고 가정 목표 서버와 연동할 수 있는 클라이언트측 코드를 개발하는 것 Facebook, Twitter, GitHub 등과 같이 서비스 운영사에서 서버측 코드는 비공개하지만 서버 API를 공개하고 다른 개발자들이 이와 연동되는 클라이언트 서비스를 개발하 도록 유도하는 것과 비슷한 시나리오

홈페이지 프리뷰 기본 홈페이지 - 로그인 안 한 상태 로그인 페이지 로그인 후 사용자 정보 보기 새로운 사용자 생성하기

폴더 구조 설계 14장에서 개발한 Node API를 그대로 이용 여기에서는 public폴더의 frontend측만 개발

해야 할 일 폴더 구조를 앞 페이지와 같이 구성 앞장에서 개발한 두개의 서비스를 다음의 지정된 폴더 에 저장함 public/app/services/authService.js (16장) public/app/services/userService.js (15장) 메인 어플리케이션 개발 public/app/controllers/mainCtrl.js public/app/app.js public/app/app.routes.js public/app/views/index.html public/app/views/pages/home.html

public/app/app.js app.js 파일은 - angular frontend 서비스의 시작점 - 여러 가지 필요한 서비스들을 불러옴 • ngAnimate to add animations to all of our Angular directives (specifically ngShow/ngHide) (애니메이션 적용) • app.routes will be the routing for our application (클라이언트 라우팅) • authService is the service file created in chapter 16 (인증서비스, 완료) • mainCtrl will be a brand new controller we create that will encompass our main view (메인 컨트롤러) • userCtrl will have the controllers for all our user management pages (사용자 관리 페이지를 위한 컨트롤러) • userService is the service file created in chapter 15 (사용자관리서비스, 이미 완료)

public/app/app.routes.js Public/app/app.routes.js 현재는 우선 / 루트만 지정 앞으로 더 많은 루트가 지정될 예정 Public/app/views/pages/home.html / 루트에서 필요한 home.html 작성

public/app/controllers/mainCtrl.js mainCtrl.js는 어플의 중요 기능들을 포함 사용자가 로그인 되어 있는지 확인 $rootScope 모듈을 이용하여 route 변경을 체크하고 아직 로그인된 상태가 맞는지 확인 route 변경시 사용자 정보 가져오기 사용자 로그인 기능 사용자 로그아웃 기능 AuthService.js에 정의된 함수들을 이용

Caching Service Calls 캐쉬의 필요성 모든 루트 변경시에 사용자 정보를 확인할 필요 그러나 모든 call에 대해 사용자 인증 API를 call 하는 것은 원하 지 않고 캐쉬를 사용하는 것이 속도, 효율성 면에서 유리 AuthService.js 캐쉬된 정보가 있으면 캐쉬정보를 리턴 캐쉬된 정보가 없으면 API call을 통해 사용자 정보를 새로 가져옴 $http.get('/api/me', { cache: true });

public/app/views/index.html Home page view Controller 불러오기 전체 레이아웃을 보여주는 메인 파일임 Controller 불러오기 Service 불러오기 App 불러오기

public/app/views/index.html body에 userApp을 적용 mainController를 적용 로그인된 경우 navbar 표시 ng-if: 조건이 맞는 경우에만 표시 - 로그인 안된 경우: Login 링크 표시 - 로그인된 경우: hello 메시지 표시, 로그아웃 링크 표시 ngIf vs. ngShow/ngHide 방식의 차이점 - ngIf 방식은 소스보기나, 요소검사 등의 방법으로 HTML요소가 보이지 않음 - ngShow, ngHide 방식은 화면에만 적용되는 것으로 HTML 코드를 볼 수 있음 - 인증된 사용자에게만 코드가 보이도록 해야 하므로 ngIf 방식이 필요함

User Controller: userCtrl.js 기능이 더 추가될 예정 We are injecting the userService here because we need the User factory we created earlier.

스타일시트 설정 public/assets/css/style.css 로그인 되어 있지 않으므로 navbar가 보이지 않음

로그인 페이지 만들기 1. 로그인 루트 생성 - app.routes.js

로그인 페이지 만들기 2. 로그인 뷰 생성 - app/views/pages/login.html

로그인 진행중 Processing Icon 추가하기 1. Creating a variable called processing 2. Adding spinning icons in our views mainController.js 로그인 클릭시 processing=true 로그인 성공시 processing=false login.html processing이 true인 경우 spinner아이콘을 보여줌

로그인 진행중 Processing Icon 추가하기 style.css 에 spinner 추가

로그인 에러 메시지 표시하기 로그인 API는 로그인 실패시 에러메시지를 전달 에러메시지를 login.error 변수로 전달 현 div 영역에 표시

로그인 에러 메시지 표시하기 User not found error Wrong password error

인증 처리 과정 요약 사용자가 로그인하면 토큰은 브라우저의 localStorage에 저장됨 로그인 사용자로서의 메시지를 요청하기 위해서는 모든 request 에 토큰을 첨부해야 함 authService에서 정의한 AuthInterceptor가 이런 역할을 수행함 .config 를 이용하여 $httpProvider에 AuthInterceptor를 추가함 $httpProvider는 모든 request에 토큰을 첨부 app.js

사용자 페이지 제작 다음과 같은 4가지 User page를 제작 각각의 페이지 제작을 위해서는 3가지를 정의해야 함 1. All users : 모든 사용자 정보 보기 2. Delete a user : 사용자 삭제 3. Create a user : 사용자 생성 4. Edit a user : 사용자 정보 갱신 각각의 페이지 제작을 위해서는 3가지를 정의해야 함 1. Controller – 행위 지정 2. Route – 페이지 연결 통로 지정 3. View – 보여줄 페이지 작성

1. All users (모든 사용자 정보 보기) All users - Controller userCtrl.js Processing 아이콘 표시를 위한 변수 User factory에서 사용자 정보를 가져와서 vm.users 변수에 저장

1. All users (모든 사용자 정보 보기) All Users - View pages/users/all.html 메인 뷰에서는 다음의 컴포넌트들을 포함 • A header with a button to create a new user • A message that says “Loading Users…” • A table of our users • Button to edit a user Loading Users 메시지 표시 사용자 정보 테이블 보여주기 New User 버튼 Edit 버튼 생성

1. All users (모든 사용자 정보 보기) All Users - Route app.routes.js http://localhost:8080/users

1. All users (모든 사용자 정보 보기) 크롬의 네트워크 툴을 살펴보면 request에 토큰이 첨부 된 것을 볼 수 있음

2. Delete a user (사용자 삭제) userCtrl.js views/pages/users/all.html 에 Delete 버튼 추가 Delete 버튼을 누르면 deleteUser 함수를 실행 person._id를 변수로 전달

3. Create a user (사용자 생성) userCtrl.js Create User - Controller userCreateController 생성 userService 에서 User.create() 함수를 호출 (userData 오브젝트를 전달) views/pages/users/single.html 하나의 뷰 파일을 사용자 생성과 사용자정보갱신에 함께 사용 이 두가지를 구별하기 위한 변수

3. Create a user (사용자 생성) Create User - Route app.routes.js

3. Create a user (사용자 생성) Create User - View pages/users/single.html inputs bound using ngModel form being submitted using ngSubmit error message being shown using ngShow user.type 변수에 따라 헤더 메시지와 버튼 표시를 변경 - Create User 또는 Update User

3. Create a user (사용자 생성)

4. Edit a user (사용자 정보 갱신) Create user 페이지와 똑같은 뷰를 사용 차이점 pages/users/single.html 차이점 we have to pass a parameter into the URL (/users/user_id) we have to get the users information on page load we have to bind that information to our form

4. Edit a user (사용자 정보 갱신) userCtrl.js Edit User - Controller - 사용자정보 갱신시 사용자의 ID를 URL로 전달 - URL에서 파라메터를 추출하기 위해 Angular의 $routeParams 모듈을 사용함 User.get($routeParams.user_id) - $routeParams.user_id 의 사용자 정보를 가져옴 - views/pages/users/single.html 페이지에서 사용자 정보를 사용, 자동 반영 User.update($routeParams.user_id, vm.userData) - 사용자가 입력창에서 수정한 정보가 DB에 갱신됨

4. Edit a user (사용자 정보 갱신) Edit User - Route app.routes.js

4. Edit a user (사용자 정보 갱신) Edit User - View pages/users/single.html

4. Edit a user (사용자 정보 갱신)

메시지 애니메이션 Index.html에서 CDN으로부터 animate.css를 이용 http://daneden.github.io/animate.css/ asset/css/style.css 파일에 애니메이션 추가

이 장에서 배운 내용들 백엔드와 프런트엔드의 분리 API의 사용으로 인한 효율성 API의 사용 방법 the separation of backend and frontend API의 사용으로 인한 효율성 how using an API can help speed up workflow API의 사용 방법 the mechanics of using an API 서비스를 이용하는 Angular 어플리케이션 생성 creating an Angular application that uses services Angular 인증의 사용방법 handling frontend Angular authentication

새로운 resource를 추가하는 경우의 프로세스 Node.js 서버측 1. Mongoose 모델을 생성 2. API 루트 생성 Angular.JS 클라이언트측 1. 서버 API와 연동하는 서비스 생성 2. 각 페이지별 컨트롤러 생성 3. 뷰 파일을 생성하고 루트와 컨트롤러 지정 4. 아이콘, 애니메이션 등 데코레이션

사용자 관리 서비스 개발 성공