경민님이 공유해주신 oauth 로직 그림
로직 정리
- sever에게 login url 요청하기 (아마? getGithubLoginUrl,
‘백엔드 서버/github-login-url’) - 요청 시점은 login 페이지로 이동하면 바로.
- 어떤 이미 로그인한 👿가 로그인 페이지로 url 적어서 이동 못하게 막아야하겠구나…
GithubLoginUrl의 용도는 회원가입과 토큰 발급용(로그인)- 이미 OAuth app 등록 시 입력한 callback URL과 redirecturi가 다르면 에러가 남.
- server에서는 생략이 가능하지만, 캡쳐본에 나온 것처럼
‘if provided, the redirect URL’s host and port must exactly match the callback URL. The redirect URL’s path must reference a subdirectory of the callback URL.’
1) 회원의
refreshtoken이 만료되면, 로그인 한게 풀려있음 ⇒ 메인이나 매칭 서비스를 이용하면 비회원으로 떠야함 ⇒ github 로그인 페이지로 redirect해서
getGithubLoginUrl을 유도해야한다 2) 회원가입 페이지가 스킵 되고, main 페이지로 이동한다. isUserAvailable로 가능
현재 callback URL = localhost:3000/signup 인데, 수정 필요.
(dev 환경에서 페이지는 정상적으로 변경되지만, 도메인이 이렇게 장문의 에러 메세지를 띄움. + 배포 환경에서는 페이지가 어떻게 나올지 아직 모름)
아래 공식 문서 설명을 보아 callback URL을 어디로 설정할지가 더 중요한 것 같음. (redirect uri는 안써도 되는데 쓸거면 callback url이랑 같아야한다고 하니까)
결과적으로, 서버와 클라이언트 redirect uri를 쓸 때 callback URL이랑 다르면 에러는 나타난다!
- server에게 받은 Login url을 사용자가 클릭하게 하기
- LoginUrl은 만들어졌는데 10분 이상 클릭안하고 login 페이지에 머무르면?
- url 만료 시간이 있는지 확인!!
- (회원 가입하지 않은) 인증되지 않은 사용자인 경우 ⇒ signup 페이지로 push (isUserAvailable로 분기)
- 클릭하고, accesstoken이 성공적으로 발급되면
- session storage에 accesstoken 저장하고, user 정보 request
- 그럼 여전히 회원가입에 필요한 정보를 입력하도록 signup 페이지 이동을 제어해야 하는데, 가능한가?
- 👿가 signup 페이지에서 벗어날 수 있는 경우: 뒤로가기?
- 👿가 직접 url을 변경하여 다른 페이지로 이동한다.
- 이걸 막기 위해서라도 next.js redirects 설정 필요할듯함. (signup 페이지에서 그 어디에서도 이동 못하게 해주마…)
- 👿가 회원가입 페이지에서 브라우저 창을 닫는다….
와 이걸 위해서라도 sessionstorage 써야하나?? - (토큰이 만료된) 인증된 사용자의 경우 ⇒ 재로그인 유도(경고문, 로그인 페이지로 이동, 메인 페이지의 자기 프로필 사진 안보임 등) ⇒ 사용자가 버튼 클릭 ⇒ github 창 ⇒ 1. github 로그인이 풀린 유저, github 재 로그인하고 메인페이지로 이동 2. github 이미 로그인된 유저 바로 메인페이지로 이동
- 클라이언트 상에서 회원과 비회원의 로그인 클릭 시 차이점
(자체 서버용) accesstoken, refreshtoken 만료 기간이 있다. ⇒ 서버가 주는 token 만기 기간과 cookie expires 맞추기
accessToken: 1시간 // const expireDate = 1000 * 60 * 60; refreshToken: 14일 // 따로 설정안해도 됨.
뒤로가기 막기를 못하면..?
그럼 cookie에 있는 token을 제거해야하나?
⇒ 회원가입을 다 기입하지 않으면(final step에서 완료를 누르지 않으면) signup request 요청이 안들어가서 user data에 추가되지 않을테니까 다시 회원가입 창을 기입해야함. (isUserAvailbale이 false)
⇒ accesstoken을 로그인 버튼 눌렀을때에만 session에 잠시 저장하고, 완료 버튼 누르면 session에 있는거 삭제하고 cookie에 저장하기
⇒ 토큰 발급 (accessToken, refreshToken 둘 다 발급)
⇒ axios, interceptors로 중간에 만료된 토큰이면 자동 login으로 redirect로 이동하게 설정하기
회원 | 비회원 |
메인으로 이동해야됨 | signup 페이지로 이동해야함 |
cookie에 있는 refreshtoken이 만료됨 | refreshtoken이 없음 |
isUserAvailable이 true | isUserAvailable이 false |
