Nestjs에서 Google Oauth2구현

먼저 구글 사이트에서 google Oauth2 설정을 꼭 해주어야 한다.

https://console.cloud.google.com/

Google 클라우드 플랫폼

 

 

https://www.youtube.com/watch?v=OitgkKTxht4 

 

 

1. 프론트에서 백엔드 엔드포인트로 구글 로그인 페이지로 감.

2. 구글 로그인 정보 성공하면 백엔드쪽으로 /google/callback으로 user정보를 추출 가능.

3. 백엔드 /google/callback에서 user.email을 이용하여 가입자 인지 확인 check 

4. 만약 이미 가입한 상태의 유저라면 해당 유저의 id로 accessToken과 refeshToken을 이용하여 

프론트 redirect 주소 예를들어 localhost:3000/oauth2/redirect?token="여기엔 accesstoken"과 nest 백엔드의

res.cookie('refreshToken',refreshToken);

res.redirect('localhost:3000/oauth2/redirect?token=accesstoken를 넘겨준다. (로그인 완료)

5. 만약 가입 되지 않은 유저라면, google Ouath2에서 제공해준 profile 정보 email이나 name같은 정보로 user를 생성하고 생성된

해당 유저id를 signup 회원가입 페이지로 redirect 해준 후 회원가입을 진행하게 한다.

res.redirect('localhost:3000/signup/social?id=26a5a1a2-a097-4349-a59c-6ad6b53ea2ae

디테일한 회원가입 내용을 기입 한 후 backend에 유저를 저장하는 http 요청을 보내 유저를 저장한다.

 

 

1. 프론트엔드(React)에서는 구글 로그인 페이지로 백엔드(NestJS)의 /oauth2/google 엔드포인트로 리다이렉트를 수행합니다. 구글 OAuth 2.0 인증을 위한 사용자 인증을 진행합니다.
2. 사용자가 구글 로그인 정보를 성공적으로 인증하면, 백엔드(NestJS)의 /google/callback 엔드포인트로 구글에서 전달한 사용자 정보를 받아옵니다.
3. /google/callback 엔드포인트에서는 받아온 사용자 정보 중에서 이메일을 이용하여 이미 가입한 사용자인지 확인합니다.
4. 이미 가입한 사용자라면 해당 사용자의 ID를 사용하여 Access Token과 Refresh Token을 생성하고, 프론트엔드로 리다이렉트 주소를 전달합니다. 이때, 리다이렉트 주소에 Access Token을 포함시켜 전달하거나, 쿠키를 이용하여 Refresh Token을 저장합니다.
5. 가입되지 않은 사용자라면, Google OAuth 2.0에서 제공한 사용자 프로필 정보 (예: 이메일, 이름 등)를 이용하여 사용자를 생성하고, 사용자 ID를 회원가입 페이지로 전달하여 회원가입을 진행하게 합니다.
6. 회원가입이 완료되면 백엔드(NestJS)에서 해당 사용자 정보를 저장하고, 프론트엔드로 리다이렉트 주소를 전달합니다.