[OAuth] OAuth 2.0을 파헤쳐보자 🔍 + 소셜로그인 예제

지난 글에서 OAuth의 기본적인 개념을 파악했다면, 이번엔 OAuth 2.0을 파헤쳐볼 것이다!

1️⃣ OAuth 2.0이란?

OAuth 2.0은 비밀번호 없이 안전하게 인증하는 방법이다. 사용자의 계정을 보호하면서, 특정 서비스가 내 정보를 가져갈 수 있도록 허용하는 시스템이다.
지난 글에서도 작성했지만, 간단하게 핵심 원리만 작성해보자면..
(https://lucylog.tistory.com/9)

 

✅ OAuth 2.0 핵심 원리

1. 사용자가 로그인 요청 ➜ 서비스가 OAuth 제공자 (예: 구글, 카카오, 깃허브)로 이동시킴.
2. OAuth 제공자가 사용자를 인증하고, 인가 코드(Authorization Code)를 앱에 전달함.
3. 앱이 인가 코드를 이용해 액세스 토큰(Access Token)을 발급 받음.
4. 액세스 토큰으로 API 요청 ➜ 사용자 정보를 받음!

즉, OAuth 2.0을 이용하면 비밀번호를 직접 넘기지 않고도, 토큰을 이용해 로그인 할 수 있는 것이다.

 

2️⃣ OAuth 2.0의 인증 방식

OAuth 2.0에는 여러 인증 방식이 있다.

 

🔑 1. Authorization Code Grant (가장 많이 사용됨)

웹 애플리케이션에서 주로 사용하는 방식이다.
1. 사용자가 로그인하면, 인가 코드(Authorization Code)를 받음.
2. 서버가 이 코드를 OAuth 제공자에게 보내고, 액세스 토큰(Access Token)을 발급 받음.
3. 액세스 토큰을 이용해 API를 호출하여 사용자 정보를 가져옴.

 

⚠️ 2. Implicit Grant (거의 사용 안 됨)

예전에는 SPA(Single Page Application)에서 사용했지만, 보안 이슈 때문에 요즘은 잘 안쓴다고 한다.
1. 인가 코드 없이 바로 액세스 토큰을 발급받음.
2. 토큰이 URL에 노출될 위험이 커서 취약함.

 

🤖 3. Client Credentials Grant (서버 간 인증)

사용자 없이, 서버-서버 간 API 인증에 사용됨.
예: 백엔드 서버가 내부 API를 호출할 때.

 

📺 4. Device Authorization Grant (스마트 TV, IoT용)

스마트 TV에서 "다른 기기에서 코드를 입력하세요" 같은 화면 본 적 있다면, 바로 그 것이다.
스마트폰에서 로그인하고, 코드를 입력하면 인증 완료

 

3️⃣ 소셜로그인 구현

Git 링크: https://github.com/Juhyun34/OAuth_study

 

🔑 Client ID와 Client Secret 발급받기

https://lucylog.tistory.com/10

[OAuth] GCP (Google Cloud Platform)에서 Client ID 생성하기 🪪

 

📄 .env파일 추가

REACT_APP_CLIENT_ID=GOOGLE_CLIENT_ID
REACT_APP_CLIENT_SECRET=GOOGLE_CLIENT_SECRET
REACT_APP_REDIRECT_URI=http://localhost:3000/redirect

 

🖥️ React + Google OAuth 2.0

App.js

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Login from './Login';

function Home() {
  return (
    <div>
      <h1>OAuth 2.0 로그인</h1>
      <Link to="/login">Google 로그인</Link>
    </div>
  );
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </Router>
  );
}

 

Login.js

import { useEffect } from 'react';

const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;
const REDIRECT_URI = process.env.REACT_APP_REDIRECT_URI;
const AUTH_URL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=email%20profile&access_type=offline`.replace(/\s+/g, '');

export default function Login() {
  useEffect(() => {
    window.location.href = AUTH_URL;
  }, []);

  return <p>로그인 중...</p>;
}

 

💡 만약 테스트 했는데 에러가 뜨면, env파일에 적힌 정보들이 정확한지 한번 더 확인해보자!