[OAuth] Social Auth REST API : URI MISS MATCH

장고 API 서버 만들기 포스팅을 정리하면서 올리려고 하는데 이 글을 먼저 쓰게 됐다.

이유는 그냥 잊어먹지 않으려고...

 

장고 포스팅을 보면 코딩이며 설정이며 야매로 했다고 한 것을 볼 수 있는데 그 연장선이라고 생각하자.

나는 이것이 명확한 해답인지는 모르겠다. 

혹시 이 글을 보는 누군가가 정답을 안다면 알려준다면 좋겠다.

 

 

Django-Rest-Framework(DRF)로 소셜 로그인 API 구현해보기(Google, KaKao, Github)

나는 장고 서버에 소셜 인증 기능을 추가했는데 위 글을 따라 해보며 했다...

코드 상의 변경 점은 있지만 기본적으로 위 글의 내용과 달라진 점은 크게 없다.

달라진 점이라면 이 분은 백엔드에서 모든 로그인을 처리하는 것이고 이번 프로젝트는 프론트와 상호작용을 해야했기에 인증 토큰 등의 요청 위치만 분리했다.

 

장고 프로젝트 풀 소스코드는 추후 업로드 하겠지만 위 글을 먼저 보고 이해하는 것이 좋을 것 같다.

 

 

우선 문제점이 된 근간은 이러했다.

서버 구조

기본적으로 위와 같이 서버가 구성되어 있다.

 

여기서 첫번째 문제가 생긴다.

"API 서버가 프론트와 완전 분리가 되지 않은 점"이다. 같은 위치에 로컬호스트로 백엔드 API 서버가 붙어있다. 

 

사실, 이 문제는 소셜 인증 때문에 발생했다.

소셜인증을 거칠 때, 프론트와 백엔드 간의 통신이 필요할 때 백엔드가 분리되어 있으니 감을 도저히 잡을 수 없더라.

이 부분이 정말 잘못 구성한 점 인지는 명확히 모르겠지만...

 

아파치가 내부 포트로 포워딩해주면서 개발서버가 도메인:포트에 붙어있었고 이 도메인은 프론트엔드의 URL 이었다.

도메인:포트로 접근하면 개발 중인 웹 페이지를 확인할 수 있었다.

 

이때, 프론트엔드는 백엔드 서버로 localhost를 통해 접근한다.

또, 소셜인증에서 프론트와 백엔드가 별개의 구글 소셜인증 클라이언트를 사용했다. 이 상황에서는 별개의 클라이언트를 사용하더라도 로그인이 정상적으로 수행되었다.

 

소셜 로그인 과정

대강 소셜 로그인이 수행되는 과정을 이것 저것 자료를 보면서 도식화 해봤다.

여기서 중요한 점이 있는데 프론트엔드에서 구글 API로 최초 로그인 요청을 하는 1~4단계의 인증 요청 URI 와

백엔드가 구글 API로 토큰을 요청하는 URI가 같아야 한다.

 

Kakao Rest API "Redirect URI mismatch." 에러 처리하기

 

Error: redirect_uri_mismatch google api oauth2 to get access token

 

개발 단계를 슬슬 마무리하면서 HTTPS로 다시 도메인을 붙이면서 문제가 발생했다.

진짜 딱 도메인만 HTTPS 외부에서 붙여준 것 밖에 없는데 URI를 같게 설정 했음에도 redirect_uri_mismatch 에러가 발생했다.

 

위 글을 보면서 계속 요청 URI도 바꿔보면서 생각하다가... 마지막으로 시도한 부분에서 바로 해결되었다.

 

https://accounts.google.com/o/oauth2/v2/auth?client_id={client_id}&response_type=code&redirect_uri={GOOGLE_CALLBACK_URI}&scope={scope}

생각해보니 프론트엔드는 위와 같은 URI를 통해 호출한다.

이때, 구글 클라이언트를 프론트엔드와 백엔드가 다르게 사용해서 URI가 달라 문제가 발생했다고 생각했다.

 

그래서... 프론트엔드와 백엔드의 구글 소셜인증 API와 해당 클라이언트 ID를 동일한 것을 사용하는 것으로 적용하니 해결되었다...

 

뭔가 깨름칙한게 프론트가 백엔드걸 그대로 써도 되는지...

이게 정말 API 서버가 맞는지...

 

어찌되었건 검색하면서 사용하는 대부분의 예제들이 동일한 로컬호스트 환경에서 포트 번호만 다르게 사용해서 이 구현 방법도 거기서 크게 달라지지는 않은 것 같다.