oauth flow 설계

[white-gyu]

📕 개요

oauth flow를 기술합니다.

📐 Sequence Diagram

sequenceDiagram
autonumber
actor user
participant client(= cupping-note-expo)
participant server(= cupping-note-server)
participant sns-auth-server

user ->> client(= cupping-note-expo): 카카오/애플 로그인 요청
client(= cupping-note-expo) ->>+sns-auth-server: authorization code 요청
sns-auth-server ->> user: 동의 및 로그인
user ->> sns-auth-server: authorization code 발급 요청
sns-auth-server ->>- client(= cupping-note-expo): authorization code 발급
client(= cupping-note-expo) ->> server(= cupping-note-server): authorization code로 회원가입/로그인 요청
server(= cupping-note-server) ->> sns-auth-server: authorization code로 access/refresh token 발급 요청
sns-auth-server -->> server(= cupping-note-server): access/refresh token 발급
server(= cupping-note-server) ->> server(= cupping-note-server): 토큰 정보 조회/검증 및 로그인 완료
server(= cupping-note-server) ->> sns-auth-server: 토큰으로 사용자 정보 조회 요청
sns-auth-server -->> server(= cupping-note-server): 요청 검증 및 처리
alt 신규 사용자인 경우
server(= cupping-note-server) -->> client(= cupping-note-expo): 회원 가입 처리
else 기존 회원인 경우
server(= cupping-note-server) -->> client(= cupping-note-expo): 로그인 처리
end
client(= cupping-note-expo) ->> user: 로그인 완료

1. 카카오/애플 로그인 요청

사용자가 카카오, 애플 로그인을 요청합니다.

2. authorization code 요청

access/refresh token 발급을 위한 authorization code 발급을 요청합니다.

3. 동의 및 로그인

카카오나 애플 로그인 동의 화면을 호출하고 사용자 동의를 구합니다. 동의 화면은 앱에 설정된 동의 항목에 대해 사용자에게 본 서비스에 정보를 제공하는 등의 동의를 구합니다.

4. authorization code 발급 요청

사용자 동의 이후 authorization code 발급 요청합니다.

• 카카오 authorization code 발급 요청 API

5. authorization code 발급

위 요청한 API 응답값을 통해 authorization code를 발급 받습니다.

6. authorization code로 access/refresh token 발급 요청

authorization code로 access/refresh token 발급 요청합니다.

• 카카오 access/refresh token 요청 API

7. access/refresh token 발급

위 요청한 API 응답값을 통해 access/refresh token을 발급 받습니다.

8. 토큰 정보 조회/검증 및 로그인 완료

토큰을 검증하고 이후 로그인을 완료합니다.

9. 토큰으로 사용자 정보 조회 요청

access token을 통해 이메일, 닉네임과 같은 사용자 정보를 요청합니다.

• 카카오 사용자 정보 요청 API

10. 요청 검증 및 처리

카카오 서버에서 요청을 검증하고 처리하여 사용자 정보를 응답합니다.

11. 회원 가입 처리

본 서비스에 가입되지 않은 신규 사용자인 경우 회원 가입으로 처리합니다.

12. 로그인 처리

본 서비스에 가입된 기존 사용자인 경우 로그인으로 처리합니다.

13. 로그인 완료

로그인을 완료하여 사용자에게 알립니다. 이 때 userId와 email을 Jwt에 담아 전달합니다.

📌 참고 자료

• 카카오 로그인 docs

[white-gyu]

13. 로그인 완료

로그인을 완료하여 사용자에게 알립니다. 이 때 userId와 email을 Jwt에 담아 전달합니다.

jwt 유효 기간 = 1달 로 처리하였습니다. @JooJaeSeong @bhyoo99 @lcw729 @bahar-j 이에 대한 의견 부탁드려요 🙏

---

참고)

jwt를 header로 담는 API는 아래와 같이 보내주시면 됩니다..!

curl --location --request GET 'http://localhost:8080/api/me' \
--header 'Authorization: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoyLCJyb2xlcyI6WyJVU0VSIl0sImlzcyI6ImN1cHBpbmdfbm90ZSIsImV4cCI6MTY3OTE1MjExNiwiaWF0IjoxNjc2NTYwMTE2LCJlbWFpbCI6ImhhbWEyMjI5NjY4QG5hdmVyLmNvbSJ9.GG2aWZ3c5s5I3LZRHbt1qNybPFAO5a7UcPMkw7imr2xjfyj3x2F5mR8uBne0hiZytf_hYml2gU3dhEzWwgI9uw'

[white-gyu]

https://github.com/cupping-note/cupping-note-server/pull/14/commits/8f13f5615c2e35cc8b727864f7c496b49b613bef 커밋을 통해 5번 authorization code 받는 대상이 server(= cupping-note-server) → client(= cupping-note-expo)로 변경되었습니다.

[white-gyu]

서버에서 userId 가져오는 방법

controller 내 아래와 같이 표현

@GetMapping
public ResponseEntity<String> getUser(@AuthenticationPrincipal final JwtAuthentication authentication) {
   return ResponseEntity.ok(authentication.userId);
}