Google Drive: Sign-in

Google Drive: Sign-in

구글 계정 연동, 5분 만에 끝내는 완벽 가이드! (OAuth 2.0 삽질기)

요즘 서비스 개발하면서 '회원가입' 시스템 직접 구축하는 분, 아마 거의 없으실 거예요. 사용자에게는 편리함을, 개발자에게는 보안과 효율성을 주는 소셜 로그인이 대세잖아요. 그중에서도 전 세계 1등 파워를 가진 구글 로그인 연동은 사실상 필수죠.

그런데 말입니다. 처음 구글 OAuth 2.0 설정을 시작하면, 클라이언트 ID는 뭔지, 리디렉션 URI는 왜 필요한지, 백엔드에서 토큰 검증은 또 어떻게 해야 하는지 헷갈리기 시작하더라고요. 

오늘은 이 삽질을 여러분은 피하시라고! Google Sign-in을 가장 안전하고 빠르게 통합하는 A to Z를 상세하게 풀어보겠습니다. 특히, 구글 드라이브(Google Drive) 같은 민감한 API 접근을 위해 필요한 심화 설정 팁까지 놓치지 마세요!

---

1. OAuth 2.0, 그 핵심 개념을 잡아봅시다

구글 로그인을 구현하는 것은 단순히 아이디와 비밀번호를 받는 과정이 아니에요. 우리는 구글의 표준 인증 프로토콜인 OAuth 2.0을 사용합니다.

구글은 왜 내 비밀번호를 직접 주지 않을까요?

OAuth 2.0의 목적은 '권한 위임'입니다.

제가 여러분의 서비스(Client)에 로그인할 때, 제 구글 계정 정보(ID/PW)를 직접 서비스에 입력하는 것이 아니라, 구글 서버(Authorization Server)에 직접 입력합니다. 그리고 구글 서버는 저에게 '너의 서비스가 내 데이터에 접근해도 돼'라는 임시 권한 증명서(Access Token)를 발급해주는 방식이죠.

이 덕분에 개발자는 사용자의 민감한 비밀번호를 보관할 필요가 없어지고, 사용자는 서비스 보안 사고가 나더라도 구글 계정 전체가 위험해지는 상황을 피할 수 있습니다. 보안성 측면에서 혁신적인 방식인 거죠.

Scope: 접근 가능한 범위를 정확히 지정해야 합니다

OAuth를 설정할 때 가장 중요한 것 중 하나가 바로 Scope입니다. Scope는 토큰을 요청할 때, "나는 이 사용자의 어떤 정보까지 접근하고 싶다"고 구글에게 선언하는 부분이에요.

Scope 예시	접근 권한
openid	인증(로그인) 자체가 목적일 때 필요
email	사용자 이메일 주소 정보
profile	이름, 프로필 사진 등 기본 정보
https://www.googleapis.com/auth/drive	구글 드라이브 모든 파일 접근

만약 우리가 구글 드라이브 연동을 목표로 한다면, 단순한 email이나 profile을 넘어 드라이브 관련 Scope를 반드시 요청해야 하는 거죠.

---

2. Step-by-Step! 구글 API 콘솔 설정 (개발자의 필수 관문)

구글 로그인을 시작하기 위해서는 우선 구글 클라우드 콘솔(Google Cloud Console)에 접속해서 우리 서비스의 신분증을 발급받아야 합니다.

1단계: 프로젝트 생성 및 OAuth 동의 화면 설정

1. 프로젝트 생성: 콘솔에서 새 프로젝트를 만들고, API 및 서비스 > 사용자 인증 정보 메뉴로 이동합니다.
2. OAuth 동의 화면 구성: 여기서 가장 중요한 것은 '외부' 사용자 유형을 선택하는 것입니다.
   • 앱 이름, 지원 이메일, 개발자 연락처 등을 입력합니다. 이름과 로고는 나중에 사용자가 로그인할 때 팝업창에 표시되니 신중하게 작성해야 합니다.
3. Scope 추가: 필요한 Scope를 정확히 추가합니다. 드라이브 연동이 목표라면, 위에서 설명한 드라이브 Scope를 잊지 말고 넣어주세요.

2단계: 클라이언트 ID 및 보안 비밀 키 발급

이제 드디어 우리가 사용할 API 키를 만듭니다.

