[oauth 2.0] 네아로 (네이버 아이디로 로그인) 구현 (next.js)

🙋‍♀️ 시작에 앞서

프로젝트를 진행하면서 소셜 로그인을 도입하자는 아이디어가 나왔고, 접근성 등을 고려해 네이버 아이디로 로그인을 구현하게 되었다.

네아로 연동을 위해 여러 레퍼런스들을 찾아봤지만, 대부분 CSR 방식(react, react-dom)을 활용하여 연동을 했고, SSR 방식(next.js)에서의 레퍼런스가 없었다. (내가 찾지 못한 것일수도 있다.)

나와 같이 방황하는 사람들에게 조금이나마 도움이 되고자 기록해본다!

✅ 애플리케이션 등록

1. 네아로 애플리케이션 등록 페이지에서 자신의 어플등록을 한다.
2. API 설정에서 서비스 URL : http://localhost:3000/
   (현재 자신이 개발 중인 서버 포트번호로 하면 된다.)
3. 애플리케이션 정보에서 Client ID와 Client Secret 번호를 확인한다.

✅ 네아로 버튼 생성

import { useRouter } from 'next/router';
import React, { useEffect } from 'react';

export default function OAuth() {
  const router = useRouter();
  const Login = () => {
    //ssr은 초기 window 객체를 불러오지 못한다.
    if (typeof window.naver === 'undefined') router.reload(); 
    else {
      Naver();
    }
  };
  useEffect(() => {
    Login();
  }, []);

  function Naver() {
    const naverLogin = new naver.LoginWithNaverId({
      clientId: '제공받은 clientId',
      callbackUrl: '본인의 callbackUrl',
      isPopup: false,
      loginButton: { color: 'white', type: 3, height: 50 },
      callbackHandle: true
    });
    naverLogin.init();
  }

  return <div id="naverIdLogin" onClick={Login}></div>;
}

1. API key를 발급받으며 얻은 ClinetID와 설정해주었던 CallbackURL을 해당 부분에 입력해준다.
2. isPopup : 팝업여부
3. loginButton : 네이버에서 제공해주는 버튼 디자인의 type을 선택해준다.
4. callbackHandle : callback 페이지가 분리되었을 경우 callback 페이지에서 callback처리를 해줄 수 있도록 설정한다.

여기서 ssr의 특징이 나오게 되는데, 주석 처리로도 확인할 수 있겠지만 ssr은 초기 렌더링시 window 객체를 불러오지 못한다.
이를 확인하지 못하고 자꾸 에러 메세지만 나올 때 억장이 무너지는 줄 알았다ㅋ
여러 방안을 물색해봤지만, window 객체를 불러오지 못할 때 reload()로 가져오도록 구현했다.
(더 나은 구현 방식이 있다면 공유해주시면 감사하겠습니다!)

✅ access token 가져오기

네아로는 다른 소셜로그인과 다르게 access token을 callbackUrl에 제공해준다.

https://callbackUrl#access_token=AAAAN3Z0XwDOCI76m5ACEa0t-Bahz_STNn1Yp8BLLzarwzbchsJieTTpdmAQbW-to5Hi9GoUzhM_CpLM_qwqiRAnOC4&state=9476fa0d-14d1-408e-bd28-cbff5b1b037c&token_type=bearer&expires_in=3600

callbackUrl에서 access token을 추출한 뒤 백엔드로 token을 넘겨준 후, token을 활용한 api를 만들어 api 요청을 통해 로그인 처리를 해주었다.

access token 추출

const UserProfile = () => {
    location.href.includes('access_token') && getUser();
  };
  const getUser = () => {
    const token = window.location.href.split('=')[1].split('&')[0];
    console.log(token);
  };
  useEffect(UserProfile, []);

콘솔 찍으면 access_token만 찍히는 것을 확인할 수 있다!
이렇게 token을 활용해 현재 개발중인 서비스에서 백앤드가 만든 api로 네아로 구현을 마무리하면 끝이다 🙃

개발당시 감도 제대로 안잡히고 개발한다고 아주 끙끙 거렸는데 정리하니 아주 후련하다 🤗
한 분이라도 도움이 되었으면....🙌