네이버-개발자센터-안내

React로 네이버 로그인 구현하기 간단한 방법과 팁

by

React로 네이버 로그인 구현 간단하고 효과적인 방법

리액트에서 네이버 로그인을 구현하는 방법을 살펴보죠. 많은 개발자들이 SNS 로그인을 통해 사용자 경험을 높이고, 회원가입 과정을 간소화하고 있어요. 특히, 네이버 로그인은 한국 사용자들에게 인기 있는 선택이죠. 그럼 이 기능을 어떻게 만들 수 있을까요?

네이버-개발자센터-안내

1. 네이버 개발자센터 설정

네이버 로그인을 구현하려면 먼저 네이버 개발자센터에 가서 오픈 API를 신청하고 애플리케이션을 등록해야 해요. 이 과정은 꼭 필요하며, 여기서 발급받는 클라이언트 ID, 콜백 URL, 클라이언트 시크릿 키 등을 사용할 거예요.

  1. 홈페이지 접속: 네이버 개발자센터에 로그인합니다.
  2. 오픈 API 신청: 오픈 API 이용 신청을 진행해요.
  3. 애플리케이션 등록: 필요한 정보를 입력하여 애플리케이션을 등록합니다.
  4. 검수 요청: 실제 서비스에 사용할 경우 검수 요청이 필요하지만, 테스트 목적으로는 생략할 수 있어요.

이 단계가 끝나면 다음 단계로 넘어가 볼까요?

네이버-개발자센터-홈페이지

2. JavaScript SDK 등록 및 초기화

두 번째 단계는 index.html 파일에 네이버 JavaScript SDK를 추가하는 거예요. 아래 코드를 삽입하면 됩니다.

<script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js"></script>

그 다음, naver.LoginWithNaverId 인스턴스를 생성해서 로그인 기능을 초기화해야 해요.

const naverLogin = new naver.LoginWithNaverId({
  clientId: "YOUR_CLIENT_ID",
  callbackUrl: "YOUR_CALLBACK_URL",
  isPopup: true,
  loginButton: {
    color: "green",
    type: 3,
    height: 50,
  },
});

useEffect(() => {
  naverLogin.init();
}, []);

이렇게 하면 이제 네이버 로그인 기능이 준비됐어요.

네이버 개발자센터 홈페이지 바로가기

3. 로그인 기능 구현

로그인 버튼을 클릭하면 사용자에게 동의 항목을 팝업창으로 보여주고, 로그인 상태를 확인해서 사용자 정보를 가져오는 로직을 만들어야 해요.

const [user, setUser] = useState(null);

const getUser = async () => {
  await naverLogin.getLoginStatus((status) => {
    if (status) {
      setUser({ ...naverLogin.user });
      window.opener.location.href = "http://localhost:3000";
      window.close();
    }
  });
};

useEffect(() => {
  getUser();
}, []);

로그인 성공 후에는 사용자 정보를 화면에 표시해줘야겠죠.

return (
  <div>
    {user ? (
      <div>
        <h2>네이버 로그인 성공!</h2>
        <h3>사용자 이름</h3>
        <div>{user.name}</div>
        <h3>사용자 이메일</h3>
        <div>{user.email}</div>
        <h3>프로필 사진</h3>
        <img src={user.profile_image} alt="프로필 사진" />
        <button onClick={naverLogout}>로그아웃</button>
      </div>
    ) : (
      <div id="naverIdLogin"></div>
    )}
  </div>
);

4. 로그아웃 기능 구현

로그아웃 기능도 빼놓지 말아야 해요! 이를 위해 localStorage에서 액세스 토큰을 제거하고 페이지를 새로 고치는 코드를 작성해야 합니다.

const naverLogout = () => {
  localStorage.removeItem("com.naver.nid.access_token");
  window.location.reload();
};

5. 액세스 토큰 사용

로그인 후 발급받은 액세스 토큰은 백엔드와 통신하여 사용자 정보를 얻는 데 쓰여요. 이 토큰의 유효 기간은 대략 한 시간 정도입니다.

import { useLocation } from 'react-router-dom';

const location = useLocation();

const getNaverToken = () => {
  if (!location.hash) return;
  const token = location.hash.split('=')[1].split('&')[0];
};

useEffect(() => {
  getNaverToken();
}, []);

결론

React로 네이버 로그인을 구현하는 과정은 처음에는 조금 복잡해 보일 수 있지만, 단계별로 진행하면 쉽게 이해할 수 있어요. 이 글을 통해 리액트에서 네이버 로그인을 성공적으로 설정할 수 있었으면 좋겠네요! 그리고 백엔드와 통신해서 액세스 토큰을 재발급하고 사용자 정보를 관리하는 방법도 고민해보세요.

네이버 로그인이 완료되면 사용자들이 훨씬 편리하게 서비스를 이용할 수 있고, 개발자로서 더 많은 고객들을 유치할 기회를 얻게 될 거예요. 이제 여러분도 도전해보세요!

Leave a Comment