1. 사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 선택합니다.
2. 애플리케이션 유형을 '웹 애플리케이션'으로 설정합니다. (모바일 앱이라면 iOS/Android를 선택해야겠죠?)
3. 승인된 리디렉션 URI 설정 (매우 중요!)
   • 로그인이 성공했을 때, 구글이 사용자 정보를 다시 우리 서비스의 어느 URL로 보내줄지 지정하는 곳입니다.
   • 개발 환경이라면 http://localhost:3000/oauth/callback 같은 주소를 넣어야 합니다.
   • Tip: 리디렉션 URI는 한 글자라도 틀리면 400 에러(Bad Request)를 뿜어냅니다. 제가 예전에 http 대신 https를 쓴 줄 알고 삽질했던 경험이 있어요. 반드시 프로토콜까지 정확히 일치시켜야 합니다!
4. 생성이 완료되면 클라이언트 ID와 클라이언트 보안 비밀번호를 잘 저장해 둡니다.

---

프론트엔드 구현: 버튼 심기와 토큰 수령

요즘 구글은 레거시 G+ Sign-in 대신 Google Identity Services (GIS) 라이브러리를 사용하도록 권장하고 있어요.

HTML/JS를 이용한 간편 로그인 구현

헤더에 GIS 스크립트를 추가하고, 로그인 버튼을 설정합니다.

<script src="https://accounts.google.com/gsi/client" async defer></script>

<div id="g_id_onload"
     data-client_id="[발급받은 클라이언트 ID]"
     data-callback="handleCredentialResponse"
     data-auto_prompt="false">
</div>

<!-- 버튼 표시 -->
<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

<script>
    // 구글 로그인 성공 시 호출될 함수
    function handleCredentialResponse(response) {
        // 이 'response.credential'이 바로 JWT 형태의 ID Token 입니다!
        const idToken = response.credential;
        console.log("ID Token 수령 완료:", idToken);

        // TODO: 이 토큰을 백엔드 서버로 전송해야 합니다.
        sendTokenToServer(idToken); 
    }
</script>

이렇게 하면 깔끔한 구글 로그인 버튼이 렌더링되고, 로그인 성공 시 handleCredentialResponse 함수로 ID 토큰이 전달됩니다.

---

4. 프로의 영역: 백엔드에서 ID 토큰 검증 (보안 필수!)

프론트엔드에서 받은 ID 토큰은 클라이언트 측에서만 생성된 것이기 때문에, 사용자가 토큰을 위조했을 가능성이 있어요. 진짜 구글에서 발급된 토큰인지 확인하는 과정이 반드시 필요합니다.

받은 토큰을 Google 서버에 확인하기

백엔드 서버(Node.js, Python, Java 등)에서는 수신한 idToken을 구글의 검증 엔드포인트로 전송해서 토큰이 유효한지, 그리고 우리의 client_id와 일치하는지 확인해야 합니다.

가장 쉬운 방법은 Google API Client Library를 사용하는 것입니다. (예: Node.js의 google-auth-library)

// Node.js (Express 예시)
const { OAuth2Client } = require('google-auth-library');

const CLIENT_ID = "[발급받은 클라이언트 ID]";
const client = new OAuth2Client(CLIENT_ID);

async function verifyGoogleToken(token) {
  try {
    const ticket = await client.verifyIdToken({
        idToken: token,
        audience: CLIENT_ID, // 이 토큰이 우리의 클라이언트 ID로 발급되었는지 확인
    });
    const payload = ticket.getPayload(); // 사용자 정보가 담겨있습니다!

    // 이메일, 이름, 구글 고유 ID 등을 데이터베이스에 저장하고,
    // 우리 서비스의 세션 토큰을 발급하여 로그인 처리를 완료합니다.
    console.log(`사용자 로그인 성공: ${payload.email}`);
    return payload; 

  } catch (error) {
    // 토큰 만료, 위조, 클라이언트 ID 불일치 등 오류 처리
    console.error("토큰 검증 실패:", error);
    throw new Error('Invalid Google Token');
  }
}

이 검증 과정을 거치지 않으면 보안에 심각한 구멍이 생기게 되니, 절대로 생략해서는 안 됩니다!

---

마무리하며: 완벽하게 마스터한 구글 로그인

어떠신가요? 단순히 버튼 하나 심는 것 같았던 구글 로그인이 사실은 클라우드 설정, 프론트엔드 토큰 수신, 백엔드 안전 검증, 그리고 심화 토큰 관리까지 포함하는 복잡한 과정이었다는 것을 알 수 있었죠.

오늘 정리한 핵심 요약입니다:

1. Scope를 통해 필요한 권한만 요청한다. (드라이브 연동 시 필수!)
2. 리디렉션 URI는 한 글자도 틀리지 않게 설정한다.
3. 프론트에서 받은 ID 토큰은 반드시 백엔드에서 검증해야 한다.

이 가이드를 통해 더 이상 삽질 없이 안정적인 구글 로그인 시스템을 구축하셨으면 좋겠습니다!