Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NDD-35] Auth api 구현( 8h/5h ) #16

Merged
merged 43 commits into from
Nov 7, 2023
Merged

[NDD-35] Auth api 구현( 8h/5h ) #16

merged 43 commits into from
Nov 7, 2023

Conversation

JangAJang
Copy link
Collaborator

@JangAJang JangAJang commented Nov 7, 2023

NDD-35 Powered by Pull Request Badge

--- 작성중

Why

구글 로그인을 통한 단순 로그인만을 MVP에서 설정했다.
이를 위해서, OAuth2하나만을 이용한 회원 인증 플로우를 구현하게 되었다.
또한, 이용간에 자동적인 플로우를 위해, JWT를 쿠키로 활용해, Response에서 토큰을 재발행해야할 시 자동적으로 동작하게 넣는 방안을 모색하려고 한다.

How

기본적인 로그인의 흐름

  1. 로그인 요청을 한다.
  2. 구글 OAuth2를 통해 회원 정보를 받아온다.
  3. 이를 통한 dto를 반환한다.
  4. dto의 이메일로 회원이 존재하는지 검증한다.
    a. 만약 존재하지 않는다면 회원을 저장해준다.
  5. 회원을 통해 Access Token, Refresh Token을 생성한다.
  6. 생성한 Access Token을 헤더에 쿠키로 담아 반환한다.

Result

  1. 서비스 하나를 통해 회원이 없으면 생성한 후, 회원 정보를 반환한다.
스크린샷 2023-11-06 19 59 23
  1. 회원 정보 반환 상태
스크린샷 2023-11-06 20 01 37 - 현재 프로필 사진 링크, 기본키, 가입일자, 이메일, 닉네임(구글내의 사용자명)를 반환해준다.
  1. 회원정보를 통해 token 반환
스크린샷 2023-11-07 14 11 23
  1. 전체 디렉토리 구조
스크린샷 2023-11-07 14 11 43

Prize

jwt를 통한 로그인, 로그아웃, 토큰 재발행 기능 구현
스크린샷 2023-11-07 16 58 00
데코레이터를 통한 미들웨어 사용. 이를 통해 토큰 검증 로직의 재사용성을 확보할 수 있다.

Reference

JWT

Link

https://milk717.atlassian.net/browse/NDD-35

JangAJang and others added 30 commits November 6, 2023 14:40
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
- be fe 모두 하나의 카테고리로 관리
- dev 브랜치에 머지될때 실행
* feat: emotion ThemeProvider 추가하고 color, typography 추가

- colorChips에 있는 색상은 프로젝트에서 바로 사용하지 않습니다.
- colorChips에 있는 색상을 활용해서 color 시스템을 구성합니다.

* feat: emotion global 스타일에 resetCss 추가

* feat: emotion global 스타일에 pretendard 웹폰트로 적용

* rename: resetCss -> _global 로 이름 변경

* chore: 경로 별칭에 styles 디렉터리 추가
Co-authored-by: JangAJang <99702271+JangAJang@users.noreply.github.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
* feat: 테마 시스템에 shadow 추가
commit 5b6eac6
Author: Sumin <57657868+milk717@users.noreply.github.com>
Date:   Tue Nov 7 13:15:08 2023 +0900

    [NDD-76] 테마 시스템에 그림자 추가 (0.3 / 1h) #10

    * feat: 테마 시스템에 shadow 추가

