본문 바로가기

분류 전체보기

 (157)
비밀번호 변경 사용자가 비밀번호를 변경하는 부분을 구현했다. 일단 프로필을 수정하는 페이지에 비밀번호를 변경하는 페이지로 연결해주는 anchor태그를 사용해주었다. 아직 비밀번호 변경 페이지가 없으므로, change-password.pug를 만들어준다. extends ../base block content if errorMessage span=errorMessage form(method="POST") input(placeholder="이전 비밀번호",type="password",name="oldPassword") input(placeholder="새 비밀번호",type="password",name="newPassword") input(placeholder="새 비밀번호 확인",type="password",name="n..
사용자 프로필 수정 로그인 한 사용자에 한해서 프로필을 수정 할 수 있는 페이지를 만든다. 이에 맞는 라우터들과 컨트롤러들을 만들어준 후, 첫째로 템플릿을 만들어준다. extends base block content form(method="POST") input(placeholder="이메일",type="email",name="email",required,value=loggedInUser.email) input(placeholder="이름",type="text",name="name",required,value=loggedInUser.name) input(placeholder="사용자 이름",type="text",name="username",required,value=loggedInUser.username) input(pla..
카카오로 로그인 하기 카카오로 로그인 하는 기능은 혼자 구현해보았다. 큰 흐름은 깃허브로 로그인 하는 것과 똑같다. 일단 카카오 개발자 사이트에 들어가서 깃허브 OAuth app 만들었던것과 같이 내 어플리케이션을 만들어주었다. callback 되는 사이트는 깃허브와 비슷하게 /users/kakao/finish 로 하였다. export const startKakaoLogin = (req, res) => { const baseUrl = "https://kauth.kakao.com/oauth/authorize"; const config = { client_id: "내가 발급받은 클라이언트 아이디", redirect_uri: "http://localhost:4000/users/kakao/finish", response_type: ..
깃허브로 로그인 하기 (4) 이전 글에서 확인 했듯이, 유저의 email이 비공개였다. 나는 유저의 이메일이 필요하므로 이를 알아내는 코드를 작성해보았다. Github API에 가서 내가 필요한 것들을 찾아보았다. 내가 scope에 작성했던 user:email 에 해당하는 api 중에 이메일을 보여주는 것은 다음과 같다. GET https://api.github.com/user/emails 따라서 유저의 데이터를 얻어오는 과정과 똑같이 액세스토큰을 사용하여 변수에 저장해준다. const emailData = await ( await fetch(`${apiUrl}/user/emails`, { headers: { Authorization: `token ${access_token}`, }, }) ).json(); 이렇게 한 후, emai..
깃허브로 로그인 하기 (3) 1. 유저는 깃허브 신원을 확인하기 위해서 깃허브로 연결된다. 2. 유저는 깃허브로부터 내 사이트로 다시 연결된다. 3. 유저의 access token 으로 유저의 정보에 접근할 수 있게된다. ---------------------------------------------------------------------------------------------------------------------- 3. access token 을 가지고 api에 접근하기. 코드를 변환하여 얻은 액세스 토큰을 가지고 api에 접근하여, 유저의 정보를 알아보는 코드는 다음과 같다. if ("access_token" in tokenRequest) { const { access_token } = tokenRequest; c..
깃허브로 로그인하기 (2) 1. 유저는 깃허브 신원을 확인하기 위해서 깃허브로 연결된다. 2. 유저는 깃허브로부터 내 사이트로 다시 연결된다. 3. 유저의 access token 으로 유저의 정보에 접근할 수 있게된다. ---------------------------------------------------------------------------------------------------------------------- 2. 깃허브로부터 다시 사이트로 연결하기 OAuth 를 만들 때, Authorization callback URL 칸에 깃허브로 부터 다시 나의 사이트로 연결될때, 어느 곳으로 연결해줄건지를 써야 한다. 나는 http://localhost:4000/users/github/finish 를 썼고, 이에따른 라..
깃허브로 로그인 하기 (1) 여러 웹사이트에 로그인 하다보면, 소셜아이디로 로그인하는 부분을 볼 수 있다. 깃허브로 로그인하는것은 대표적인 예시이다. 깃허브로 로그인 하기를 구현하기 위해서는 일단 github.com/settings/apps 에 들어가서 new OAuth app을 만들어야 한다. 만든 후의 과정을 설명하겠다. 일단 소셜아이디로 로그인 하는 과정을 모두 비슷한 flow를 가진다고한다. 이는 다음과 같다. 1. 유저는 깃허브 신원을 확인하기 위해서 깃허브로 연결된다. 2. 유저는 깃허브로부터 내 사이트로 다시 연결된다. 3. 유저의 access token 으로 유저의 정보에 접근할 수 있게된다. ----------------------------------------------------------------------..
세션에서의 비밀 값 세션에서 secret값은 전에도 설명했듯이 다른 사람이 알아서는 안되는 값이다. 또한 몽고url 부분도 다른사람이 알아서 좋을 것은 없다. 특정 사람이 해당 주소를 통해 내 디비의 사람들의 정보를 알아낼 수 있기 때문이다. 따라서 환경변수를 설정하여 해당 코드를 비밀로 숨긴다. 일단 .env 파일을 만들어주고, 우리가 비밀로 숨기고 싶은 코드를 여기에다가 작성한다 나는 세션의 secret 과 몽고 url을 숨기려고 했으므로 두가지만 여기에 작성해주었다. 그리고 깃헙에 올리면 안되기 때문에 .gitignore에 .env도 추가해준다. 환경변수는 관습적으로 모두 대문자로 작성한다고 한다. COOKIE_SECRET =fh2hgfeu맘대로쓰기321ddw123u DB_URL=mongodb://어쩔티비7/저쩔티비 ..

티스토리툴바