MEAN Stack Front to Back (MEANAuthApp)

Slides:



Advertisements
Similar presentations
Python Essential 세미나 1 CGI 프로그램 작성법 발표자 : 박승기 ( 수 )
Advertisements

해외전자정보서비스이용교육 EBSCO eBook (NetLibrary)
EBSCO eBooks 이용 방법 및 다운로드 (대출모드) 안내
- SW_Desing Study Group -
Chapter06 폼 HTML5 Programming.
IoT(사물인터넷) 보안 2016년 2학기 4. 라즈베리파이 카메라.
DB 프로그래밍 학기.
DB 프로그래밍 학기.
1. 개발 시스템 개요.
MEAN Stack Front to Back (MEANAuthApp)
웹 2.0 및 Ajax 개요.
패스포트로 사용자 인증하기 9장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
AJAX 기본중의 기본 xmlhttprequest
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
개발자에게 SharePoint Services 란 무엇인가?
12장. JSP에서 자바빈 활용 제12장.
웹어플리케이션 보안 Web application security
채팅 서버 만들기 10장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
웹어플리케이션보안 인증서 활용 중부대학교 정보보호학과 이병천 교수.
모바일 서버 만들기 13장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
Web Servers (IIS & Apache)
데이터베이스 사용하기 6장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
9. Deploying mean applications
MEAN Stack Front to Back (MEANAuthApp)
MEAN Stack Front to Back
forms 객체 입력상자 체크상자, 라디오 버튼 목록상자
Chapter05 오디오와 비디오 HTML5 Programming.
AJAX 커머스아이 박준열.
4장. 웹로직 서버상에서의 JDBC와 JTA의 운용
ASP.NET : Database 접근 2008 컴퓨터공학실험(Ⅰ)
1. C++ 시작하기.
ASP.NET Mobile Controls
웹 어플리케이션 보안 2016년 2학기 8. MEAN APP – USER CRM.
DataStage 운영자 지침서 Operator’s Guide
MEAN Stack Front to Back (MEANAuthApp)
ASP.NET AJAX 비동기 게시판 작성 2007 컴퓨터공학실험( I )
웹 어플리케이션 보안 2016년 2학기 4. Restful node apI 만들기.
Git 사용법 GitHub 가입 GitHub 새 저장소 만들기 Git 설치 로컬 저장소 만들기 로컬 저장소와 원격 저장소 연결
웹 어플리케이션 보안 2016년 2학기 3. Mongo db.
(인터페이스 상세 이용 방법 및 다운로드 (대출모드) 안내)
웹 어플리케이션 보안 2016년 2학기 10. Workflow tools.
인터넷응용프로그래밍 JavaScript(Intro).
암호학 응용 Applied cryptography
웹 어플리케이션 보안 2016년 2학기 2. Node routing.
IOS Press
MEAN Stack Front to Back
Exchanging 6. Basic Commands.
MEAN Stack Front to Back (MEANAuthApp)
Go Lang 리뷰 이동은.
HTTP 프로토콜의 요청과 응답 동작을 이해한다. 서블릿 및 JSP 를 알아보고 역할을 이해한다.
MEAN Stack Front to Back (MEANAuthApp)
MEAN Stack Front to Back (MEANAuthApp)
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
User Datagram Protocol (UDP)
8장 쿠키와 세션 한빛미디어(주).
ASP.NET AJAX / AJAX Control Toolkit 응용 2008 컴퓨터공학실험( I )
IOS Press Last Update : Jan, 2012.
MEAN Stack Front to Back (MEANAuthApp)
LOGIN할 때 아이디, 비번 입력 여부 체크하기
Spring Security 2015 Web Service Computing.
MEAN Stack Front to Back (MEANAuthApp)
암호학 응용 Applied cryptography
KISTI Supercomputing Center 명훈주
Feb. EBSCO KOREA IOS Press Feb. EBSCO KOREA.
Web based Presentation & Controller Service
9 브라우저 객체 모델.
이번 시간에는... 지난 시간까지 2회차에 걸쳐 WML의 택스트 포맷, 이미지 처리, 페이지 이동, 태스크 수행과 이벤트 처리 및 WML 사용자 Input 처리 태그 등, WML 개발에 대해서 알아보았습니다. 이번 시간에는 2회차에 걸쳐, WML 스크립트 개발에 대해서.
웹어플리케이션보안 난수화 토큰인증 중부대학교 정보보호학과 이병천 교수.
MEAN Stack Front to Back (MEANAuthApp)
MEAN Stack Front to Back (MEANAuthApp)
Presentation transcript:

