목적
얼마 전 프로젝트에서 구글과 카카오 소셜 로그인 관련 코드 리팩토링(#233 등)을 내가 도맡아 진행하게 되었다. 예전에 구글 소셜 로그인을 간단하게 구현해본 경험이 있어서 그렇게까지 큰 어려움은 없었지만, 프로젝트가 모노레포 환경에서 카카오 로그인까지 함께 구현하고 어드민 구분 로직까지 넣으면서 코드 재사용성을 높여야 했기에 꽤나 복잡했다.
아무튼 오늘은 단순히 개발만 할 줄 아는 수준을 넘어서, 소셜 로그인 자체의 개념과 정확한 흐름을 정리하고 구현 방법까지 기록해두면 좋을 것 같아 글로 정리해보려 한다.
OAuth?
소셜 로그인의 흐름을 알아보기 전에, 그 핵심 개념인 OAuth부터 알아보자.
OAuth(Open Authorization)는 사용자가 자신의 개인정보를 다른 서비스에 직접 제공하지 않고도 해당 서비스에 대한 접근 권한을 위임할 수 있도록 하는 개방형 표준 프로토콜입니다.
위 설명만 보면 다소 추상적으로 느껴질 수 있다. 쉽게 말해보면, OAuth는 "내 개인정보를 알려주지 않고도 다른 서비스에 일부 권한을 맡길 수 있게 해주는 안전한 방법" 이라고 생각하면 된다.
장점
대표적인 장점은 크게 세 가지로 정리할 수 있다.
-
보안성: 새로운 앱에 이메일이나 비밀번호 같은 개인정보를 직접 입력하지 않아도 된다.
-
편리성: 별도의 회원가입 없이, 이미 사용 중인 계정(구글, 카카오 등)으로 빠르게 로그인할 수 있다.
-
제어성: 새 앱이 내 정보 중 어떤 항목에 접근할 수 있을지 직접 선택하고 관리할 수 있다.
프로세스
구현
로그인 버튼
'use client';
const GOOGLE_URL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URL}&response_type=code&scope=email profile`;
const GoogleLogin = () => {
const handleGoogleLogin = () => {
window.location.href = GOOGLE_URL;
};
return <button onClick={handleGoogleLogin}>구글 로그인</button>;
};
export default GoogleLogin;위와 같이 만든 버튼을 클릭하면 아래와 같은 화면으로 이동하게 된다.
이 화면에서 로그인할 계정을 선택하면 흔히 말하는 콜백(callback) 페이지로 이동한다.
'use client';
import { useEffect } from 'react';
import { useSearchParams } from 'next/navigation';
const GoogleCallback = () => {
const searchParams = useSearchParams();
const code = searchParams.get('code');
useEffect(() => {
if (code) {
fetch('/api/auth/google', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ code }),
});
}
}, [code]);
return <div>로그인 처리 중...</div>;
};
export default GoogleCallback;계정을 선택한 뒤 콜백 페이지로 이동하면, 구글에서 제공한 code 쿼리 파라미터를 추출하여 서버로 전달한다. 서버에서 해당 코드를 사용해 로그인 처리를 완료하면 최종적으로 로그인에 성공하게 된다.
마무리
오늘은 소셜 로그인에서 중요한 개념인 OAuth, 로그인 프로세스, 그리고 기본적인 구현 방법까지 간단히 정리해봤다. 사실 OAuth 로그인의 경우 관련 라이브러리도 많이 있어서, 시간이 부족하다면 직접 구현하기보다는 라이브러리를 활용하는 것도 좋을 것 같다.
