React

OAuth 2.0과 OpenID Connect 완벽 이해하기

와이다이어리 2025. 7. 1. 20:47
반응형

OAuth 2.0이란 무엇인가?

OAuth 2.0은 “권한 위임”을 위한 프로토콜입니다.
쉽게 말해, 사용자가 자신의 로그인 정보를 직접 앱에 넘기지 않고도,
앱이 사용자를 대신해 다른 서비스(구글, 페이스북 등)에서 정보를 얻을 수 있게 해줍니다.

예를 들어 “구글 계정으로 로그인”을 할 때, 내 비밀번호가 내 앱 서버에 저장되거나 전달되지 않고,
구글만이 사용자를 인증하고, 앱은 구글이 발급해준 ‘토큰’으로 필요한 정보에 접근하는 방식이죠.

OAuth 2.0의 주요 구성요소

OAuth 2.0은 다음 네 가지 주체가 상호작용하며 동작합니다.

  1. Resource Owner(리소스 소유자)
    • 즉 실제 사용자입니다.
  2. Client(클라이언트)
    • 사용자의 권한을 위임받아 리소스 서버에 접근하려는 앱 또는 서비스입니다.
  3. Authorization Server(인가 서버)
    • 사용자를 인증하고 권한 부여 토큰을 발급하는 서버입니다. (예: 구글 로그인 서버)
  4. Resource Server(리소스 서버)
    • 실제 보호된 사용자 데이터를 가진 서버입니다. 종종 인가 서버와 동일한 경우가 많습니다.
    •  

OAuth 2.0 기본 흐름: 인가 코드 그랜트 방식

가장 흔히 쓰이는 인가 코드 그랜트(Authorization Code Grant) 방식의 기본 흐름은 다음과 같습니다.

  1. 사용자가 클라이언트 앱에서 로그인 버튼을 누르면, 앱은 사용자를 구글 같은 인가 서버의 로그인 페이지로 리디렉션합니다.
  2. 사용자는 구글에서 로그인하고 권한을 승인합니다.
  3. 구글은 인가 코드(Authorization Code)를 클라이언트가 지정한 리디렉션 URI로 전달합니다.
  4. 클라이언트는 이 인가 코드를 받아, 구글 인가 서버에 토큰 요청을 합니다.
  5. 구글은 액세스 토큰(Access Token)과 (필요하면) 리프레시 토큰(Refresh Token)을 클라이언트에 발급합니다.
  6. 클라이언트는 이 액세스 토큰을 이용해 구글 API에 접근하여 사용자 정보를 가져옵니다.

OpenID Connect란 무엇인가?

OAuth 2.0이 권한 위임에 집중했다면, OpenID Connect는 여기에 사용자 “인증” 기능을 추가한 확장 규격입니다.

즉, OAuth 2.0은 “이 앱이 어떤 권한을 가졌는지”를 증명하는 프로토콜이고,
OpenID Connect는 “이 사용자가 누구인지”를 증명하는 프로토콜이라고 이해하면 쉽습니다.

OpenID Connect는 OAuth 2.0 토큰 교환 과정에서 ID 토큰이라는 JWT(JSON Web Token)를 추가로 발급합니다.
이 ID 토큰에는 사용자 고유 식별자, 이메일, 이름 같은 정보가 담겨 있습니다.

덕분에 클라이언트는 별도 API 호출 없이 이 토큰만으로 로그인한 사용자를 식별할 수 있습니다.

 

OAuth 2.0과 OpenID Connect의 차이점 정리

  • OAuth 2.0은 사용자 리소스에 대한 접근 권한을 위임하는 데 초점이 맞춰져 있습니다.
  • OpenID Connect는 OAuth 2.0 위에 사용자 인증 정보를 추가하여, “누가 로그인했는지”를 확실히 알 수 있도록 합니다.

즉, OAuth 2.0만 사용하면 누가 로그인했는지 명확하지 않고, 단지 액세스 권한만 있는 상태지만
OpenID Connect를 사용하면 인증과 권한 위임이 모두 안전하고 명확하게 이뤄집니다.

 

React 앱에서 OAuth 2.0을 사용하는 방법

실제로 React 앱에서 OAuth 2.0을 직접 구현하려면,
사용자를 OAuth 제공자의 인증 페이지로 리디렉션하고, 인증 후 돌아온 인가 코드를 서버에서 토큰으로 교환하는 과정이 필요합니다.

아래는 간단한 “구글 로그인” 버튼과, 인증 페이지로 이동하는 코드 예시입니다.

 

const clientId = "YOUR_GOOGLE_CLIENT_ID";
const redirectUri = "http://localhost:3000/oauth2/callback";

const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?` +
  `client_id=${clientId}&` +
  `redirect_uri=${encodeURIComponent(redirectUri)}&` +
  `response_type=code&` +
  `scope=openid%20email%20profile&` +
  `access_type=offline&` +
  `prompt=consent`;

function GoogleLoginButton() {
  const handleLogin = () => {
    window.location.href = googleAuthUrl;
  };

  return (
    <button onClick={handleLogin}>
      구글로 로그인하기
    </button>
  );
}

export default GoogleLoginButton;

 

이후 인증이 끝나면, 인가 코드를 백엔드 서버에서 받아 액세스 토큰을 요청하고, 사용자 정보를 가져오는 작업이 이어집니다.

 

반응형
저작자표시 (새창열림)