[FastAPI + React] 소셜 로그인 구현 (1) 사전준비

오늘은 프로젝트로 진행한 성결대학교 영암체전 웹 사이트 개발 프로젝트에서

맡았던 소셜 로그인 기능에 대해 간단하게 적어보고자 한다.

github - https://github.com/sku-likelion11th/sportFestival_wave_front.git

GitHub - sku-likelion11th/sportFestival_wave_front: 2023 영암체전 波動

웹 페이지 - https://wave-renew.sku-sku.com/ 

혹시 2023 영암체전을 아세요?

물론 내가 깃허브에 구현한 코드와는 다르고 정리된 방법이니 코드를 읽을 땐 아 이렇게 구현했구나~ 생각하면 편하다.

 

기본적인 구현 흐름은 이렇다.

직접 만들어서 조잡한 이미지는 양해바란다.

소셜 로그인 시 다음과 같은 순서로 요청을 처리하게 된다.

 

1. 구글 서버로 로그인 요청을 보낸다.

2. 로그인 팝업창이 나타나며 구글 로그인을 진행한다.

3. 구글에 인증된 사용자라면 사용자 정보를 프론트(리액트)로 보내준다.

4. 프론트(리액트)는 이 정보를 백엔드 서버로 요청을 보내 DB에 저장하고 JWT 토큰을 발행한다.

5. JWT토큰을 프론트(리액트)로 보내 프론트에서 사용자의 클라이언트(웹 브라우저)에 저장한다.

6. 로그인 권한이 필요한 경우 JWT토큰을 백엔드 서버로 보내 인증하고 요청을 처리한다.

 

물론 이것도 내가 구현한 내용이 이렇다 뿐이지, 이 방법이 절대적인 것은 아니다.

구글 API(드라이브, 메일 등)을 사용하려면 구글에서 발행하는 액세스 토큰을 저장해야 한다.

그 처리에 대한건 마지막에 간략하게 정리하도록 하겠다.

 

1. 구글에 로그인 인증 요청 애플리케이션 등록하기.

먼저 Google Cloud Platform에서 애플리케이션을 등록하고 Client ID와 Client Secret을 받아야 한다.

GCP 계정 등록정도는 찾아보면 많이 나오니까 따로 작성하진 않겠다.

콘솔을 클릭한다

먼저 우측 상단의 콘솔을 클릭해 콘솔 화면으로 이동한다.

 그리고 새 프로젝트를 하나 만들어준다.

 

프로젝트 이름은 왠만하면 만들고자하는 웹 서비스의 이름으로 등록해두고 만들기

 

좌측 메뉴를 클릭하면 API 및 서비스라는 메뉴를 찾아볼 수 있다.

여기서 OAuth 동의 화면을 클릭하여 들어간다.

유저 타입을 선택하라고 하는데 이 조직은 도메인 명으로 구분이 되는 경우가 많다.

그냥 묻지도 따지지도 말고 외부를 선택한다.

 

뭐 많이 입력하라고 하는데 실질적으로 *표시가 되어있는 것만 입력해주면 된다.

그러고 다음으로 넘어가서 범위 추가를 해준다.

화면에 표시되는 email, profile, openid 세개를 클릭해주고 넘어간다.

이런 화면이 되면 된다.

다음으로 넘어가서 테스트 사용자는 대충 자신의 이메일을 입력해준다.

이 인증 애플리케이션은 테스트 단계와 프로덕션 단계 두가지가 있는데

프로덕션 단계에서는 모든 사용자가 로그인 요청이 가능하고, 테스트 단계에서는

테스트 사용자에 입력된 사용자만 로그인이 가능한다.

 

적당히 이정도 해주면 된다.

저장하고 다음은 사용자 인증 정보를 만들어주어야 한다.

OAuth 클라이언트 ID를 새로 만들어주어야 한다.

애플리케이션 유형은 웹 애플리케이션.

승인 URI와 자바스크립트 원본은 다음과 같이 작성해준다.

이곳에 입력한 URL들은 리액트 서버에서 로그인 요청시

구글에서 허용하도록 세팅해두는 것이다. 자세한 내용은 찾아보도록 하자.

생성된 클라이언트 ID와 비밀번호

이렇게 생성된 클라이언트 ID와 비밀번호는 언제든지 이 페이지에서 확인할 수 있다.

하지만 번거로우니 따로 복사해두던지 하자.

 

이제 구글 소셜로그인을 위한 사전준비는 끝났다!

다음편에 리액트 코드를 작성해보도록 하겠다.

 

Reference - https://hoyashu.tistory.com/303