20210218 2일차

오늘 한일

1. 프로젝트 아이디어 선정 → 그림일기
2. 팀장, 팀 이름, 프로젝트 이름 → 팀 이름: summer vacation 프로젝트 이름: RoyalDiary
3. 프로젝트 기획 및 범위 설정 → 완료(wiki)
4. 시스템 아키텍처 설계 → figma 완료
5. 스키마 작성 -> 완료. 수정 및 보완 필요
6. API 작성 -> 완료. 수정 및 보완 필요

---

담당 파트

• 첫화면: 로그인 API, 로그아웃API, 회원가입이동, 소셜로그인 구현(모달창) => OAuth, 페이지 이동 시 CSS 효과
• 사이트 메뉴얼: 디자인 + GIF
• 일기쓰기1: 그림판 적용, 다그렸다버튼 누르면 multer API.
• 일기쓰기2: 깍두기 칸에 글쓰기 구현. 다썼다버튼 누르면 (이미지 url + 날짜 + 날씨 + 제목 + 기분 + 장소) 서버에 전송 API
• 장소찾기(모달창): 카카오맵 API 구현.
• 입학하기: 회원가입 API 구현
• 반응형 웹사이트 구현

---

OAuth (카카오)

 

출처: developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

카카오 로그인 연동 FLOW

 

출처: https://daddyprogrammer.org/post/1012/springboot2-rest-api-social-login-kakao/

 

Social 로그인

카카오로부터 access token 을 받아온다.

서버 로그인

1. 카카오 AccessToken 으로 서버에 로그인 요청

2. 서버는 이 AccessToken 으로 카카오에 유저정보를 요청한다.

3. 해당 유저정보로 유저테이블을 확인하고,

  1) 비 가입자인 경우 로그인 실패처리(회원가입 페이지로 전환

  2) 기 가입자일 경우 JWT 토큰(서버에서 만든)을 발급한다.

회원가입

1. 카카오 AccessToken 으로 서버에 회원가입을 요청

2. 서버는 이 AccessToken 으로 카카오에 유저정보를 요청한다. 

3. 해당 유저정보로 유저테이블을 확인하고

  1) 기 가입자인 경우 가입 실패처리

  2) 비 가입자일 경우 신규 가입 처리 후 JWT 토큰(서버에서 만든)을 발급한다.

 

유저 테이블

출처:

okky.kr/article/433730

OKKY | sns로그인 db관리 어떻게 하나요?

firstblog912.tistory.com/8

 

백엔드에서 프론트에서 저장해둔 카카오 사용자 토큰을 이용하여 카카오에 사용자 정보를 요청한다.

email, kakao_id 를 받아 오는데,

 

접속한 카카오 아이디가 데이터베이스에도 존재하는지 확인하고, 존재한다면 카카오 아이디를 갖고 있는 유저 객체를 갖고온다. 아이디 정보로 토큰을 발행하고, 토큰을 리턴해준다.
현재 접속한 카카오 아이디가 데이터베이스에 없다면 새로운 유저를 저장하고 토큰을 발행하게 한다.

회원가입 및 탈퇴 부분은 직접 구현

 

 

토큰 할당

로그인을 완료하여 토큰 값이 서비스 서버로 전달되면, 서비스 서버에서 토큰을 받아 사용자 정보 가져오기 등 카카오 API를 호출할 때 사용할 수 있습니다. 만약 로그인 이외의 카카오 API를 JavaScript SDK로 호출하려면 토큰 할당을 해야 합니다.

 

로그인 이후 다음과 같이 Kakao.Auth.setAccessToken 함수를 통해 서버에서 발급받은 토큰을 할당해야 합니다. 서비스 서버에서 로그인 응답을 통해 전달받은 액세스 토큰(Access Token) 값을 SDK에서 사용할 수 있도록 설정합니다.

Kakao.Auth.setAccessToken(ACCESS_TOKEN);

 

카카오로부터 받은 access 토큰을 data 에 담아 서버로 보낸다.

 axios.post('http://127.0.0.1:8000/account/login/kakao/', {
          headers:{
             "Access-Control-Allow-Origin": '*',
             'Accept': 'application/json',
             'Content-Type': 'application/json',
             'X-CSRFToken': csrftoken
          },
          data: {
            access_token: res.access_token
          }
        })
        .then((res) => {
          if (res.status === 203) { // 가입되지 않은 사용자일 경우 회원가입 부분으로 넘김
            setProfile(res.data);
            history.push("/sign-up");
          } else if (res.status === 200) { // 가입된 사용자일 경우 로그인 성공 처리
            window.alert("login completed");
          }
        })
        .catch((err) => console.log(err))

가입된 사용자 인지 어떻게 확인?

 

 

로그아웃

현재 로그인한 사용자를 로그아웃시킬 때 사용하는 기능입니다. 로그아웃은 토큰을 만료시켜 더 이상 해당 액세스 토큰으로 카카오 API를 호출할 수 없도록 합니다.

 

사용자가 로그아웃 버튼을 눌렀을 때, 클릭 이벤트 핸들러에서 Kakao.Auth.logout 함수를 호출하면 토큰을 만료시킬 수 있습니다. 로그아웃 성공 시, 콜백 함수를 통해 서비스의 로그아웃 로직을 수행하도록 구현해야 합니다.

 

주의

Kakao.Auth.logout 함수는 로그인 시 발급받은 토큰을 만료시키는 함수입니다. 카카오계정의 로그아웃이나 서비스의 로그아웃에 영향을 주지 않습니다. 서비스의 로그아웃은 직접 구현해야 합니다.