WEB7 - Login with Google / Facebook on Passport

WEB7 - Login with Google

WEB5와 WEB6에서는 Passport의 local strategy(전략)을 사용하며 Passport의 작동 원리와 인증 시스템 전반에 대해 공부했다. 이를 바탕으로 이번 WEB7에서는 각각 구글과 페이스북 계정을 연동해 웹 서비스에서 인증 기능을 구현하는 것을 배웠다. 우선 구글 전략(Google Strategy)을 먼저 진행했다. npm으로 passport-google-oauth 패키지를 설치했고, Passport.js 공식 홈페이지의 가이드 대로 구글 인증을 위한 코드를 추가했다.

 

다음으로는 Google Cloud Platform에 방문 해 'WEB7-Passport-Google'이라는 이름의 프로젝트를 생성했다. 이후 사용자 인증 정보(Credentials) 탭에서 클라이언트 ID와 클라이언트 보안 비밀(Client Secret)을 발급받고, 로컬 프로젝트 폴더에 config 폴더를 생성 해 인증 정보를 저장했다. 또, 구글 콘솔에서 Google+ API(로그인 기능을 위한 API)를 해당 프로젝트에 허용 해 주었다. 이 부분이 바로 특정 프로젝트가 구글의 어떠한 기능을 사용할 지(Scope)를 지정하는 내용이었는데, 로그인을 위한 API 말고도 캘린더, G메일, 드라이브, 유튜브 등 다양한 기능들을 제공하는 API 라이브러리들이 존재했다. 이번 강의에서는 로그인 기능만 구현했지만, 이후 실제로 웹 서비스를 만든다면, 다양한 강력한 기능들을 사용할 수 있을 것 같았다.

Google Cloud Platform에서 발급받은 사용자 인증 정보(Credentials). 클라이언트 ID와 보안 비밀은 가려두었다.

 

구글 콘솔에서의 설정과 VSCode 상에서의 추가적인 코딩 이후 구글 로그인 기능을 테스트 해 보았다. 먼저 구글에 로그인했고, 구글이 이 웹 서비스가 사용할 권한에 대한 승인을 요구했다. 테스트 단계였어서 실질적인 로그인이 이루어지지는 않았지만, VSCode의 터미널을 통해 우리 프로젝트가 구글로부터 사용자 데이터를 정상적으로 받아왔다는 것을 알 수 있었다.

웹 서비스 사용을 위해 구글 계정으로 로그인하는 모습

 

이후, 구글로부터 받아 온 데이터를 DB에 저장하는 코드를 작성하고, 실질적인 로그인이 이루어지도록 인증 코드를 조금 수정했다. 또, 일반적으로 상용 웹 서비스는 로컬 로그인과 소셜 로그인을 모두 지원하기 때문에, 이를 염두에 둔 작업도 진행했다. 같은 이메일을 사용하는 사용자일 경우, 로컬 전략, 구글 전략의 다른 방식으로 로그인하더라도 같은 사용자로 취급했고, 데이터베이스 상에서도 한 명의 사용자 데이터로 관리했다. 실제 웹 서비스로 사용하기 위해서는 아직 보완해야 할 부분들이 많았지만, 기능 구현을 학습하는 것이 목적이었기 때문에 서비스를 완벽하게 구축하지는 않았다.

구글 계정으로 내가 만든 웹 서비스에 로그인 한 모습. googleID 값은 가려두었다.

 

WEB7 - Login with Facebook

페이스북 인증도 구글 인증과 크게 다르지 않았다. 우선 npm을 통해 프로젝트에 passport-facebook 패키지를 설치했고, Google과 마찬가지로 passport의 가이드를 따라 페이스북 인증을 위한 코드를 추가했다. 다음으로 Facebook 개발자 도구에 접속해 'WEB7-Passport_F'라는 이름의 프로젝트를 생성했다. (페이스북에서는 사용자들이 개발하는 서비스에 Facebook과 같은 키워드를 사용하지 못하도록 설정 해 두었는데, 이후 구현 과정에서도 느꼈지만 구글보다 조금 깐깐하다는 생각이 들었다.) 이후 앱 ID, 앱 시크릿 코드를 발급받아 마찬가지로 로컬 프로젝트 폴더에 인증 정보를 저장했다. 

