Projects/유튜브 클론코딩(73)
-
[유튜브 클론코딩] 7.3 Adding Creator to Video / 7.4 Protecting Video Routes
7.3 Adding Creator to Video 이제 비디오를 업로드한 사람을 추가해볼 것이다. 일단 그 전에 업로드한 비디오는 슬프지만 다 지워본다. console > mongo - help - use mytube - db.videos.remove({}) Video.js에서 creator 항목을 추가해주기 import mongoose from "mongoose"; const VideoSchema = new mongoose.Schema({ fileUrl: { type: String, required: 'File URL is required' }, title : { type: String, required : "Title is required" }, description : String, views:{ ..
2021.03.15 -
[유튜브 클론코딩] 7.0 ~ 7.2
7.0 User Profile 프로필 페이지의 스타일링을 한다. 프로필 수정 버튼과 비밀번호 변경 버튼을 만든다. 7.1 Edit User Profile export const getEditProfile = (req,res) => res.render("editProfile", {pageTitle: "Edit Profile"}); export const postEditProfile = (req, res) => { }; ↑ userController.js userController에서 editProfile을 getEditProfile과 postEditProfile로 만든다. userRouter.get(routes.editProfile, onlyPrivate, getEditProfile); userRouter..
2021.03.15 -
[유튜브 클론코딩] 6.10 ~ 6.12 카카오로 로그인하기(페이스북x)
원래 해당 강의에서는 페이스북으로 로그인하는 방법을 알려주지만 페이스북은 보안이 강화되어있어서 여러가지 인증을 하는데 매우 불편하고 어려움이 있다. 우리 사이트는 http인데 페이스북에서는 https 방식의 사이트만 허용하고 있으므로 localtunnel이라는 것을 설치하여 우리의 사이트를 임시로 https처럼 보이게 하더라도 막혀있다. 그래서 카카오로 로그인 방식을 구현했다. Kakao Developers 접속하여 로그인 해주기 developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 내 애플리케이션 > 애플리케이..
2021.03.12 -
[유튜브 클론코딩] 6.9 Recap and User Profile
6.9 Recap and User Profile 인증(Authentication)에 대해 정리하기 📌 local 방식(username / password) username과 password를 post 방식으로 전달하고 우리가 설치해준 플러그인인 mongoose가 자동으로 체크를 해준다. 만약 password가 맞으면 passport에게 맞다고 알리고 쿠키를 생성 📌깃허브 방식 .social-login button.social-login--github a(href=routes.gitHub) span i.fab.fa-github |Continue with Github button.social-login--facebook span i.fab.fa-facebook |Continue with Facebook 깃허..
2021.03.12 -
[유튜브 클론코딩] 6.8 Github Login Part.3
6.8 Github Login Part.3 githubLoginCallback 함수 수정하기 export const githubLoginCallback = (accessToken, refreshToken, profile, cb) => { console.log(accessToken, refreshToken, profile, cb); }; 지난시간에 깃허브 로그인 누르고 콜백함수로 돌아올 때 console에 주어진 정보를 확인만 했었다. 이제 그것을 수정하려고 한다. 사실 accessToken, refreshToken이런건 필요 없고 profile에 있는 github ID, 이메일, 이름, 그리고 아바타(프로필 사진) 이게 중요하다! 그리고 여기서 cb 함수는 passport에서 제공된 callback 함수..
2021.03.11 -
[유튜브 클론코딩] 6.7 Github Login Part.2
6.7 Github Login Part.2 사용자를 깃허브로 보낼 함수 작성하기(githubLogin) 위에서는 사용자가 깃허브에서 돌아왔을 때 실행할 함수를 작성한 거고 사용자를 깃허브로 보낼 함수도 작성해야 할 것이다. userController에서 하나를 더 생성한다. export const githubLogin = passport.authenticate('github'); ↑ userController.js 이전에 local방식으로 인증했던 거랑 똑같은 코드이다. 공식 문서를 보면 이렇게 나와있는데 즉 누군가 저 루트로 접속하면 passport에서 github 방식으로 사용자를 인증해주겠다는 의미이므로 이걸 위한 루트도 만들어야 한다. 깃허브 로그인을 위한 루트 만들기 routes.js에서 먼저 ..
2021.03.11