feat: oauth2 kakao login by joonamin · Pull Request #39 · Beyond-Imagination/fienmee

joonamin · 2024-12-04T17:05:30Z

flowchart TD;
client 
kakao-auth-server
kakao-resource-server
fienmee

client <-- <1. get access token (kakao)> --> kakao-auth-server

client -- <2. request with access token (kakao)>--> fienmee

fienmee -- <3. request user info with access token (kakao)> --> kakao-resource-server

fienmee == <4. load user or register> ==> fienmee

fienmee == <5. make jwt containing user's info (fienmee)> ==> client

카카오 로그인을 추가하였습니다.
논의했던대로 네이티브 sdk 를 활용하여 access token을 받아온 다음, 저희 서버로 요청을 보내면 저희 서비스에서 사용하는 jwt로 변환하여 응답하도록 만들었습니다.
🚀 유저의 정보를 받아오는 쪽은 서버 사이드에서 수행하는 것이 적절하다고 판단하였습니다. 클라이언트단에서는 단순하게 얻은 액세스 토큰을 포함하여 fienmee server 로 보내주시면 됩니다.
claim에는 로그인한 유저의 정보가 포함됩니다.
프로토타입만 만들기 위해서 일단 refresh-token은 포함하지 않았습니다.
추후에 추가적으로 user의 정보를 얻기 위해서는 (성별, 나이 등.. ) 저희 페이지에서 새롭게 추가 정보를 입력받는식으로 구현한다면 좋을 것 같습니다. (비즈는 너무 투머치인 것 같아서요..)

notion-workspace · 2024-12-04T17:05:33Z

로그인

laggu · 2024-12-05T14:55:11Z

ci 실패했는데 확인해주세요

laggu · 2024-12-10T14:38:47Z

    "private": true,
    "dependencies": {
        "@typegoose/typegoose": "^12.9.0",
+        "@types/jsonwebtoken": "^9.0.7",


types 는 dev dependencies 로 넣어주시면 됩니다

laggu · 2024-12-10T14:58:21Z

+    public static async loadOrCreateUser(this: ReturnModelType<typeof User>, info: IUserInfo) {
+        let user = await this.findOne({ providerId: info.providerId }).exec()
+        if (!user) {
+            user = await this.create(info)
+        }
+        return user
+    }


회원가입과 로그인을 분리하는게 좋을것 같습니다

도메인 단에서의 메소드 분리만 말씀하시는것이 맞으실까요?

api 분리입니다

만약 분리를 하게 된다면, 클라이언트의 입장에서 카카오 로그인 버튼을 눌러서 실제 액세스 토큰을 받아 저희 서버로 요청을 보낼 때,

이전에 이미 회원가입이 된 유저인지

최초로 회원가입을 요청하는 유저인지
판단하는 로직을 따로 세워야합니다.

결국 사용자에게 추가적으로 요구하는 정보 (ex. 성별, 전화번호 등등..) 를 요구하는 것이 아니라면 API를 분리하는 것이 오히려 적절하지 않다고 저는 생각했습니다.
혹시 이에 대해서는 어떻게 생각하시나요? :)

회원가입을 하는 과정에서 유저에게 서비스 동의를 받아야 합니다.
지금 로직은 유저의 동의 없이 유저 정보를 저희 db 에 저장하게 됩니다

최초 유저가 로그인 시도시 회원 가입이 안되있으면 에러를 주고 회원 가입 화면으로 보내는게 좋을것 같습니다

넵 ㅎㅎ 이해했습니다 리뷰에 반영할게요!

laggu · 2024-12-10T15:05:06Z

@@ -0,0 +1,9 @@
+import { APIError } from '@/types/errors/error'
+
+export class HttpClientException extends APIError {


너무 제너럴한 이름인거 같아요.
kakao user info error 라고 해도 될것 같습니다

laggu · 2024-12-10T15:06:21Z

+export class Kakao {
+    public static async getUserInfo(payload: OAuthPayload) {
+        const { data } = await axios('https://kapi.kakao.com/v2/user/me', {
+            method: 'GET',
+            headers: {
+                Authorization: `Bearer ${payload.accessToken}`,
+                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
+            },
+        }).catch(e => {
+            throw new HttpClientException(e)
+        })
+
+        return {
+            nickname: data.kakao_account.profile.nickname,
+            provider: 'KAKAO',
+            providerId: data.id,
+        }
+    }
+}


Oauth provider 코드는 각 Provider 별 파일로 관리하는게 좋을것 같아요

넵 추후에 provider 추가시에 해당 부분도 같이 작업 진행해보겠습니다.

추후 provier 작업을 다른 사람이 할수도 있으니 지금 하는게 좋을거 같아요

laggu · 2024-12-10T15:07:53Z

@@ -0,0 +1,42 @@
+import axios from 'axios'


axios 말고 node-fetch 사용할게요
https://www.npmjs.com/package/node-fetch

혹시 이유를 여쭤봐도 될까요? 저 또한 axios 와 node-fetch를 고민했어서 의견을 구하고 싶습니다 :)

사실 큰 차이는 없습니다.
javascript 진영에서 fetch 를 택했으니 해당 라이브러리를 사용하는게 fe, be 통일과 앞으로의 지속성등의 관점에서
fetch 를 사용하는게 좋을거 같아요.
그리고 npm trends 에서도 node-fetch 가 미세하게 더 높습니다

laggu · 2024-12-10T15:14:21Z

 config()

-export const { NODE_ENV, DB_URI, DB_NAME } = process.env
+export const { NODE_ENV, DB_URI, DB_NAME, JWT_PRIVATE_KEY } = process.env


private key 는 비대칭키 알고리즘을 의미합니다.
저희는 대칭키로 쓸거니 SECRET 으로 표현하는게 맞을거 같아요

