[FE] GitHub OAuth 로그인/회원가입 #169
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- OAuth 흐름 변경. - Server가 아닌 Client가 GitHub OAuth Client로 등록해서 OAuth시작. - Client는 GitHub으로부터 code을 받고 Server로 전달.
- GitHubLoginButton 클릭시 GitHub authorization 화면으로 이동. - Callback URL로 배포 주소 (https://fe-w4.d2kit8rai80g4y.amplifyapp.com/)로 설정. - useEffect로 URL params에 있는 `code`을 꺼내어 서버로 보냄. - Server 응답(200 || 202)에 따라 GitHub을 통한 최초 접속이라면 사용자로부터 username을 받고 제출해야 성공적으로 회원가입 및 로그인.
youzysu
approved these changes
Aug 18, 2023
There was a problem hiding this comment.
수고하셨습니다! 🙏 슬랙에 공유해주신 흐름 기록용으로 같이 작성할게요!
React —화면 이동—> GitHub (사용자 승인)
GitHub —code—> React
React —code—> Java (GET "/api/auth/login/oauth/github?code=ASDADS")
Java —code—> GitHub
GitHub —GitHub accessToken—> Java
Java —GitHub accessToken —> GitHub
GitHub —user info—> Java
Java —{ accessToken, user } || { email }—> React
- 200: 바로 로그인 (accessToken, user 반환)
- 202: 사용자가 username을 등록해야함 (email 반환)
React —username, email—> Java (POST /api/auth/signup/oauth)
- 200: 바로 로그인 (accessToken, user 반환)
GitHub 로그인 버튼 클릭 시 gitHubCredentialsLink로 이동
-> 사용자 승인 (code 생성)
-> getGitHubLogin 요청: UrlParams의 code
-> status: 200이면 바로 로그인, status: 202(최초 로그인)이면 response에 gitHub 로그인 email
-> email 상태로 두고 email이 있으면 username 받는 화면 보여준다.
-> 입력받은 username과 기존 email로 username post 요청(postOAuthUsername)
-> 성공 시 response로 받은 정보로 login 처리 후 메인 화면으로 이동
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issues
What is this PR? 👓
Key changes 🔑
useEffect로 url params에code여부를 확인해서 있으면 서버로 보내는 방식입니다.To reviewers 👋
fe-w4브랜치를 AWS Amplify에 배포해놨고 (이 PR이 아직 fe-w4에 없고) 배포된 앱을 GitHub OAuth Client로 등록해놔서 개발환경에서 시도는 못해봤습니다. 그리고 서버 SSL Error 해결되고 확인 가능할것 같습니다.fe-w4에 머지하고 데모전 오전에 얼른 확인해봐야할 것 같습니다.