네이버 간편 로그인 구현 (react-naver-login 라이브러리)

안녕하세요! 

이번 게시글에서는 저번 게시물에서 다룬 카카오 간편 로그인에 이어, Spring + React 프로젝트의 네이버 간편 로그인 기능 구현 방법을 공유하려 합니다.

---

📌 NAVER Devlopers

네이버 간편 로그인을 구현하기 위해서는 NAVER Developers에서 애플리케이션을 등록하고 API 설정을 진행해야 합니다.

네이버 간편 로그인은 카카오와 조금 다른 방식으로 동작하는데요.

• 카카오 로그인은 로그인 요청 후 받은 토큰으로 개인정보를 가져올 수 있지만,
• 네이버 로그인은 로그인 성공 후 인증 코드를 먼저 반환하고, 이 코드를 이용해 access token을 요청한 뒤 개인정보를 가져올 수 있습니다.

보다 자세한 사항은 네이버 로그인 개발 가이드를 참고하세요.

네이버 로그인 개발가이드 - LOGIN

 

네이버 로그인 API 동작 방식

1. 사용자가 네이버 로그인 버튼을 클릭하면 https://nid.naver.com/oauth2.0/authorize URL로 리디렉트됩니다.
2. 로그인 성공 시 네이버는 Callback URL로 인증 코드를 전달합니다.
3. 프론트엔드는 이 인증 코드를 백엔드로 전송합니다.
4. 백엔드는 네이버 API (https://nid.naver.com/oauth2.0/token)를 호출해 access token을 요청하고 발급받습니다.
5. 발급받은 access token을 이용해 네이버 사용자 정보를 가져옵니다 (https://openapi.naver.com/v1/nid/me).

※ 하지만, react-naver-login 라이브러리를 사용하면 백엔드에서 별도의 인증 코드 처리가 필요 없이 바로 네이버 유저 정보를 받을 수 있습니다.

 

NAVER Developers 설정 방법

1. NAVER Developers 사이트에 접속

애플리케이션 - NAVER Developers

•  Application 등록 버튼 클릭

 

2. 애플리케이션 정보 입력

 

3. 서비스 URL 및 Callback URL 입력

• 네이버 로그인 API를 사용할 서비스 URL을 입력합니다. (예: http://localhost:3000)
• Callback URL에 네이버 로그인 후 Callback 받을 URL을 입력합니다. (예: http://localhost:3000/auth)

 

4. Client ID 및 Client Secret 확인

• 애플리케이션 등록 후, 개요 → 애플리케이션 정보에서 Client ID, Client Secret 값을 확인할 수 있습니다.
• 이 값들은 네이버 로그인 API 호출 시 필요하므로 안전하게 관리해야 합니다.

 

---

 

📌 네이버 간편 로그인 구현

 

react-naver-login 설치

npm install react-naver-login

 

 

TypeScript 인터페이스 정의

declare module 'react-naver-login' {
    interface NaverLoginProps {
      clientId: string;
      callbackUrl: string;
      render: (props: { onClick: () => void }) => JSX.Element;
      onSuccess: (response: any) => void;
      onFailure: (error: any) => void;
    }

    const NaverLogin: React.FC<NaverLoginProps>;
    export default NaverLogin;
}

• react-naver-login 라이브러리는 KakaoLogin버튼을 제공하는 react-kakao-login 라이브러리와 달리 NaverLogin 인터페이스를 직접 정의해줘야 합니다.

 

네이버 로그인 컴포넌트

import NaverLogin from 'react-naver-login';

const naverClientId = 'CLIENT_ID'; // 실제 네이버 Client ID키 사용
const callbackUrl = 'CALLBACK_URL'; // 네이버 개발자 센터에서 등록한 Callback URL

// 네이버 로그인 성공, 실패
const onNaverSuccess = (data: any) => {
	console.log(data);
	// data 객체에 유저 정보가 포함됨.
      };
      const onNaverFail = () => {
        alert('네이버 로그인에 실패했습니다. 다시 시도해주세요.');
      };

if (!naverClientId || !callbackUrl) return null;

<NaverLogin
  clientId={naverClientId}
  callbackUrl={callbackUrl}
  onSuccess={onNaverSuccess}
  onFailure={onNaverFail}
  render={(props) => (
    <button className='gsi-material-button naver' onClick={props.onClick}>
      <div className='gsi-material-button-state'></div>
      <div className='gsi-material-button-content-wrapper'>
      <div className='gsi-material-button-icon'>
        <div style={{ background: `url(${naverIcon}) no-repeat center`, width:'20px', height:'20px', backgroundSize: '40px' }} />
      </div>
      <span className='gsi-material-button-contents'>네이버 로그인</span>
    </div>
    </button>
  )}
/>

• NaverLogin 버튼을 클릭하면 토큰을 확인하여 성공과 실패 여부를 반환합니다.
• clientId는 네이버 개발자 센터에서 발급받은 Client ID를 전달합니다.
• 전달받은 clientId가 성공적으로 반환되면 네이버에서 유저 정보를 반환합니다.
• 만약 유저가 회원가입되지 않았다면, 해당 정보를 이용해 회원가입 창으로 이동하도록 처리할 수 있습니다.
• 카카오 로그인과 마찬가지로 규격을 맞추기 위해 네이버 로그인도 커스텀을 진행했습니다.

 

네이버 로그인 버튼 커스텀

• 네이버 로그인 버튼을 커스텀하실 분들은 카카오 로그인 디자인 가이드를 참고해주세요.

로그인 버튼 사용 가이드 - LOGIN

 

※ Client ID는 보안이 매우 중요합니다. 이를 .env 파일에 저장하고 gitignore로 관리하는 것이 좋습니다.

 

---

 

이상으로 이번 포스팅을 마치겠습니다.

제 게시물이 다른 분들에게도 도움이 되면 좋겠네요. 다음 게시물에서 또 인사드릴게요.

오늘도 행복한 하루 되세요!

 

2025.03.17 - [개인 프로젝트] - TalkHub - 1인 SNS 웹개발 프로젝트: 개발 과정 (카카오 간편 로그인)

TalkHub - 1인 SNS 웹개발 프로젝트: 개발 과정 (카카오 간편 로그인)