MEAN Stack Front to Back (MEANAuthApp) 6. Register Component, Validation & Flash messages 7. Auth Service & User Registration

목차 1. 환경 구축 2. Express Setup & Routes 3. User Model and Register 4. API authentication and Token 5. Angular 4 Components & Routes 6. Register Component, Validation & Flash messages 7. Auth Service & User Registration 8. Login & Logout 9. Protected Requests & Auth Guard 10. App Deployment to Heroku

6. Register components Register components Validation Flash messages

Home component home/home.component.html Register 버튼 Login 버튼 <div class="jumbotron text-center">   <h1>MEAN Authentication App</h1>   <p class="lead">Welcome to our custom MEAN authentication app</p>   <div>     <a class="btn btn-primary" [routerLink]="['/register']">Register</a>     <a class="btn btn-default" [routerLink]="['/login']">Login</a>   </div> </div>   <div class="row">   <div class="col-md-4">     <h3>Express Backend</h3>     <p>A rock solid Node.js/Express server using Mongoose to organize models and query the database.</p>     <h3>Angular/CLI</h3>     <p>Angular/CLI to generate components, services and more. Local dev server and easy compilation</p>     <h3>JWT Tokens</h3>     <p>Full featured authentication using JSON web tokens. Login and store user data</p> Register 버튼 Login 버튼 메인 페이지 컨텐츠 작성

Home component

