구글 간편 로그인 구현 (react-oauth/google 라이브러리)

안녕하세요! 

이번 게시글에서는 저번 게시물에서 다룬 카카오 간편 로그인, 네이버 간편 로그인에 이어, Spring + React 프로젝트의 구글 간편 로그인 기능 구현 방법을 공유하려 합니다.

---

📌 Google Cloud Console

구글 간편 로그인을 구현하기 위해서는 카카오 간편 로그인과 네이버 간편 로그인 처럼 개발자 센터에서 API 설정을 해줘야 합니다.

구글 로그인은 네이버 로그인과 동일한 방식으로 동작합니다.

• 로그인 성공 후 인증 코드를 먼저 반환하고, 이 코드를 이용해 access token을 요청한 뒤 개인정보를 가져옵니다.

자세한 사항은 구글 클라우드 API 문서를 참고해주세요.

REST API 사용  |  Identity Platform Documentation  |  Google Cloud

※ 하지만, react-naver-login 라이브러리와 마찬가지로 react-oauth/google 라이브러리를 사용하면 백엔드에서 별도의 인증 코드 처리가 필요 없이 바로 구글 유저 정보를 받을 수 있습니다.

 

Google Developers 설정 방법

1. Google Cloud 접속

Google 클라우드 플랫폼

2. 프로젝트 생성

• 상단에 프로젝트 선택 버튼 클릭 → 새 프로젝트 클릭
• 프로젝트 이름 입력 후 만들기 클릭

 

3. OAuth 동의 항목 설정

• API 및 서비스 → OAuth 동의 항목 → 데이터 엑세스 → 범위 추가 또는 삭제

 

4. 클라이언트 ID 생성

• API 및 서비스 → 사용자 인증 정보 → 사용자 인증 정보 만들기 → OAuth 클라이언트 ID

• 구글 로그인 API를 사용할 서비스 URL을 입력합니다. (예: http://localhost:3000)
• 리디렉션 URL에 구글 로그인 후 Callback 받을 URL을 입력합니다. (예: http://localhost:3000/auth)

 

5. Client ID 및 Client Secret 확인

• API 및 서비스 → 사용자 인증 정보 → OAuth 2.0 클라이언트 ID

 

---

 

📌 구글 간편 로그인 구현

 

react-oauth/google 설치

npm install react-oauth/google

 

jwt-decode 설치

npm install jwt-decode

• react-oauth/google 라이브러리를 통해 받은 data는 jwtDecode를 통해 변환해야 읽을 수 있습니다. 

 

구글 로그인 컴포넌트

import { GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';
import { jwtDecode } from 'jwt-decode';

const googleClientId = 'GOOGLE_CLIENT_ID'; // 실제 구글 클라이언트 ID키 사용
const callbackUrl = 'CALLBACK_URL'; // 구글 클라우드에서 등록한 Callback URL

//구글 로그인 성공, 실패
const onGoogleSuccess = (data: any) => {
    const decoded: any = jwtDecode(data.credential);
    const { email } = decoded;
    console.log(email);
}
const onGoogleFail = () => {
	alert('구글 로그인에 실패했습니다. 다시 시도해주세요.');
};

if (!googleClientId || !callbackUrl) return null;

<GoogleOAuthProvider clientId={googleClientId}>
  <GoogleLogin
    width={'250px'}
    onSuccess={onGoogleSuccess}
    onError={onGoogleFail}
  />
</GoogleOAuthProvider>

• GoogleLogin 버튼을 클릭하면 토큰을 확인하여 성공과 실패 여부를 반환합니다.
• clientId는 구글 클라우드에서 발급받은 클라이언트 ID를 전달합니다.
• 전달받은 clientId가 성공적으로 반환되면 jwtDecode를 통해 구글에서 유저 정보를 읽을 수 있습니다.
• 만약 유저가 회원가입되지 않았다면, 해당 정보를 이용해 회원가입 창으로 이동하도록 처리할 수 있습니다.
• 카카오 로그인과 네이버 로그인과 다르게 react-oauth/google 라이브러리를 통해 가져온 GoogleLogin은 커스텀이 제한됩니다.
• 저는 해당 라이브러리가 쓰기 편하고 디자인도 맘에 들었기 때문에 굳이 커스텀을 하진 않았지만 다른 구글 로그인 라이브러리에서는 커스텀을 할 수 있는 것 같습니다.

 

구글 로그인 버튼 커스텀

• 혹시 다른 구글 로그인 라이브러리를 사용하여 구글 로그인 버튼을 커스텀하실 분들은 구글 로그인 디자인 가이드를 참고해주세요.
• 저는 여기서 css도 제공해서 이참에 구글 로그인 규격으로 다른 로그인 규격을 변경하였습니다.

Sign in with Google Branding Guidelines  |  Google Identity  |  Google for Developers

 

※ 클라이언트 ID는 보안이 매우 중요합니다. 이를 .env 파일에 저장하고 gitignore로 관리하는 것이 좋습니다.

 

---

 

📌  간편 로그인 영상

 

---

 

이상으로 간편 로그인 구현은 카카오, 네이버, 구글 로그인을 끝으로 마무리하겠습니다.

제 게시물이 다른 분들에게도 도움이 되면 좋겠네요. 다음 게시물에서 또 인사드릴게요.

오늘도 행복한 하루 되세요!

 

2025.03.17 - [개인 프로젝트] - TalkHub - 1인 SNS 웹개발 프로젝트: 개발 과정 (카카오 간편 로그인)

TalkHub - 1인 SNS 웹개발 프로젝트: 개발 과정 (카카오 간편 로그인)

 

2025.03.18 - [개인 프로젝트] - TalkHub - 1인 SNS 웹개발 프로젝트: 개발 과정 (네이버 간편 로그인)

TalkHub - 1인 SNS 웹개발 프로젝트: 개발 과정 (네이버 간편 로그인)