MEAN Stack Front to Back (MEANAuthApp)

Slides:



Advertisements
Similar presentations
1. 브라우저에서 로 관리창으로 접속해서, 서버 인증서를 설치 할 서버를 선택하고 Manage 버튼을 클릭합니다. 2. Security 탭을 선택한 후, 인증서 Trust.
Advertisements

3Ksoft Xstyler 교육자료. 일반 웹 브라우저에서 XML 문서를 생성할 수 있는 Webform( 데이터 입력양식 ) 을 WYSIWYG GUI 환경에서 손쉽게 제작 가능한 프로그램. 제작한 Webform 을 X-DRP 서버 시스템에 손쉽게 등록가능 X-DRP 서버에.
ⓒ 2015 NHN Entertainment Corp. Django 로 만드는 초간단 블로그 시스템운영팀 김영태 개발환경 구축.
Android 프로그램개발 환경. 학습 목표 ■ 교육 목표  JDK 설치  JDK 환경 설정  Eclipse 설치  Android SDK 설치  ADT Plug-in 설치  Android Virtual Device(AVD) 설치  Android 예제 프로그램.
OpenCV 안드로이드 연동 환경설정 OpenCV-Android 를 다운 받습니다.
KyungPook National University
DB 프로그래밍 학기.
DB 프로그래밍 학기.
MEAN Stack Front to Back (MEANAuthApp)
패스포트로 사용자 인증하기 9장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
AJAX 기본중의 기본 xmlhttprequest
Database Laboratory, Hong Ik University
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
웹어플리케이션 보안 Web application security
제 09 장 데이터베이스와 MySQL 학기 인터넷비즈니스과 강 환수 교수.
6장 Mysql 명령어 한빛미디어(주).
(개정판) 뇌를 자극하는 Red Hat Fedora 리눅스 서버 & 네트워크
데이터베이스 사용하기 6장 Do it! Node.js 프로그래밍 이지스퍼블리싱 제공 강의 교안 2017/03
14장 질의응답 한빛미디어(주).
9. Deploying mean applications
MEAN Stack Front to Back (MEANAuthApp)
MEAN Stack Front to Back
INDEX 1. 전체 시스템 구성도 2. 개발환경 3. 사용자 명령어 4. 패킷 구조 및 데이터 구조
5장 Mysql 데이터베이스 한빛미디어(주).
4장. 웹로직 서버상에서의 JDBC와 JTA의 운용
4-1장. MySQL 제13장.
AP 모드 활용하기 WiFi 시리얼 보드 활용가이드 김영준 헬로앱스 (
MEAN Stack Front to Back (MEANAuthApp)
SqlParameter 클래스 선문 비트 18기 발표자 : 박성한.
웹 어플리케이션 보안 2016년 2학기 8. MEAN APP – USER CRM.
MEAN Stack Front to Back (MEANAuthApp)
ASP.NET AJAX 비동기 게시판 작성 2007 컴퓨터공학실험( I )
KHS JDBC Programming 4 KHS
웹 어플리케이션 보안 2016년 2학기 4. Restful node apI 만들기.
- Open API : Naver & Daum OpenAPI 컴퓨터공학실험( I )
5장 Mysql 데이터베이스 한빛미디어(주).
DB연동하기 원격db접속.
You YoungSEok Oracle 설치 You YoungSEok
C#.
웹 어플리케이션 보안 2016년 2학기 3. Mongo db.
13. 연산자 오버로딩.
인터넷응용프로그래밍 JavaScript(Intro).
CHAP 13. 방명록 만들기 실습.
MEAN Stack Front to Back
MEAN Stack Front to Back (MEANAuthApp)
Go Lang 리뷰 이동은.
MEAN Stack Front to Back (MEANAuthApp)
MEAN Stack Front to Back (MEANAuthApp)
IoT(사물인터넷) 보안 2016년 2학기 3. 라즈베리파이와 node.js.
프로그래밍 원리 Chapter 05 자바스크립트 기초 신한대학교 IT융합공학부 박 호 균.
MEAN Stack Front to Back (MEANAuthApp)
웹서버 기능으로 데이터 읽기 및 제어하기 WiFi 시리얼 보드 활용가이드 김영준
Linux/UNIX Programming
Canary value 스택 가드(Stack Guard).
웹 어플리케이션 보안 2016년 2학기 11. Enhancing Security.
암호학 응용 Applied cryptography
KISTI Supercomputing Center 명훈주
01. 분산 파일 시스템의 개요 네트워크에 분산된 파일을 사용자가 쉽게 접근하고 관리할 수 있게 해준다.
JSP Programming with a Workbook
시스템 인터페이스 Lab1 X-window 및 명령어 사용.
9 브라우저 객체 모델.
웹어플리케이션보안 난수화 토큰인증 중부대학교 정보보호학과 이병천 교수.
채팅 및 파일전송 프로그램 권 경 곤 김 창 년.
 6장. SQL 쿼리.
7 생성자 함수.
6 객체.
MEAN Stack Front to Back
MEAN Stack Front to Back (MEANAuthApp)
20 XMLHttpRequest.
MEAN Stack Front to Back (MEANAuthApp)
Presentation transcript:

MEAN Stack Front to Back (MEANAuthApp) 3. User Model and Register

목차 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

이번 장에서 할 일 사용자 모델 작성 DB와의 연동 프로그램 작성 사용자 등록시 DB에 저장할 정보 name, email, username, password 등 추가정보: address, phone, hobby 등 DB와의 연동 프로그램 작성 사용자 등록 테스트

사용자 모델 생성 models 폴더 생성 models/user.js 파일 작성 UserSchema 생성 const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); const config = require('../config/database'); // User Schema const UserSchema = mongoose.Schema({ name: { type: String }, email: { type: String, required: true username: { password: { } }); const User = module.exports = mongoose.model('User', UserSchema); module.exports.getUserById = function(id, callback){ User.findById(id, callback); module.exports.getUserByUsername = function(username, callback){ const query = {username: username}; User.findOne(query, callback); 사용자 모델 생성 models 폴더 생성 models/user.js 파일 작성 UserSchema 생성 Mongoose model 작성 API 참조 http://mongoosejs.com/docs/models.html UserSchema를 외부에서 User라는 이름으로 사용할 수 있도록 모델을 생성하고 Export getUserById 라는 함수를 외부에서 사용할 수 있도록 선언 (DB에서 id로 사용자 검색) getUserByUsername 라는 함수를 외부에서 사용할 수 있도록 선언 (DB에서 username으로 사용자 검색)

