STORIFY (0205-0206) - kakao, google 로그인 추가

목표: 회원가입을 쉽게 만들자.

 

- 사용자가 회원가입 시 쉽게 할 수 있도록 username과 password만 받고 있음

- 로그인 후 email, nickname update시 중복확인 해야 함

 

- kakao, google 로그인 추가하기.

kakao에서 어떤 정보를 받아서 저장해야 할까

storify에서는 userId과 비밀번호만 입력해도 회원가입이 가능하다. 책을 만들면 작성자가 userId으로 나온다.

kakao에서 현재 받아올 수 있는 정보는 nickname과 프로필 이미지. 필요한 정보를 가져와 auth.service에서 회원정보를 저장한 후 이후 다른 기능을 사용할 때는 우리의 토큰을 사용해 유저를 확인한다. 

 

kakao에서는 아래 보이는 것처럼 토큰을 사용해 유저 정보를 가져올 수 있게 되어있다. 

      const response = await axios.get('https://kapi.kakao.com/v2/user/me', {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });

google은 테스트 100명 제한과 신청을 해야 사용할 수 있기 때문에 테스트가 되는 것만 확인하고 우선 사용은 안 할듯하다. 

 

----------------------------------------------------------------

 

 

이전 작성자이름이 userId로 나왔다. userId -> nikname으로 나오게 수정한 후, 사용자가 회입가입할 때 입력한 userId를 nickname에 넣어두고 사용자가 nickname을 수정할 수 있게 만들었다. 이 과정 중 이전에 회원가입한 유저가 작성한 동화와 정보가 맞지 않아 프런트에서 정보를 불러올 때 문제가 생기기도 하였다. 처음에 schema를 어떻게 만드는지가 얼마나 중요한 작업인지 알 수 있었다. 

 

지금까지 만든 프로젝트 구조

.
├── ai
│   ├── ai.controller.spec.ts
│   ├── ai.controller.ts
│   ├── ai.module.ts
│   ├── ai.service.spec.ts
│   ├── ai.service.ts
│   └── dto
├── app.controller.spec.ts
├── app.controller.ts
├── app.module.ts
├── app.service.ts
├── auth
│   ├── auth.controller.spec.ts
│   ├── auth.controller.ts
│   ├── auth.module.ts
│   ├── auth.service.spec.ts
│   ├── auth.service.ts
│   ├── auth_test.http
│   ├── dto
│   ├── guards
│   └── strategies
├── books
│   ├── books-test.http
│   ├── books.controller.spec.ts
│   ├── books.controller.ts
│   ├── books.module.ts
│   ├── books.repository.ts
│   ├── books.service.spec.ts
│   ├── books.service.ts
│   ├── dto
│   └── schema
├── filter
│   └── GlobalExceptionFilter.ts
├── friendReqs
│   ├── dto
│   ├── friendReqs.controller.spec.ts
│   ├── friendReqs.controller.ts
│   ├── friendReqs.module.ts
│   ├── friendReqs.repository.ts
│   ├── friendReqs.service.spec.ts
│   ├── friendReqs.service.ts
│   └── schema
├── friends
│   ├── dto
│   ├── friends.controller.spec.ts
│   ├── friends.controller.ts
│   ├── friends.module.ts
│   ├── friends.repository.ts
│   ├── friends.service.spec.ts
│   ├── friends.service.ts
│   └── schema
├── mail
│   ├── dto
│   ├── mail.controller.spec.ts
│   ├── mail.controller.ts
│   ├── mail.module.ts
│   ├── mail.service.spec.ts
│   └── mail.service.ts
├── main.ts
├── noti
│   ├── dto
│   ├── noti.gateway.spec.ts
│   ├── noti.gateway.ts
│   ├── noti.module.ts
│   ├── noti.service.spec.ts
│   ├── noti.service.ts
│   └── schema
├── storages
│   ├── dto
│   ├── storages-test.http
│   ├── storages.controller.spec.ts
│   ├── storages.controller.ts
│   ├── storages.module.ts
│   ├── storages.service.spec.ts
│   └── storages.service.ts
├── stories
│   ├── dto
│   ├── schema
│   ├── stories.controller.spec.ts
│   ├── stories.controller.ts
│   ├── stories.module.ts
│   ├── stories.repository.ts
│   ├── stories.service.spec.ts
│   └── stories.service.ts
├── swagger.config.ts
├── telegram
│   ├── dto
│   ├── telegram.controller.spec.ts
│   ├── telegram.controller.ts
│   ├── telegram.module.ts
│   ├── telegram.service.spec.ts
│   └── telegram.service.ts
├── users
│   ├── dto
│   ├── schema
│   ├── users.controller.spec.ts
│   ├── users.controller.ts
│   ├── users.module.ts
│   ├── users.repository.ts
│   ├── users.service.spec.ts
│   └── users.service.ts
└── utils
    ├── utils.module.ts
    └── utils.service.ts

 

 

 

작업정리

 

1. 회원가입 프로세스 최적화:

- 사용자의 편의성을 위해 회원가입 시 username과 password만 받도록 설정하였습니다. 이후 로그인 후에 email과 nickname을 업데이트 할 수 있도록 하였습니다.

 

2. 소셜 로그인 기능 추가:

- Kakao 로그인 기능을 추가하였습니다. Kakao에서 제공하는 정보를 활용하여 사용자의 회원정보를 저장하고, 우리의 토큰을 사용하여 유저를 확인할 수 있도록 하였습니다.

 

3. 프로젝트 구조 개선: - 기존 프로젝트의 구조를 개선했습니다. 이 과정에서 schema 생성의 중요성을 인식하게 되었습니다.

 

4. 사용자 아이디 -> 닉네임으로 변경:

- 작성자의 이름이 사용자 아이디에서 닉네임으로 나오도록 수정하였습니다. 사용자가 회원가입 시 입력한 아이디를 닉네임에 넣어두고, 수정할 수 있게 만들었습니다.