Register component Register/register.component.ts 사용자 등록 페이지에서는 import { Component, OnInit } from '@angular/core';   @Component({   selector: 'app-register',   templateUrl: './register.component.html',   styleUrls: ['./register.component.css'] }) export class RegisterComponent implements OnInit {   name: string;   username: string;   email: string;   password: string;   constructor() { }   ngOnInit() {   }   onRegisterSubmit(){     const user = {       name: this.name,       email: this.email,       username: this.username,       password: this.password     } } 사용자 등록 페이지에서는 4개의 사용자 입력정보 사용

Register component Register/register.component.html 사용자 등록 페이지 UI <h2 class="page-header">Register</h2> <form (submit)="onRegisterSubmit()">   <div class="form-group">     <label> Name </label>     <input type="text" [(ngModel)]="name" name="name" class="form-control">   </div>     <label> Username </label>     <input type="text" [(ngModel)]="username" name="username" class="form-control">     <label> Email </label>     <input type="text" [(ngModel)]="email" name="email" class="form-control">     <label> Password </label>     <input type="password" [(ngModel)]="password" name="password" class="form-control">   <input type="submit" class="btn btn-primary" value="Submit"> </form> Submit 버튼이 눌리면 onRegisterSubmit() 함수가 실행됨 사용자 입력값을 ngModel로 연결 2-way binding 제공

Register component App.module.ts 에 FormsModule 추가 필요 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';   import { RouterModule, Routes } from '@angular/router'; 중략 @NgModule({   imports: [     BrowserModule,     FormsModule,     RouterModule.forRoot(appRoutes)   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { } 사용자의 폼 입력을 다루는 모듈을 import하여 app.module.ts에 등록시킴

Register component

사용자 입력값 검증 추가 사용자 입력값이 있는지, 이메일주소 포맷이 맞는지 검 증하는 서비스 추가 서비스 생성 Angular-src/src/app/services 폴더 생성 위 폴더로 이동 Validate라는 서비스 생성 > ng g service validate

사용자 입력값 검증 추가 App/services 폴더에 두개의 파일 생성 이렇게 생성된 서비스는 app.module.ts 에 자동적으로 추가되지 않아 직접 추가해야 함

사용자 입력값 검증 추가 App.module.ts에 서비스 등록 다음 내용 추가 중략 import { ValidateService } from './services/validate.service'; providers: [ValidateService],

사용자 입력값 검증 추가 validate.service.ts 파일 수정 import { Injectable } from '@angular/core';   @Injectable() export class ValidateService {   constructor() { }   validateRegister(user) {     if(user.name == undefined || user.email == undefined || user.username == undefined || user.password == undefined) {       return false;     } else {       return true;     }   }   validateEmail(email){     var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@ ((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;     return re.test(email); } 검증 관련 서비스 함수 2개를 등록 4개의 사용자 입력값 모두를 입력해야 함 이메일주소의 유효성을 검증하는 코드 구글 검색: javascript validate email

register.component.ts 파일 수정 import { Component, OnInit } from '@angular/core'; import { ValidateService } from '../../services/validate.service';   @Component({   selector: 'app-register',   templateUrl: './register.component.html',   styleUrls: ['./register.component.css'] }) export class RegisterComponent implements OnInit {   name: string;   username: string;   email: string;   password: string;   constructor(private validateService: ValidateService) { }   ngOnInit() {   } 컴포넌트에서 서비스를 등록   onRegisterSubmit(){     const user = {       name: this.name,       email: this.email,       username: this.username,       password: this.password     }       // Required Fields     if(!this.validateService.validateRegister(user)){       console.log('Please fill in all fields');       return false;     // Validate Email     if(!this.validateService.validateEmail(user.email)){       console.log('Please use a valid email');   } } 서비스 함수를 이용

Validation Test 4개의 정보를 모두 입력해야 등록 가능 유효한 이메일주소를 입력해야 에러가 발생한 경우 브라우저 콘솔에 표시

Flash Message 기능 추가 목적 Flash message 패키지 설치 Angular-src 폴더에서 설치 (front-end에 적용) npm install angular2-flash-messages --save Angular-src/package.json 파일에 적용 확인

Flash Message 기능 추가 App.module.ts 에 적용 import { ValidateService } from './services/validate.service'; import { FlashMessagesModule } from 'angular2-flash-messages'; 중략 imports: [   BrowserModule,   FormsModule,   RouterModule.forRoot(appRoutes),   FlashMessagesModule ],

Flash Message 기능 추가 App.component.html 파일 수정 <app-navbar></app-navbar>   <div class="container">   <flash-messages></flash-messages>   <router-outlet></router-outlet> </div> Flash message는 메뉴바 아래, 메인 콘텐츠 위에 표시함

Flash Message 기능 추가 Register.component.ts 파일 수정 import { Component, OnInit } from '@angular/core'; import { ValidateService } from '../../services/validate.service'; import { FlashMessagesService } from 'angular2-flash-messages';   중략   constructor(private validateService: ValidateService, private flashMessage: FlashMessagesService) { }     // Required Fields     if(!this.validateService.validateRegister(user)){       this.flashMessage.show('Please fill in all fields', {cssClass: 'alert-danger', timeout: 3000});       return false;     }     // Validate Email     if(!this.validateService.validateEmail(user.email)){       this.flashMessage.show('Please use a valid email', {cssClass: 'alert-danger', timeout: 3000});   } }

Flash Message 기능 추가

7. Auth Service & User Registration

사용자 등록시 DB에 저장 새로운 auth service 생성 Angular-src/src/app/services 폴더로 이동 > ng g service auth 기능 - 사용자 등록시 서버의 Backend에 연결하여 사용자 정보를 전송 - 서버의 응답결과를 받아옴

사용자 등록시 DB에 저장 Auth.service.ts 파일 수정 import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular/http'; import 'rxjs/add/operator/map';   @Injectable() export class AuthService {   authToken: any;   user: any;   constructor(private http: Http) { }   registerUser(user){     let headers = new Headers();     headers.append('Content-Type', 'application/json');     return this.http.post('http://localhost:3000/users/register', user, {headers: headers})       .map(res => res.json());   } } Http 서비스를 이용할 준비 Headers 모듈 사용 준비 Rxjs 사용 준비 인증토큰, 사용자정보 변수 선언 Http 서비스를 등록 Http 서비스로 사용자 정보를 전송 Observable을 리턴

AngularJS에서의 Http 서비스 AngularJS에서 사용하는 AJAX API

Reactive Programming Reactive Programming이란? Reactive programming is programming with asynchronous data streams. An amazing toolbox of functions to combine, create and filter any of those streams.

ReactiveX ReactiveX http://reactivex.io/ ReactiveX is a library for composing asynchronous and event- based programs by using observable sequences. ReactiveX provides a collection of operators with which you can filter, select, transform, combine, and compose Observables.  https://github.com/ReactiveX/rxjs http://reactivex.io/rxjs/

Observables, observer, subscribe An Observer Subscribes to an Observable The observer reacts to whatever item or sequence of items the Observable emits

사용자 등록시 DB에 저장 참고: routes/users.js (Backend server의 응답) 사용자 입력값으로 // Register router.post('/register', (req, res, next) => {   let newUser = new User({     name: req.body.name,     email: req.body.email,     username: req.body.username,     password: req.body.password   });     User.addUser(newUser, (err, user)=>{     if(err) {       res.json({success: false, msg: 'Failed to register user'});     } else {       res.json({success: true, msg: 'User registered'});     } }); 사용자 입력값으로 newUser 객체 생성 mongoDB에 저장

사용자 등록시 DB에 저장 App.module.ts 파일에서 auth service 등록 필요한 모듈 import import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; 중략 import { ValidateService } from './services/validate.service'; import { AuthService } from './services/auth.service'; import { FlashMessagesModule } from 'angular2-flash-messages';   imports: [   BrowserModule,   FormsModule,   HttpModule,   RouterModule.forRoot(appRoutes),   FlashMessagesModule ],  providers: [ValidateService, AuthService], 필요한 모듈 import 필요한 서비스 import 모듈 등록 서비스 등록

사용자 등록시 DB에 저장 register.component.ts 파일 수정 필요한 서비스 import 서비스 등록 import { Component, OnInit } from '@angular/core'; import { ValidateService } from '../../services/validate.service'; import { AuthService } from '../../services/auth.service'; import { FlashMessagesService } from 'angular2-flash-messages'; import { Router } from '@angular/router'; 중략   constructor(     private validateService: ValidateService,     private flashMessage: FlashMessagesService,     private authService: AuthService,     private router: Router     ) { }     // Validate Email     if(!this.validateService.validateEmail(user.email)){       this.flashMessage.show('Please use a valid email', {cssClass: 'alert-danger', timeout: 3000});       return false;     }       // Register User     this.authService.registerUser(user).subscribe(data => {       if(data.success) {         this.flashMessage.show('You are now registered and can log in', {cssClass: 'alert-success', timeout: 3000});         this.router.navigate(['/login']);       } else {         this.flashMessage.show('Something went wrong', {cssClass: 'alert-danger', timeout: 3000});       this.router.navigate(['/register']);       }     }); register.component.ts 파일 수정 필요한 서비스 import Router서비스는 페이지 리다이렉트에 사용 서비스 등록 서버의 응답을 받아서 처리 Subscribe 메서드 이용 등록 성공시 로그인 페이지로 리다이렉트 등록 실패시 등록 페이지로 리다이렉트

테스트 사용자 등록 성공 로그인 페이지로 리다이렉트 DB에 저장 확인