MEAN Stack Front to Back (MEANAuthApp)

Presentation on theme: "MEAN Stack Front to Back (MEANAuthApp)"— Presentation transcript:

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

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

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

4 사용자 모델 생성 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 }, { 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 참조 UserSchema를 외부에서 User라는 이름으로 사용할 수 있도록 모델을 생성하고 Export getUserById 라는 함수를 외부에서 사용할 수 있도록 선언 (DB에서 id로 사용자 검색) getUserByUsername 라는 함수를 외부에서 사용할 수 있도록 선언 (DB에서 username으로 사용자 검색)

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

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

7 사용자 등록 기능 추가 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, req.body. , 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라는 함수를 만들어야 함)

8 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.

9 사용자 등록 기능 추가 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에 저장

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

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

12 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을 이용하여 이런 테스트를 쉽게 수행 가능

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

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

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

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

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

18 MongoDB CRUD Operations
Create Read Update Delete