Suggested change

export const { NODE_ENV, DB_URI, DB_NAME, JWT_PRIVATE_KEY } = process.env

export const { NODE_ENV, DB_URI, DB_NAME, JWT_SECRET } = process.env

이거 수정 안됐어요

laggu · 2024-12-10T15:16:12Z

+
+    // todo: refactor this code blocks after introducing new oauth provider
+    // ==> split the code as service, and adding handler for controller logic
+    if (oauthPayload.provider === 'KAKAO') {


각 provider 별 필요한 정보를 얻어오는 middleware 와 해당 middleware 에서 얻은 정보로 jwt 를 만드는 handler 로 분리하면 될것 같습니다

넵 express middleware를 활용해서 추후에 작업 진행해볼게요!

Co-authored-by: Kuwon Sebastian Na <laggu91@gmail.com>

* @types/jsonwebtoken 패키지를 dev-dependencies로 이동

* change the name of exception which handles auth client

* provider 별 파일로 분리 * axios -> node-fetch 로 변경 * secret key 명칭 변경으로 인한 dotenv 관련 수정

* login, register 역할을 하는 API를 분리하였습니다

laggu · 2024-12-13T13:32:38Z

rebase 를 한건가요?? 코드가 꼬인거 같네요

joonamin · 2024-12-13T14:41:49Z

rebase 를 한건가요?? 코드가 꼬인거 같네요

실수로 리베이스를 잘못한 것 같아요 ㅜㅜ reflog로 다시 돌려서 리뷰 반영하였습니다!

laggu · 2024-12-14T03:48:43Z

    "private": true,
    "dependencies": {
        "@typegoose/typegoose": "^12.9.0",
+        "axios": "^1.7.9",


제거 해주세요

laggu · 2024-12-14T03:54:44Z

+    public static async loadUser(this: ReturnModelType<typeof User>, info: IUserInfo) {
+        return await this.findOne({ providerId: info.providerId }).exec()
+    }


Suggested change

public static async loadUser(this: ReturnModelType<typeof User>, info: IUserInfo) {

return await this.findOne({ providerId: info.providerId }).exec()

}

public static async findByProviderId(this: ReturnModelType<typeof User>, providerId: string): Promise<User> {

return await this.findOne({ providerId: providerId }).exec()

}

…` to `findByProviderId` and change its signiture

joonamin · 2024-12-15T11:25:57Z

@laggu 제가 리베이스하면서 리뷰주신 내용을 하나 누락했던 것 같아요! 한번만 다시 확인해주시면 감사드리겠습니다 :)

feat: oauth2 kakao login

085ad56

joonamin requested review from laggu, ninaxlee, rlooo and yuchem2 December 4, 2024 17:05

joonamin self-assigned this Dec 4, 2024

fix: update package lock file for updating outdated lock file in ci

add1210

laggu reviewed Dec 10, 2024

View reviewed changes

Comment thread apps/server/src/models/user.ts

laggu reviewed Dec 10, 2024

View reviewed changes

Comment thread apps/server/src/models/user.ts

laggu reviewed Dec 10, 2024

View reviewed changes

joonamin and others added 10 commits December 11, 2024 17:38

Update apps/server/src/models/user.ts

4e7c61c

Co-authored-by: Kuwon Sebastian Na <laggu91@gmail.com>

Update apps/server/src/config/index.ts

ef25e6b

Co-authored-by: Kuwon Sebastian Na <laggu91@gmail.com>

chore: ci (#37)

1507fc7

fix: change query string type for schedule get api (#36)

be463e8

feat: [FE] add React Query client for API state management (#38)

a52a173

feat: add validate schedule middleware (#34)

7b388f2

chore: 리뷰 반영

e13e3b7

* @types/jsonwebtoken 패키지를 dev-dependencies로 이동

chore: 리뷰 반영 - 2

95f4224

* change the name of exception which handles auth client

chore: 리뷰 반영

d757fa9

* provider 별 파일로 분리 * axios -> node-fetch 로 변경 * secret key 명칭 변경으로 인한 dotenv 관련 수정

chore: 리뷰 반영 - 3

42fd86a

* login, register 역할을 하는 API를 분리하였습니다

joonamin force-pushed the FIENMEE-85 branch from bc5de86 to 42fd86a Compare December 13, 2024 14:18

joonamin and others added 2 commits December 13, 2024 23:25

Merge branch 'develop' into FIENMEE-85

7e3f7c6

feat: user model에 provider access token, refresh-token을 저장

7746c91

laggu reviewed Dec 14, 2024

View reviewed changes

chore: remove unnecessary module in package.json and rename `loadUser…

11d06e1

…` to `findByProviderId` and change its signiture

laggu previously approved these changes Dec 15, 2024

View reviewed changes

chore: change name JWT_PRIVATE_KEY to JWT_SECRET

1912109

joonamin dismissed laggu’s stale review via 1912109 December 15, 2024 11:25

laggu approved these changes Dec 15, 2024

View reviewed changes

joonamin merged commit 23ea8d7 into develop Dec 15, 2024

joonamin deleted the FIENMEE-85 branch December 15, 2024 12:16

		@@ -0,0 +1,9 @@
		import { APIError } from '@/types/errors/error'

		export class HttpClientException extends APIError {

	export const { NODE_ENV, DB_URI, DB_NAME, JWT_PRIVATE_KEY } = process.env
	export const { NODE_ENV, DB_URI, DB_NAME, JWT_SECRET } = process.env

Conversation

joonamin commented Dec 4, 2024

Uh oh!

notion-workspace Bot commented Dec 4, 2024

Uh oh!

laggu commented Dec 5, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

laggu commented Dec 13, 2024

Uh oh!

joonamin commented Dec 13, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

joonamin commented Dec 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants