공부 | 네이버 아이디로 로그인 구현하기(feat. React)

리액트로 네이버 아이디로 로그인 구현하기

 

❓상황

회원가입 대신, SNS 로그인 기능 구현해보고 싶어서 진행했다.

 

📖 SNS 로그인 구현

Naver Developers setting

홈페이지 접속

 

네이버 로그인 클릭

 

오픈 API 신청

 

이용약관 동의하기

 

이용약관 동의하기

 

휴대폰 인증하면, 이렇게 표시된다.

 

애플리케이션 등록

카카오와 다르게 바로 애플리케이션을 등록한다. 이렇게 안내해주는 것이 편리해서 더 좋은거 같다.

 

검수 요청하기

검수요청은, 실제 네이버 로그인이 가능하도록 네이버에 요청하는 것이다.

나는 테스트용으로 네이버 로그인을 할 예정이니, 검수요청은 따로 하지 않을것이다.

 

나중에 기회가 된다면, 실제 네이버 로그인을 구현해봐야겠다.

 

멤버관리

네이버 로그인을 관리할 수 있는 관리자와, 테스트용 로그인 ID를 등록 할 수 있는 화면이다.

 

나는 네이버 로그인 애플리케이션 개설자이기 때문에, 따로 등록할 필요 없다.

 

네이버 JavaScript SDK 등록

JavaScript SDK 추가하기

index.html 파일안에 <script>태그를 추가한다.

https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js

 

네이버 로그인 초기화

네이버 불러오기

JavaScript SDK에 있는 naver를 선언한다.

const { naver } = window;

 

네이버 인스턴스 생성

네이버 로그인 기능 및 버튼을 구현한다.

  // 네이버 로그인 기능 및 버튼 구현
  const naverLogin = new naver.LoginWithNaverId({
    clientId: "rJOz4VuQkXYfVh49P3aO",
    callbackUrl: "http://localhost:3000",
    isPopup: true,
    loginButton: {
      color: "green",
      type: 3,
      height: 50,
    },
  });

 

네이버 개발자센터에 등록된 애플리케이션에서 ClientID, callbackURL을 확인할 수 있다.

 

객체로 loginButton을 설정할 수 있는데, type으로 네이버 로그인 버튼을 바꿀수있다.

Type 1	Type 2	Type 3

 

네이버 초기화

초기화는 한번만 하도록 useEffect를 사용한다.

  useEffect(() => {
    naverLogin.init();
    console.log("init!");
  }, []);

 

결과

 

로그인버튼을 누르면, 사용자에게 동의항목을 팝업창으로 알려준다.

 

사용자 정보 가져오기

로그인 상태 확인하여, 사용자 정보 가져오기

네이버 로그인을 한 상태인지 로그인 유무를 status로 체크한다.

그리고 useState로 선언한 user에 값을 할당하여 사용자 정보를 가져온다.

  const [user, setUser] = useState(null);
  
  const getUser = async () => {
    await naverLogin.getLoginStatus((status) => {
      console.log(`로그인?: ${status}`);
      if (status) {
        setUser({ ...naverLogin.user });
      }
    });
  };

 

팝업창 닫기

네이버 로그인 팝업창은 띄어지고 사라지지 않는다.

그래서 팝업창이 띄워지면, 기존의 페이지는 http://localhost:3000 주소로 이동시키고, 팝업창은 닫는 코드를 작성한다.

  const getUser = async () => {
    await naverLogin.getLoginStatus((status) => {
      console.log(`로그인?: ${status}`);
      if (status) {
        setUser({ ...naverLogin.user });
        window.opener.location.href = "http://localhost:3000";
        window.close();
      }
    });
  };

 

사용자 정보 가져오기

렌더링할때 사용자 정보를 가져올 수 있도록 한다.

  useEffect(() => {
    naverLogin.init();
    console.log("init!");
    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>
          <div id="naverIdLogin"></div>
        </div>
      )}
    </div>

 

결과

 

로그아웃하기

localStorage 제거하기

네이버 로그인을 하게되면, localStorage에 accessToken이 생겨서 로그인상태를 유지한다.localStorage에 저장된 값을 제거하여 로그아웃을 한다.

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

 

페이지 리로드

네이버 localStorage를 지워도 user에 여전히 사용자 정보가 있다.

처음에는 setUser를 null값을 할당했지만, 어째서인지 로그인 버튼이 생기지 않았고 그냥 리로드를 하게되었다.

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

 

결과

 

참고사항

백엔드로 accessToken 전송?

네이버 로그인시 accessToken 유효시간은 3600초이다.

유효시간이 지나면, accessToken을 재발급해야하는데 중요한점은 백엔드에서 정보를 얻기위해서는 accessToken을 재발급하여 전송해주어야한다는 점이다.

 

나는 프론트엔드만 구현했기때문에, 나중에 백엔드에 accessToken을 전송하여 백엔드측에서 사용자 정보를 얻고, 백엔드에서 프론트엔드로 사용자정보를 줘서 프론트엔드가 이를 사용할 수 있도록 구현해봐야겠다.

 

데이터 저장?

카카오 로그인을 구현할때는 localStroage에 저장하고 불러오는 형식을 진행했다.

네이버 로그인을 구현할때는, 로그인 상태를 확인과 동시에 사용자 정보를 가져올 수 있어서 localStorage에 저장하지 않았다.

 

TMI

구현해보는데 일주일 걸린거 같다.

구현이 어려워서가 아니라, 회사일과 병행하다보니 기간이 늘어지게 된거 같다.