Facebook for Developers에서 발급받은 인증 정보. 앱 ID와 시크릿 모드는 가려두었다.

 

API 설정을 완료한 이후, 우리 서비스가 페이스북으로부터 정보를 잘 받아오는지 테스트 해 보았는데, 생각지도 못한 문제가 발생했다. 2018년에 제작 된 강의 영상에서는 큰 문제가 없었는데, 그 사이에 페이스북에서 보안 정책을 더 깐깐하게 수정한 탓에 페이스북 API를 활용하는 모든 웹 서비스는 반드시 https로 접속해야 했던 것이다. 나는 실제 배포가 아닌 학습과 개발 목적이었기 때문에 localhost 환경에서 테스트하고 있었는데, 이 때문에 페이스북 인증이 정상적으로 실행되지 않았다.

HTTPS 연결을 사용하지 않아 페이스북 인증에 실패한 모습

 

이 문제를 해결하기 위해 여러 방법을 살펴 보았는데, 그 중 가장 간단해 보이는 ngrok이라는 서비스를 이용하는 방법을 선택했다. ngrok은 간단한 절차를 거쳐 https가 적용 된 랜덤 url을 발급해 주고, 그 url로 접속하면 localhost로 포워딩 시켜주는 방식이었다. 주솟값이 바뀌었기 때문에 페이스북 API 설정에서 리다이렉션 url을 변경 해 주었고, 실행 결과 로그인이 정상적으로 진행되는 것을 확인할 수 있었다.

ngrok으로 HTTPS 문제를 해결 해 정상적인 인증이 이루어진 모습

 

테스트 성공 이후 구글 인증 때처럼 실질적인 로그인 기능 작동과 동일 사용자의 다양한 로그인 방식의 호환을 위해 코드를 수정했고, 웹 서비스가 정상적으로 작동하는 것을 확인할 수 있었다. 공부를 진행하면서 지난번 로컬 전략을 활용할 때 처럼, Federated Identity를 활용했을 때의 인증 과정을 간단하게 정리 해 보기도 했다.

Passport - Federated Identity 인증 과정

1. Google Developer Console / Facebook Developer을 통해 서비스 생성. client ID, client secret 발급, redirect URL 설정
2. Console(Passport)에 client ID, client secret, redirect URL 제공
3. Resource Server, Resource Owner에게 로그인 요구 (인증)
4. Resource Server, Resource Owner에게 특정 기능의 권한을 Client에게 승인 할 지 여부 확인 (Scope 확인)
5. Resource Owner 승인 시, Resource Server는 내부적으로 user_id, scope 값 저장, 권한 인식(user_id는 client_id에게 scope의 기능을 허용)
6. Resource Server가 authorization code(임시 비밀번호) 생성, Resource Owner에게 전달(Header의 Location)
7. Resource Owner, 자동으로 authorization code 값을 가지고 다시 Client로 접속(리다이렉션). Client에게 authorization code 전달
8. Client가 Resource Server에 접속해 자신의 authorization code, client ID, client secret 직접 전달 (Passport가 은밀하게 실행)
9. Resource Server가 값 수신. authorization code 삭제, access token 발행(user와 scope에 대한 데이터 포함), Client에게 전송
10. Client는 API를 통해 access token을 이용해 Resource Server 상의 Resource Owner의 프로필 정보, 서버 상의 아이디 값 등을 요청하고 수신

 

강의명 : Opentutorials - WEB7 - Login with Google / Facebook on Passport

학습 기간 : 2021.08.02 / 2021.08.03

 

GitHub - HYOSITIVE/WEB7-Federated_Identity: WEB7 classes from Opentutorials by Egoing