안녕하세요. 오늘은 구글 로그인에 대해 포스팅을 해볼까 합니다.
Node.js를 기반으로 Nest.js 프레임 워크를써서 한 번 구현했던 과정을 복기하고자 합니다.
🏃♂️ 실행 단계
1. 구글 API에서 OAuth.20 만들기
2. 코드로 구글 로그인 구현하기
3. 테스트
1. 🎯구글 API에서 OAuth.20 만들기
- 먼저 구글 API에 접속해 본인이 사용할 계정을 만들어 줍시다.
구글 API 클라우드 링크
해당 링크에 접속해서 [프로젝트] 를만들어 줍시다.
본인이 하고 싶은 프로젝트 이름으로 구성하여 프로젝트를 만들어 주시면 됩니다.
그러고 나서 User Type은 [외부]로 선택해서 만들어 주면 됩니다.
필수 항목에만 데이터를 넣어주고, 나머지 항목에는 굳이 넣을 필요 없습니다. 추후 원하시면 추가 가능합니다.
저는 최상단 3개를 선택했지만, 본인이 원하는 항목들을 잘 검토해서 체크하시면 될거 같습니다.
다 설정하고 나면, 앱 게시를 누르시면 동의화면 구성은 모두 끝납니다.
- 전 추가적으로 테스트 계정은 따로 만들지 않았습니다
OAuth 클라이언트 ID를 생성해주도록 합시다.
승인된 자바스크립트 원본에는 본인이 사용할 브라우저 URL을 입력해주면 됩니다.
승인된 리디렉션 URI에는 본인이 사용할 API URL과 /google/callback을 입력해 주면 됩니다.
- 저는 '/auth'에서 받을 것이기 때문에 auth/google/callback을 입력 했습니다.
만들면 다음과 같은 OAuth 클라이언트 ID와 보안 PWD가 생성 됩니다. 잘 저장해주시고, 절대 외부에 노출하면 안됩니다.
2. 💻코드로 구글 로그인 구현하기
- 자 이제 구글 API 설정은 무사히 완료 했으니 이제 직접 코드로 아주 재밌게 짜볼까요.
구글 로그인에 필요한 npm package를 설치해 줍시다.
npm i passport-google-oauth20 @nestjs/passport먼저 Google Strategies전략을 구성을 해보겠습니다.
google.strategies.ts
"google"로 받았을 때 해당 프로퍼티의 키와 밸류를 통해 올바른 API 값을 설정해 줍니다.
아까 OAuth 클라이언트 생성 시 받았던 ID와 비밀키 그리고 승인된 리디렉션 값을 넣어줍시다. "본인 URL/google/callback"
저는 Scope에서 email과 profile을 입력해주겠습니다.
그 다음 구글 로그인이 실행 될 때 인자 값들 중에서 저는 profile과 done 인자만 사용하고자 합니다.
accessToken과 refreshToken은 본인 프로젝트 사용 여부에 따라 값을 return 하면 됩니다.
로그인 성공 시 doe(null, user)를 통해 로그인 성공과 user 값을 return 해 줍니다.
자 이제 auth Controller를 구성해줄 차례입니다.
auth.controller.ts
여기서 "auth/google"로 들어오면 아까 만든 Google Strategies이 발동 되야 하므로 함수 하나를 만들어 줍니다.
로그인에 성공하게 되면 구글 API가 알아서 "auth/google/callback"을 자동으로 호출하고 해당 함수가 실행되는 로직입니다.
저는 여기서 직접 GoogleRequest 즉, Dto를 만들었습니다.
auth.googleuser.dto.ts
여기서 기본적으로 제공하는 Request와 Google에서 로그인된 email값을 받기 위한 Dto를 통합 했습니다.
다시 돌아가서 auth.service 내 google login 함수가 어떤 로직을 하는지 살펴보겠습니다.
auth.service.ts
먼저 req로 할당받은 값을 user : { email } 로 받아 줍니다.
그리고 실제 우리 APP의 사용자인지 아닌지를 판단하기 위해
users.repository에서 DB Type Orm을 수행하는 함수를 호출해 DB를 뒤져 값을 찾아 옵니다.
users.repository.ts
자 그리고 다시 auth.service의 남은 로직을 살펴 봅시다.
auth.service.ts
만약 유저가 userDB에 없다면 null값을 줄 것이며, 유저라면 Jwt를 생성하는 로직을 통해 해당 jwtToken 값을 return 합니다
해당 포스팅에서는 jwt를 다루지 않고, 따로 포스팅을 진행하겠습니다.
만약 오류가 나면 catch 구문을 통해 error를 던집니다.
3. 📝 테스트
- 이 정도면 코드는 다 구성 된거 같습니다. 이제 한 번 테스트를 진행 해보겠습니다.
자 이제 우리가 입력한 URL로 들어가 봅시다.
localhost:8000/auth/google
아까 잘 입력 했다면 해당 로그인 화면이 정상적으로 노출 될 것입니다. 한 번 로그인을 해보죠!
저 email을 갖고 한 번 들어가보겠습니다 !
null 값이 나왔다는 것은 nowmeettest1@gmail.com인 유저가 userDB에 없다는 거겠죠? 한 번 확인해봅시다.
Local Mysql DB
역시 userDB에 해당 email을 가진 유저가 없어서 그랬군요. 그럼 임의로 데이터를 넣어 유저로 만들어 봅시다.
임의로 데이터를 넣어봤으니, 다시 테스트 해볼까요? 다시 "localhost:8000/auth/google"로 들어가 줍시다.
짠! userDB에 해당 email을 가진 user가 있으니 Jwt를 발급해주는군요. 정상 작동 되네요!
마치며
- 만약 클라와 통신한다면, null값이 떨어지면 회원 가입 페이지로 리다이렉트 시키고, Jwt가 발급되면 메인 페이지로 보내는
처리도 해줄 수 있습니다- 여기서 구글 로그인 포스팅을 마치며, 추후에 Jwt를 한 번 포스팅 해보겠습니다. 감사합니다.
