[NodeJS/Express] passport 미들웨어로 Google OAuth 2.0 구현하기 (1)

---

Intro.

웹 서비스를 사용하다보면 회원가입을 하지 않아도

구글 계정으로 로그인하여 서비스를 사용한 경험이 있을 것이다.

(요즘에는 구글 계정으로 로그인해도 회원가입을 하는게 나을 정도로 추가 절차가 많은 느낌이지만...)

 

이러한 인증 방식을 OAuth 2.0 라고 하며

흔히 소셜 로그인(Social Login)이라고 부르기도 한다.

 

이번 글에서는 Passport 미들웨어를 사용해

Google 소셜 로그인 기능을 구현하는 과정을 담았다.

개발언어와 프레임워크는 각각 node.js와 express을 사용했다.

---

Description.

1. Google 소셜 로그인 API 키 발급 받기

 

1.1. Google 개발자 사이트

https://console.cloud.google.com/projectselector2/apis/dashboard?pli=1&supportedpurview=project 

Google 클라우드 플랫폼

 

1.2. 프로젝트 만들기

프로젝트 만들기를 클릭한다.

 

프로젝트 이름을 입력한 후 만들기를 클릭한다.

 

1.3. 사용자 인증 정보 탭 클릭

사용자 인증 정보 탭 클릭 후 

동의 화면 구성 클릭

 

User Type을 외부로 선택한 후

만들기 클릭

 

다음으로 앱 정보들을 차근차근 기입해줍니다.

실 서비스를 구축하는 것이 아닌

OAuth 로그인 기능을 구현하는 것이 목적이므로

앱 도메인에 tistory 주소를 사용했습니다:)

 

다음으로 OAuth 로그인을 했을 때

Google에서 제공하는 정보 범위에 대해서 설정해주는 단계입니다.

간단하게 Google 계정의 이메일 주소와 이름 등의 정보가 포함된 개인정보만 

제공되도록 설정해줍니다.

 

저장 후 계속 버튼을 클릭합니다.

 

 

사용자 인증 정보 만들기 → OAuth 클라이언트 ID를 클릭합니다.

애플리케이션 유형은 "웹 애플리케이션"으로 선택합니다.

그리고 승인된 리디렉션 URI에

http://localhost:3333/api/oauth/google/callback

을 기입합니다.

Google 인증 절차가 마친 후 요청이 전달되는 endpoint 입니다.

마지막으로 만들기 버튼을 클릭합니다.

 

클라이언트 키와 비밀번호가 성공적으로 생성되었다.

이제 Google 소셜 로그인 기능을 구현하러 가자!

 

---

References. 

- TraderHaru:https://www.traderharu.com/2021/08/10/%EA%B5%AC%EA%B8%80-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-api-%ED%82%A4-%EB%B0%9C%EA%B8%89-%EB%B0%A9%EB%B2%95/

구글 소셜 로그인 API 키 발급 방법 - TraderHaru

 

- node.js + express 이미지 출처: https://velog.io/@gidong_e/Node.js-Express

[Node.js] Express