디자인 패턴을 적용한 oauth login 구현 Part 1

어플리케이션에 oauth 기능을 구현해보았는데, 구현을 하다보니 oauth login 기능을 제공하는 여러 개의 제3자 앱이 제공해주는 기능,

 

각각의 코드 흐름들이 대부분 비슷했고, 마침 그 때 디자인 패턴을 조금 공부하고 있어 상황에 적합한 디자인 패턴을 적용해

 

oauth login 기능을 코드를 어느 정도 효율적으로 짜서 구현할 수 있었다.

 

oauth login은 제3자앱에서 인증을 거쳐 개인 정보를 전달받는 기능이다.

 

사용자는 보안적으로 신뢰가 보장된 한정된 주체에게만 개인 정보를 공개, 저장할 수 있고,

 

어플리케이션은 사용자의 정보를 굳이 자신들이 따로 저장하지 않음으로써 보안에 대한 부담을 덜 수 있다.

 

1. OAuth login 메커니즘

Oauth login의 진행은 다음과 같다. 

 

주의해야할 점은 oauth login이라는건 제 3자 앱에서 (e.g. 구글, 카카오) 사용자의 정보를 가져오는 것이 끝이고,

 

받아온 정보를 암호화, 인코드 과정을 거쳐 쿠키로 만들어 응답으로 주고, 받은 쿠키를 가지고 상태 관리 등을 통해

 

사용자를 로그인 상태로 바꿔주는 것은 별개의 일이라는 것이다.

 

Oauth login의 전개를 그림으로 나타내면 아래와 같다.

 

 

Oauth 로그인은 크게 세 단계로 나눌 수 있다.

1. 사용자가 로그인을 시도하면 프론트는 사용자를 oauth 서비스 제공자 (이하 구글)의 로그인 페이지로 이동시킨다.

편의상 oauth 서비스 제공자를 구글이라고 하자.

 

user가 어플리케이션(이라 내 앱)에서 로그인 버튼을 클릭하면 앱은 유저를 구글 로그인 페이지로 이동시킨다.

 

이 때, url의 쿼리스트링에 필요한 정보를 같이 넘겨준다.

 

여기서 필요한 정보란, 클라이언트 (사용자가 아닌 정보 제공을 받아야 하는 내 앱)가 미리 구글에 등록해둔 어플리케이션 자신의 id와 pw,

 

응답 타입 (보통 code), 사용자가 자신의 구글 id, pw를 입력해 인증을 했을 때 사용자의 정보를 전송하기 위해 상호작용을 해야하는 redirect uri 등을 포함한다.

 

2. 사용자가 자신을 구글 id, pw를 입력해 인증을 하면 구글에서 내 앱의 정보를 확인하고, 엑세스 토큰과 함께 지정해둔 url로 리다이렉트시킨다.

바로 정보를 받아오진 않는다.

 

보안을 위해 우선 엑세스 토큰이라는 걸 주고, 이를 다시 구글에 전달해 사용자 정보와 교환한다.

 

3. 엑세스 토큰을 구글에 전송하면 구글에서 우리가 원하는 사용자 정보를 준다.

어떤 정보를 구글에서 받을지는 앱 관리자(oauth 구현자)가 미리 정해두고, 처음 로그인할 때 사용자에게 동의를 받는다.

 

oauth login의 과정은 여기까지고 받은 정보를 처리하고,

 

쿠키를 만들고 등등은 백엔드에서, 받은 쿠키를 가지고 상태를 관리하는건 프론트에서 해준다.

 

즉, 정보를 받은 후부터는 구글의 역할은 없고 우리가 알아서 할 일이다.

 

 

2. Oauth login 구현 (google)

이제 oauth login을 실제로 구현해보자. 나는 구글, 카카오 두개를 구현했는데, 여기서는 구글만 하겠다.

 

1. 여기로 들어가서 새 프로젝트를 생성한다.

 

 

2. 사용자 인증 정보 탭에서 `사용자 인증 정보 만들기 > oauth 클라이언트 ID`를 클릭한다.

 

 

3. 어플의 url, 리다이렉트 url을 지정한다.

 

4. 생성을 완료하면 client ID와 비밀번호를 받을 수 있다.

그 밖의 설정은 보면 알 수 있으니 여기서는 생략한다.

 

 

3. Oauth login 구현 (kakao)

이어서 카카오 로그인도 간략하게 살펴보고 넘어가자.

 

사용하는 기술이 같기 때문에 큰 흐름은 구글과 동일하다.

 

1. 카카오 디벨로퍼에 들어가 위 쪽의 내 어플리케이션 탭을 클릭한다.

 

 

2. 어플리케이션 추가하기를 클릭하고 항목들을 채워준 후 저장한다.

 

3. 항목을 클릭하면 요약 탭에서 여러 키를 줄텐데, 이 중에서 restAPI가 clientID가 된다.

 

4. 카카오 로그인 탭으로 가서 카카오 로그인을 활성화하고, redirect url을 등록한다.

5. 카카오 로그인 > 보안 탭으로 가면 secret_key가 있다. 이것까지 보면 cilent id, pw, redirect url을 전부 모은 셈이다.

 

이제 다음 글에서부터는 본격적으로 nestjs에 oauth login 코드를 작성해보자.