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

2025. 3. 5. 00:08·Dev

지난 글에서 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 생성하기 🪪

1️⃣ Google Cloud Console 로그인Google Cloud Console에 로그인한다. 2️⃣ 프로젝트 선택 또는 생성Google Cloud Console에 로그인 한 후, 기존 프로젝트를 선택하거나 새로운 프로젝트를 생성한다. 3️⃣ OAut

lucylog.tistory.com

 

📄 .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파일에 적힌 정보들이 정확한지 한번 더 확인해보자!

'Dev' 카테고리의 다른 글

프론트엔드 디렉토리 정리: Barrel Export (배럴 파일 구조) (+ 사용 시 주의점)  (0) 2025.05.13
직접 써본 FSD (Feature-Sliced Design) 적용기: 깔끔함과 혼란 사이  (0) 2025.04.05
[OAuth] GCP (Google Cloud Platform)에서 Client ID 생성하기 🪪  (0) 2025.03.05
[OAuth] OAuth란? 🤔  (0) 2025.03.04
React+MapBox Geojson 올리기 (Height 속성 활용하기 )  (0) 2025.03.04
'Dev' 카테고리의 다른 글
  • 프론트엔드 디렉토리 정리: Barrel Export (배럴 파일 구조) (+ 사용 시 주의점)
  • 직접 써본 FSD (Feature-Sliced Design) 적용기: 깔끔함과 혼란 사이
  • [OAuth] GCP (Google Cloud Platform)에서 Client ID 생성하기 🪪
  • [OAuth] OAuth란? 🤔
Lucy96
Lucy96
개발새발 프론트엔드 개발자
  • Lucy96
    Lucy dev ✨
    Lucy96
  • 전체
    오늘
    어제
    • 분류 전체보기 (18)
      • JavaScript (3)
      • React (1)
      • HTTP (1)
      • GIS (1)
      • 회고 (3)
      • Dev (7)
      • CSS (1)
      • DB (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • github
  • 공지사항

  • 인기 글

  • 태그

    localStorage
    토스모닥불
    블로킹
    scss
    프론트엔드
    JavaScript
    cliend id
    OAuth 2.0
    geojson
    회고
    BEM
    소셜로그인
    논블로킹
    토스
    react
    자바스크립트엔진
    sessionStorage
    CSS
    scope
    Hoisting
    콜백큐
    oauth
    Google Cloud Platform
    gcp
    HTTP
    cors
    이벤트루프
    Mapbox
    Cookie
    webapis
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Lucy96
[OAuth] OAuth 2.0을 파헤쳐보자 🔍 + 소셜로그인 예제
상단으로

티스토리툴바