TIL 230718 : 카카오로 로그인하기 기능 (OAuth)

https://developers.kakao.com/docs/latest/ko/kakaologin/common#intro-kakaologin

Kakao Developers

 

카카오 개발자 사이트에 상세하게 안내해주고 있는 카카오 통합 로그인 기능.

예전엔 이런 Open API, Rest API 설명 보고도 무슨 말인지 몰랐었는데, 강의로 한번, 오늘 다시 복습하며 두번 정도 해보니까 대략 흐름을 파악한듯하다. TIL로 정리하며 다시 익혀보려한다.

 

---

전체적인 흐름

 

정말 친절하게도 이렇게 까지 잘 정리되어있다.

사실 저것만 보면 뭔말인지 알면서도 모르겠어서 오늘 실습한 코드를 대조해보며 흐름을 보기좋게 내 식대로 재정리해본다.

 

 

---

1.인가코드 받기

 

 

이 카카오로 로그인하기 버튼을 누르게 되면, 해당 URL로 Get요청이 가게되는데 이는 카카오측에서 명시한 요청 쿼리 파라미터를 충족한 형식이다.

<button id="login-kakao-btn" 
	onclick="location.href='https://kauth.kakao.com/oauth/authorize
    	?client_id=.....
        &redirect_uri=http://localhost:8080/api/user/kakao/callback
        &response_type=code'">
      카카오로 로그인하기
</button>

 

위와 같은 동작이 이루어진다.

이는 인가코드 받기 파트이다.

 

 

카카오 로그인 정보를 통해 인증정보를 가져오기 때문에 우선적으로 카카오 로그인을 확인한다.

 

아래와 같이 로그인 창이 뜨고 로그인을 진행한다.

 

로그인을 마치고, 동의까지 마치면 인가코드 전달이 Redirect를 통해 이루어진다.

카카오가 '나 카카온데 이 친구 내 지인이야' 뭐 이런 느낌으로 인가코드를 주는 느낌..?

 

인가코드는 카카오 서버에서 나의 서버로 요청이 들어오게 된다.

당연하게도, 내 서버의 URL을 알려줘야하고 이를 등록해둘 수 있다.

 

이러면 저 URL로 요청이 오는데 내 서버에서도 이를 받을 준비를 해야한다.

 

앞에 /api는 매핑되어있음.

 

그러면 이곳으로 어떻게 요청(인가코드요청의 응답이 redirect)이 들어갈까?

이 또한 사이트에 명시되어있다.

 

맨~처음 Get요청 보낼 때 redirect_uri를 같이 보냈는데 그 정보를 참고해서 해당 uri에 GET요청으로 간다.

이때 쿼리 파라미터로 정보를 같이 보내주는 데, 우리가 필요한 정보는 code라는 이름으로 String타입으로 온다.

 

이 code를 @RequestParam으로 받아주자.

 

변수명을 정확히 code로 해줘야 한다.

 

2. 토근 발급

 

이제 인가코드를 받았으니 토큰을 발급하는 과정을 거쳐야한다.

인가코드로 토큰을 만들어서 헤더에 토큰을 담아서 전달해 주면 끝난다.

토큰이 나오기까지의 메소드를 살펴보기 전, 토큰을 만들기 위한 메소드부터 역으로 가보자.

 

우선 토큰을 만드는 메소드 createToken();

1. username과 role이 필요하다. ->   즉, 유저가 필요하다.

 

2. 내 서버에 연결되어 있는 DB에 User를 찾아오면 된다.

   2-1. 없다면 회원가입을 해야한다.

          여기서 포인트는 카카오 로그인을 이미 했기 때문에 그 인가코드를 믿고 그냥 회원가입까지 진행시켜주는 것이다.

            우리가 소셜로그인 할때 카카오 로그인 버튼만 누르면 끝이지 않나.

   2-2. 있다면 그걸로 가져오면 끝.

 

3. 카카오에서 정보를 가져와야한다.

    : 회원가입이든 로그인이든 유저정보가 필요하다. 뭘로 가입하거나 뭘로 로그인해야하나?

      애당초 소셜로그인이라는 것은 카카오 계정에 있는 정보를 그대로 가져와서 쓰는 것.

 

4. 카카오에서 정보를 아무한테나 막 주진 않을텐데?

   : 아까 받아 온 인가코드가 지금 쓰인다.

 

이렇게 메소드화해서 정리가 되었고, 이를 통해 결과적으로는 JWT를 전달해주는 것이다.

원래는 username과 password만 입력하면 이를 통해 user DB에 접근해서 해당 정보를 가지고 JWT를 만들어주는 것에서

카카오 로그인을 통해 카카오에서의 정보로 user DB에 접근해서 해당 정보를 가지고 JWT를 만들어주는 것으로

2겹에서 3겹이 된 느낌이다.

 

전체로 확장시켜보면 카카오 서버로부터는 인가코드를 받고, 내 서버로부터는 JWT를 만들어주는 과정이다.

 

위 토큰을 반환하는 과정 중에서 처음 인가코드를 가지고 엑세스 토큰을 가지고 오는 과정과

그 엑세스 토큰을 통해 카카오 유저정보를 가져오는 과정만 보면,

 

1. uri / headers / body를 만든다.

 

2. 만든 세가지로 RequestEntity를 만든다.

 

3. RestTemplate 를 통해 응답을 받아온다.

 

 

4. String 타입의 JSON형태의 정보를 ObjectMapper로 바디를 가져오고 이를 JsonNode에 담는다.

그리고 해당하는 "키" 를 통해 "값"을 파싱해온다.

 

5. 결과값 반환

 

 

+ 유저정보 가져오는 과정도 1~3까지는 같고 4, 5는 비슷하다.

 

4-2. 유저정보 키-값 가져온다.

 

5-2. Dto로 반환한다.

 

 

 

3.사용자 로그인 처리

 

이제 내 서버 내에서 토큰검증과 로그인 처리가 진행되면 된다.

 

이전까지 가져온 카카오 유저 정보(이름, 닉네임, 이메일 정보처럼 동의 할때 체크한 정보들)을 가지고, 로그인 혹은 회원가입을 한다.

 

그 이후 유저정보로 JWT를 만들어 반환하면 로그인이 완료된다.

 

 

여기서 기존 유저와 카카오 유저가 혼용될 수 있어서 몇가지 방법이 존재하는데 각각의 장단점이 있고

그에 맞게 개발 수정해나아가면 될듯하다.

 

 

---

복습해야할 것

1. UserEnumRole : Role_User가 기본값으로 되어있는지? 초기화가 안되어도 role은 User로 되어있다?

 

 

더 알아볼 것

1. RequestEntity, ResponseEntity. 
2. MultiValueMap
3. URI vs URL : 헷갈린다.
4. HttpHeaders, UriComponentsBuilder, JsonNode 등 그냥 가져와서 쓰는 클래스들이 많다. 낯설다.
5. RestTemplate이건 어떻게 준비되어 있길래..?