[BE] 소셜 로그인

목차

1. 소셜로그인을 도입한 이유
2. OAuth2 인증 이란?
3. 소셜서버와의 연결 과정
4. 엑세스 토큰 얻기
5. 사용자 정보 얻기
6. 아쉬웠던 점

 

1. 소셜 로그인을 도입한 이유

○ 제일 큰 이유는 사용자의 편의성이라고 생각합니다.

   버튼을 몇번 클릭하는 것만으로도 간편하게 로그인 할 수 있고, 이러한 편의성 하나하나들을 통해서

   사용자들이 더 이 서비스를 찾을 이유가 될 수 있다고 생각하기 때문입니다.

 

2. OAuth2 인증 이란?

소셜 로그인 구현을 구글에 검색하면 OAuth2 인증이 같이 검색이 되는 것을 알 수 있습니다.

그럼 OAuth2 인증이 무엇일까요?

 

○ OAuth2 인증이란, 요약해서 인증을 소셜서버에 위임하는 것이라고 말할 수 있습니다.

   예를 들어, 사용자가 카카오 로그인을 클릭했다고 가정하면, 저희는 카카오 서버에 로그인에 관한 권한을 위임하고

   로그인 한 것에 대한 리스폰스 값으로 인증 객체를 생성하는 등의 사용을 할 수 있겠습니다.

 

3. 소셜서버와의 연결 과정

아래 이미지는 카카오 서버와 통신하는 과정입니다.

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

 

평소에 저희는 클라이언트와 서버 간의 통신을 했었습니다.

 

소셜 서버가 추가 된 지금 클라이언트, 서버, 소셜 서버 간의 어떻게 통신을 해야 할까요?

 

결론적으로는, 어렵게 생각할 것 없이 '클라이언트 : 소셜 서버', '클라이언트 : 서버', '서버 : 소셜 서버' 이렇게 각각

통신을 하면 됬다고 생각합니다.

 

위의 그림에서 저희는 인증 코드 요청 / 전달 부분 까지는 프론트에서 해결해주셨고, 백엔드에서는 프론트에서 받은

코드를 가지고 소셜 서버와 통신하고 로그인이 되는 과정을 보여드리겠습니다.

 

로직이 엄청 길어보일 수도 있지만, 실질적으로 이 메서드 안에서 카카오 서버와 통신하는 부분은 첫 두줄입니다. 

첫 두줄을 제외하고 나머지는 저희가 추가한 다른 로직이기 때문에 두줄만 보겠습니다.

- getToken(), getKakaoUserInfo()

 

4. 엑세스 토큰 얻기 : getToken(code);

일단 저희는 프론트에서 코드를 받았고, 그 코드를 가져온 상태입니다.

다음으로 할 것은, 카카오 디벨로퍼 이미지를 보시면 아시겠지만, 이 코드로 토큰을 요청하는 과정입니다.

인증 코드로 토큰 얻기

코드만 보면 엄청 어려워 보일 수도 있지만 주로 봐야될 것만 설명하겠습니다.

 

먼저, 프론트에서 받아온 인증 코드를 매개변수 값으로 받아옵니다.

 

HTTP 통신할 객체를 만들면서,

'kakaoClientId'에는 카카오 디벨로퍼에서 받은 ClientId를 넣으시면 됩니다.

 

'kakaoCallbackUri'에는 프론트에서 요청한 리다이렉트 uri와 같은 uri를 넣으시면 됩니다.

(ex, http://localhost:3000/auth/kakao/callback)

- 실제로 지금 이 uri로 리다이렉트 하는 것이 아닌 그저 일치여부를 보는 것이기 때문에 꼭 프론트에서의

리다이렉트 uri와 같아야 하며 카카오 디벨로퍼에서 리다이렉트 uri에 등록되어 있어야 합니다!!!!

 

'kakaoTokenUri'에는 카카오 디벨로퍼에 있는 토큰 요청 uri를 넣으시면 됩니다.

- 실질적으로 카카오에 요청을 하는 uri 입니다.

https://kauth.kakao.com/oauth/token

 

마지막으로, 이 요청을 통해 온 리스폰스(response)에서 토큰을 꺼내면 '엑세스 토큰 얻기' 과정은 끝났습니다!

 

5. 사용자 정보 얻기 : getKakaoUserInfo(accessToken)

저희는 사용자 정보에 접근 가능한 액세스 토큰까지 받아온 상태입니다.

이제 이 토큰을 가지고 소셜 서버에서 사용자 정보를 받아오면 완료입니다.

토큰으로 사용자 정보 얻기

이번에도 봐야할 것만 설명하겠습니다.

 

먼저, 4. 에서 받은 토큰을 매개변수 값으로 받아옵니다.

 

HTTP 통신할 객체를 만들면서,

헤더에 토큰을 담아줍니다.

{"Authorization":"Bearer {엑세스 토큰}"}

'kakaoProfileUri'에는 카카오 디벨로퍼에 있는 사용자 정보 요청 uri를 넣으시면 됩니다.

- 실질적으로 카카오에 요청을 하는 uri 입니다.

https://kapi.kakao.com/v2/user/me

 

마지막으로, 이 요청을 통해 온 리스폰스(response)에서 필요한 정보들을 꺼내면 모든 과정이 끝났습니다.

저희는 필요한 정보 이메일만 받아왔지만 카카오 디벨로퍼에서 설정한 것에 따라 닉네임, 프로필 사진 등도 가져올 수 있습니다.

 

이후로는, 이 사용자 정보를 가지고 회원가입을 하거나, 로그인해서 토큰을 만들어주는 과정 등의 사용을 할 수 있습니다.

 

6. 아쉬웠던 점

로직 상에는 문제가 없지만 아쉬운 점이 있습니다.

현재 저희는 인증 코드는 프론트 분들이 받아서 주시지만, 토큰이나 사용자 정보는 백에서 요청을 합니다.

 

코드와 토큰을 프론트나 백 한 곳에서 처리했었으면, 리다이렉트 uri나 clientId 등을 한 곳에서 관리할 수 있어서 더 좋지않았을까 하는 아쉬움이 있습니다.

현재는 프론트와 백 각각 같은 리다이렉트 uri와 clientId를 들고있기때문입니다.

 

아쉬움이 있긴 하지만, 지금 통신은 잘 되고 만약 바꾼다면 다시 바꾸는 과정에서 혹시라도 연결을 다시해야하는 과정이

생길 수도 있고 (사실 시간이 별로 없어서) 다음에 다시 구현할 기회가 생긴다면 더 로직 상으로 잘 구현해보고 싶습니다.

 

 

 

 

읽어주셔서 감사합니다.