사용자 모델 생성 Mongoose의 스키마와 모델 스키마 (Schema): 문서를 저장할 구조를 정의 모델 (Model): 실제 저장되고 읽어지는 문서 객체

DB에서 정보 찾기 findById( ) findOne( ) Mongoose model의 멤버 메서드로 Id정보로 찾기 Id는 mongoDB에 저장시 자동으로 부여되는 정보 findOne( ) Mongoose의 쿼리 메서드로 특정 필드 정보로 찾기

사용자 등록 기능 추가 routes/users.js 파일에서 post(‘/register’) 기능 추가 const express = require('express'); const router = express.Router(); const passport = require('passport'); const jwt = require('jsonwebtoken'); const User = require('../models/user'); // 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'}); } routes/users.js 파일에서 post(‘/register’) 기능 추가 사용자 입력창에서 입력하는 값들을 newUser 변수에 지정 newUser 값으로 새로운 사용자 등록 (models/user.js에 addUser라는 함수를 만들어야 함)

JavaScript ES6+: var, let, or const? `const` is a signal that the identifier won’t be reassigned. `let`, is a signal that the variable may be reassigned, such as a counter in a loop, or a value swap in an algorithm. It also signals that the variable will be used only in the block it’s defined in, which is not always the entire containing function. `var` is now the weakest signal available when you define a variable in JavaScript. The variable may or may not be reassigned, and the variable may or may not be used for an entire function, or just for the purpose of a block or loop.

사용자 등록 기능 추가 models/user.js 파일 module.exports.addUser = function(newUser, callback){ bcrypt.genSalt(10, (err, salt) => { bcrypt.hash(newUser.password, salt, (err, hash) => { if(err) throw err; newUser.password = hash; newUser.save(callback); }); } models/user.js 파일 Bcrypt에서 - genSalt() : salt 값 생성 - 10 : 라운드 수 - hash() : 사용자 입력 패스워드와 salt를 이용하여 해쉬값 hash 생성 계산된 해쉬값을 패스워드 필드에 덮어씀 그리고 DB에 저장

Bcryptjs https://www.npmjs.com/package/bcryptjs 동기식 vs. 비동기식

사용자 등록 기능 추가 DB에 저장하는 Save() 함수

Postman을 이용한 사용자 등록 테스트 Postman이란? Postman 사용의 필요성 A powerful GUI platform to make your API development faster & easier, from building API requests through testing, documentation and sharing. 웹서비스 개발시 API를 테스트하기 위한 도구 크롬 브라우저의 확장 프로그램 Postman 사용의 필요성 사용자 등록을 위한 입력양식 등 UI를 아직 만들지 않았음 사용자가 입력하는 값을 서버에 전달하여 사용자 등록 동작의 성 공 여부를 테스트해야 함 Postman을 이용하여 이런 테스트를 쉽게 수행 가능

Postman을 이용한 사용자 등록 테스트 크롬에서 Postman 설치 크롬 웹스토어에서 postman 검색, 설치

Postman을 이용한 사용자 등록 테스트 (1) Post 선택 (2) API 주소 입력 (3) Headers 탭에 Content-type을 Application/json으로

Postman을 이용한 사용자 등록 테스트 (4) Body 탭 선택 (5) Raw 선택 (7) Send (6) 사용자 입력양식을 Json 형식으로 입력 (8) 서버로부터의 응답 결과  사용자 등록 성공

Postman을 이용한 사용자 등록 테스트 (9) 응답헤더 보기

Mongo shell을 이용하여 DB 확인 Mongo 명령어로 DB 접속 > Show dbs (DB 보여주기) > Use db명 (특정 DB 사용) > Show collections (테이블보기) > db.users.find().pretty() (DB 내용 보기) MongoDB 매뉴얼 참조 https://docs.mongodb.com/manual/ _id : 자동으로 생성되는 id Password: 암호화된 해쉬값이 저장됨 (bcrypt로 암호화된 해쉬값 계산 후 password 값을 덮어쓰고 DB에 저장함) - 사용자 입력 패스워드를 그대로 DB에 저장하면 안됨

MongoDB CRUD Operations Create Read Update Delete

MongoDB CRUD Operations 레코드 모두 지우기 > db.users.remove({ })