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'}); } module.exports = router; 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 설치 https://www.getpostman.com/downloads/

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({ })