분류 전체보기
-
Change passwordProject using node.js/Cloning Youtube 2020. 8. 28. 13:29
userRouter.js getEditProfile은 사용자에게 보여지는 editProfile 페이지를 보여주는 랜더링 작업을 한다. 그렇기 때문에 get 방식으로 보낸다. postEditProfile은 사용자가 정보를 수정하고 submit했을 때 정보를 처리하는 로직이다. 정보는 url 파라미터에 노출 되면 안 되고 수정되는 정보는 post 방식으로 제출해야 하기 때문에 post 방식으로 보낸다. userController.js editProfile 페이지를 랜더링해서 보여준다. 사용자로부터 newPassword와 verifyPassword를 받고 두 개의 값이 다르면 http status code로 400번을 보내고 다시 password를 입력 하도록 한다. 두 개의 값이 같으면 passport-lo..
-
editProfileProject using node.js/Cloning Youtube 2020. 8. 28. 07:49
userRouter.js getEditProfile은 사용자에게 보여지는 editProfile 페이지를 보여주는 랜더링 작업을 한다. 그렇기 때문에 get 방식으로 보낸다. postEditProfile은 사용자가 정보를 수정하고 submit했을 때 정보를 처리하는 로직이다. 정보는 url 파라미터에 노출 되면 안 되고 수정되는 정보는 post 방식으로 제출해야 하기 때문에 post 방식으로 보낸다. userController.js profile을 수정하려는 사용자의 id 값을 받아오고 editProfile 페이지를 랜더링해서 보여준다. 사용자로부터 name, status와 file.path(avatarUrl)를 받아온다. User.findByIdAndUpadte를 사용해서 해당 id 값의 정보를 수정한다..
-
CSPProject using node.js/Cloning Youtube 2020. 8. 27. 14:03
소개 CSP는 컨텐츠 보안 정책으로, http header에 Content-Security-Policy를 설정하여 XSS(Cross-site scripting) 공격 및 기타 교차 사이트 인젝션을 예방한다. 이 기능은 helmet에 내장되어 있다. helmet을 사용하는 우리는 kakao와 github로부터 avatar를 가져올 수가 없다. CSP로 인해 신뢰할 수 없는 url이라고 인식하여 kakao와 github로부터 오는 데이터는 load하지 않기 때문이다. error의 내용을 살펴보면 Refused to load the image 'URL' because it violates the following Content Security Policy directive: "img-src 'self' dat..
-
passport - kakao loginProject using node.js/Cloning Youtube 2020. 8. 27. 13:49
설치 #npm install passport-kakao Kakao API 설정 https://developers.kakao.com/ 에서 애플리케이션을 등록 해야한다. '내 애플리케이션'에 들어가자. '애플리케이션 추가하기' 선택 앱 이름과 회사 이름 등록 REST API키를 복사해서 .env 파일에 KAKAO_ID로 저장한다. 좌측 메뉴에 플랫폼을 클릭한다. Web 플랫폼을 선택한다. 당신의 서버의 IP나 domain 주소를 입력한다. 좌측 메뉴에 제품 설정에서 카카오 로그인을 클릭한다. 활성화 설정에서 상태를 ON으로 한다. Redirect URI를 등록한다. 주소/auth/kakao/callback으로 redirect URI를 설정한다. 좌측 메뉴에 제품설정 -> 동의 항목을 선택한다. 자신의 앱에..
-
Passport - Github loginProject using node.js/Cloning Youtube 2020. 8. 27. 08:49
설치 #npm install passport-github Github API 설정 Github 개발자 OAuth 설정에 들어가서 New OAuth App을 선택한다. 빈 칸을 채우고 제출한다. 제출을 하고 나면 고유의 Client ID와 Client Secret을 받게 되는데 이 값을 .env 파일에 저장하자. 절대로 노출되면 안 된다. 그렇기 때문에 나도 지워서 게시글을 올린 것이다. Github Strategy 설정 모든 Strategy는 아래 그림과 거의 유사하다. clientID와 Secret을 얻어내고 callbackURL에 회원 가입 정보를 전송하는 방식이다. 위에 코드를 나의 서버에 customizing 하면 다음과 같이 된다. passport.js userController.js에 선언한 ..
-
ProfileProject using node.js/Cloning Youtube 2020. 8. 25. 13:36
서론 사용자가 로그인을 하면 자신의 profile을 볼 수 있는 페이지를 만들 것이다. 본론 navigator를 보면 loggedUser에 따라 Join & Login과 Upload & Profile & Logout을 보여준다. loggedUser 변수는 아직 선언하지 않았다. 이 변수는 middleware를 통해서 전달한다. 업로드 된 아바타를 불러오기 위해서 app.js에 다음과 같이 uploads를 추가해주자. express.static은 이미지, CSS 파일 및 JavaScript 파일과 같은 정적 파일을 제공한다. 인자로는 디렉토리 이름을 전달한다. Router globalRouter.js에 다음 코드를 추가한다. getMe는 userController.js의 함수다. globalRouter.g..
-
login - controllerProject using node.js/Cloning Youtube 2020. 8. 24. 12:49
join을 통해서 저장한 사용자 정보로 이제 로그인을 해야 한다. 웹 애플리케이션에 로그인을 하면 서버는 세션 키를 준다. 이 세션 키를 가지고 있음으로써 로그인이 유지가 된다. 만약 내가 브라우저를 다 끄고 다시 키 애플리케이션에 접속하면 키 값은 소멸되어서 다시 로그인을 해야 한다. 이러한 기능을 구현하기 위해서 설치할 두 가지가 있다. #npm install express-session connect-mongo express-session은 cookie-password를 생성하고 connect-mongo는 쿠키 값을 mongoDB에 저장하게 한다. app.js import session from "express-session"; import MongoStore from "connect-mongo";..