commit fd35fdf
Author: quiet-honey <99426344+quiet-honey@users.noreply.github.com>
Date:   Tue Nov 7 12:19:13 2023 +0900

    docs: 백엔드 CI툴 구현 (#5) (#7)

    Co-authored-by: JangAJang <99702271+JangAJang@users.noreply.github.com>

commit dfc1fd9
Author: Sumin <57657868+milk717@users.noreply.github.com>
Date:   Mon Nov 6 22:25:34 2023 +0900

    [NDD-58] 테마 시스템 정의 (3h/3h) (#9)

    * feat: emotion ThemeProvider 추가하고 color, typography 추가

    - colorChips에 있는 색상은 프로젝트에서 바로 사용하지 않습니다.
    - colorChips에 있는 색상을 활용해서 color 시스템을 구성합니다.

    * feat: emotion global 스타일에 resetCss 추가

    * feat: emotion global 스타일에 pretendard 웹폰트로 적용

    * rename: resetCss -> _global 로 이름 변경

    * chore: 경로 별칭에 styles 디렉터리 추가

commit 383fb3c
Author: 이성인 <seoungin1228@gmail.com>
Date:   Mon Nov 6 16:58:38 2023 +0900

    feat: 상대 경로 설정 (#6)

commit 2cd35c0
Author: YoonHaeMin <yunhatmi@gachon.ac.kr>
Date:   Mon Nov 6 14:42:13 2023 +0900

    chore: release drafter 설정 추가 (#4)

    - be fe 모두 하나의 카테고리로 관리
    - dev 브랜치에 머지될때 실행
Co-authored-by: quiet-honey <skap0329@naver.com>
JangAJang and others added 11 commits November 7, 2023 14:04
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: quiet-honey <skap0329@naver.com>
@JangAJang JangAJang changed the title Ndd 35 [NDD-35] Auth api 구현( 8h/5h ) Nov 7, 2023
@JangAJang JangAJang added BE 백엔드 코드 변경사항 feature 새로운 기능이 추가 된 경우 labels Nov 7, 2023
* feat: element의 기본 props를 지정해주는 유틸 타입 추가

* design: Avatar 컴포넌트 생성

- theme을 이용해서 색상 정의
- 세부 디자인은 외부에서 주입할 수 있도록 구현

* feat: InputArea 컴포넌트 생성

- theme을 이용해서 색상 정의
- 세부 디자인은 외부에서 주입할 수 있도록 구현

* feat: color system추가

- 버튼 hover시 색상 추가
- 색상 값에 as const를 붙여 hove시 색상 값이 노출 되도록 설정

* feat: button 컴포넌트 생성

- theme을 이용해서 색상 정의
- 세부 디자인은 외부에서 주입할 수 있도록 구현

* feat: Box 컴포넌트 생성

- theme을 이용해서 색상 정의
- 세부 디자인은 외부에서 주입할 수 있도록 구현
* chore: msw 세팅 추가

* test: msw 실행하도록 설정

* feat: api 엔드포인트 상수화

- id가 들어가야 하는 경우 함수를 이용해 동적으로 상수 생성

* test: member api mocking 추가

* fix: api 상수에서 파라미터를 선택적으로 사용하려면 ?를 추가해야함

* test: question api mocking 추가

* test: answer api mocking 추가

* test: handler 연결해서 하나로 통합

* test: dummy endpoint설정

논의 중인 내용은 작성 하지 않음
Copy link
Collaborator

@quiet-honey quiet-honey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@JangAJang JangAJang merged commit d2ad776 into dev Nov 7, 2023
@delete-merged-branch delete-merged-branch bot deleted the NDD-35 branch November 7, 2023 08:12
Yoon-Hae-Min added a commit that referenced this pull request Nov 11, 2023
* feat: 모든 엔티티에서 상속받아 사용할 수 있는 DefaultEntity 생성

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: DefaultEntity를 상속받는 Member 객체 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 회원을 DB에 저장하고 조회하기 위한 리포지토리 모듈 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* refactor: MemberRepository를 다른 모듈에서 사용하게 exports추가

* refactor: process.env를 사용하기 위한 dotenv/config추가

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: class-validator가 전역적으로 동작하게 main.ts에 pipe 추가

* refactor: Member객체의 프로필 사진 url의 경우를 고려해 길이확장

* feat: member모듈에서 리포지토리를 가져와 사용하는 Auth 모듈 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: memberRepository를 외부에서 받아와 사용하는 auth 모듈 추가

Co-authored-by: quiet-honey <skap0329@naver.com>

* build: oauth를 위한 passport 라이브러리 추가

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: passport strategy를 통해 OAuth에서 회원 정보를 불러오는 플로우 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* refactor: 구글글 OAuth를 요청할 때, 회원의 이미지 파일과 성명 전체를 받도록 기능 수정

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: Entity의 생성 로직 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: OAuth에서 회원 존재 여부를 검증하기 위한 리포지토리 로직 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 로그인 로직 함수 추가 && 내부에 워크플로우 정리

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 회원가입을 위해서 DB 조회후 검증하는 로직 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 회원이 없을때 회원을 생성하는 로직 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 회원이 없을 isEmpty라는 validator의 디폴트 로직을 통해 검증하고 회원데이터를 반환하는 로직 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* chore: swagger가 메인 프로젝트에 실행되게 코드 추가

* chore: release drafter 설정 추가 (#4)

- be fe 모두 하나의 카테고리로 관리
- dev 브랜치에 머지될때 실행

* feat: 상대 경로 설정 (#6)

* [NDD-58] 테마 시스템 정의 (3h/3h) (#9)

* feat: emotion ThemeProvider 추가하고 color, typography 추가

- colorChips에 있는 색상은 프로젝트에서 바로 사용하지 않습니다.
- colorChips에 있는 색상을 활용해서 color 시스템을 구성합니다.

* feat: emotion global 스타일에 resetCss 추가

* feat: emotion global 스타일에 pretendard 웹폰트로 적용

* rename: resetCss -> _global 로 이름 변경

* chore: 경로 별칭에 styles 디렉터리 추가

* docs: 백엔드 CI툴 구현 (#5) (#7)

Co-authored-by: JangAJang <99702271+JangAJang@users.noreply.github.com>

* feat: JWT를 구현하기 위한 모듈 추가

Co-authored-by: quiet-honey <skap0329@naver.com>

* fix: 충돌 코드 수정

* [NDD-76] 테마 시스템에 그림자 추가 (0.3 / 1h) #10

* feat: 테마 시스템에 shadow 추가

* Squashed commit of the following:

commit 5b6eac6
Author: Sumin <57657868+milk717@users.noreply.github.com>
Date:   Tue Nov 7 13:15:08 2023 +0900

    [NDD-76] 테마 시스템에 그림자 추가 (0.3 / 1h) #10

    * feat: 테마 시스템에 shadow 추가

commit fd35fdf
Author: quiet-honey <99426344+quiet-honey@users.noreply.github.com>
Date:   Tue Nov 7 12:19:13 2023 +0900

    docs: 백엔드 CI툴 구현 (#5) (#7)

    Co-authored-by: JangAJang <99702271+JangAJang@users.noreply.github.com>

commit dfc1fd9
Author: Sumin <57657868+milk717@users.noreply.github.com>
Date:   Mon Nov 6 22:25:34 2023 +0900

    [NDD-58] 테마 시스템 정의 (3h/3h) (#9)

    * feat: emotion ThemeProvider 추가하고 color, typography 추가

    - colorChips에 있는 색상은 프로젝트에서 바로 사용하지 않습니다.
    - colorChips에 있는 색상을 활용해서 color 시스템을 구성합니다.

    * feat: emotion global 스타일에 resetCss 추가

    * feat: emotion global 스타일에 pretendard 웹폰트로 적용

    * rename: resetCss -> _global 로 이름 변경

    * chore: 경로 별칭에 styles 디렉터리 추가

commit 383fb3c
Author: 이성인 <seoungin1228@gmail.com>
Date:   Mon Nov 6 16:58:38 2023 +0900

    feat: 상대 경로 설정 (#6)

commit 2cd35c0
Author: YoonHaeMin <yunhatmi@gachon.ac.kr>
Date:   Mon Nov 6 14:42:13 2023 +0900

    chore: release drafter 설정 추가 (#4)

    - be fe 모두 하나의 카테고리로 관리
    - dev 브랜치에 머지될때 실행

* feat: token을 저장하고 access token으로 조회하는 repository 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* refactor: jwt -> token으로 모듈명 수정

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 회원의 로그인 할 때, 토큰을 생성하고, access token을 반환하는 로직 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 로그인 요청시에 토큰을 반환하도록 동작하는 동작 기능 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* refactor: 기존 토큰 응답에서 Bearer prefix를 담도록 기능 수정

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 로그인 시에 토큰을 json으로, accessToken이라는 키로 반환하도록 기능 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* docs: swagger문사화를 위한 데코레이터 추가

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 로그아웃을 위한 비즈니스 로직 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: Guard에서 사용하기 위한 jwt strategy 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 로그아웃에 대한 전체 플로우 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* style: lint 처리

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 토큰의 상황에 대한 커스텀 Exception구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 토큰 재발행을 위한 비즈니스 로직 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* feat: 토큰을 재발행해 json으로 클라이언트에 반환하는 기능 구현

Co-authored-by: quiet-honey <skap0329@naver.com>

* [NDD-75] foundation 컴포넌트 디자인 구현 (1h/1h) (#11)

* feat: element의 기본 props를 지정해주는 유틸 타입 추가

* design: Avatar 컴포넌트 생성

- theme을 이용해서 색상 정의
- 세부 디자인은 외부에서 주입할 수 있도록 구현

* feat: InputArea 컴포넌트 생성

- theme을 이용해서 색상 정의
- 세부 디자인은 외부에서 주입할 수 있도록 구현

* feat: color system추가

- 버튼 hover시 색상 추가
- 색상 값에 as const를 붙여 hove시 색상 값이 노출 되도록 설정

* feat: button 컴포넌트 생성

- theme을 이용해서 색상 정의
- 세부 디자인은 외부에서 주입할 수 있도록 구현

* feat: Box 컴포넌트 생성

- theme을 이용해서 색상 정의
- 세부 디자인은 외부에서 주입할 수 있도록 구현

* [NDD-57] MSW로 서버 mocking하기 (5h/5h) (#12)

* chore: msw 세팅 추가

* test: msw 실행하도록 설정

* feat: api 엔드포인트 상수화

- id가 들어가야 하는 경우 함수를 이용해 동적으로 상수 생성

* test: member api mocking 추가

* fix: api 상수에서 파라미터를 선택적으로 사용하려면 ?를 추가해야함

* test: question api mocking 추가

* test: answer api mocking 추가

* test: handler 연결해서 하나로 통합

* test: dummy endpoint설정

논의 중인 내용은 작성 하지 않음

---------

Co-authored-by: quiet-honey <skap0329@naver.com>
Co-authored-by: YoonHaeMin <yunhatmi@gachon.ac.kr>
Co-authored-by: 이성인 <seoungin1228@gmail.com>
Co-authored-by: Sumin <57657868+milk717@users.noreply.github.com>
Co-authored-by: quiet-honey <99426344+quiet-honey@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
BE 백엔드 코드 변경사항 feature 새로운 기능이 추가 된 경우
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants