[TIL] 2차 프로젝트 기억하고 싶은 코드 1. Naver 소셜로그인

vibe logo

◎ 뒤늦게 2차 프로젝트를 진행할 때 기억하고 싶은 코드에 대해 블로깅한다.

2차 프로젝트 때 나를 가장 괴롭혔던 naver 소셜 로그인...

유일하게 우리 프로젝트만 naver 소셜 로그인을 사용하였다.

다른 조와 정보도 공유할 수 도 없고 혼자 해야만 했다..

고생한 만큼 기억하고 싶은 코드이다.

 

1. 네이버 애플리케이션 등록

◎ 사용 목적에 맞게 설정을 해준다.

 

- API에 필요한 정보들을 체크해준다.

 

- API를 사용할 url을 적어주고, 네이버 아이디로 로그인 시 Callback URL도 적어준다.

2. 네이버 애플리케이션 목록 확인

◎ Application에서 자기가 만든 애플리케이션의 목록들을 확인할 수 있다.(test를 많이 해서 애플리케이션이 많다..)

 

 

3. public 폴더 안에 있는 index.html에 script를 추가해준다.

4.  code

function SideNav () {
 const { naver } = window;
 
 const Login = () => {
  Naver();
  UserProfile();
 }
 
 useEffect(Login, []);
 
 const Naver = () => {
    const naverLogin = new naver.LoginWithNaverId({
      clientId: 발급받은 clientId,
      callbackUrl: "http://localhost:3000/",
      isPopup: false,
      loginButton: {color: "green", type: 1, height: 30} ,
      callbackHandle: true
    });
    naverLogin.init();
  }

  const UserProfile = () => {
    window.location.href.includes('access_token') && GetUser();
    function GetUser() {
      const location = window.location.href.split('=')[1];
      const token = location.split('&')[0];
      console.log("token: ", token);
      fetch(`${API}/account/sign-in` , {
        method: "GET",
        headers : {
          "Content-type" : "application/json",
          "Authorization": token
        },
      })
      .then(res => res.json())
      .then(res => {
        localStorage.setItem("access_token", res.token);
        setUserData({
          nickname : res.nickname,
          image : res.image
        })
      })
      .catch(err => console.log("err : ", err));
    }
  };
  
  return (
    <SideLogin className="login">
      <UserInfo>
        <SideText>로그인</SideText>  
      </UserInfo>
      <LoginLink onClick={Login} id="naverIdLogin" /> 
    </SideLogin>
  )
};

- window에 있는 naver 비구조화 할당하여 선언한다.

- Login 버튼을 클릭할 때, naver 로그인 경우, id를 지정해주고 접근하여야 한다. 

 - Login 함수에 접근하여 Naver( ) 함수를 실행하고 난 뒤, UserProfile( ) 함수를 실행한다.

 - Naver 함수에 접근하여 new Naver.LoginWithNaverId({ }) 안에 네이버 개발자 도구 가이드에 있는 필요한 값들을 지정해준다.

 - UserProfile( ) 함수가 실행되면 token을 설정한다. naver 같은 경우, access_token을 url로 넘겨준다.

    그렇기 때문에 split( ) 함수를 사용하여 token 값을 추출해야 한다.

- 받아온 response를 확인하고 필요한 정보를 setState 해서 담아준다.

5. 문제

◎ 로그인 버튼을 누르고 로그인은 되는데, 이상하게 callbackUrl로 지정한 주소로 안 가고 다른 액션을 취해야 가는 현상이 생긴다.

이 문제에 대해서는 아직도 해결하고 있다.

6. 느낀 점

◎ 내가 잘못 접근했는지 몰라도 네이버 소셜 로그인은 힘들었다.

네이버 개발자 가이드를 봐도 해결 안 되는 부분도 있고 구글링을 해봐도 한계가 있었다.

그래도 구글링 해본 결과 밑에 참조된 블로그에서 많은 도움을 받았다.

소셜 로그인 기능은 필수로 해야 할 기능이며, 더 많이 접해봐야 할 거 같다.

※ 참조

https://developers.naver.com/main/

NAVER Developers

https://velog.io/@taylorkwon92/TIL-%EB%84%A4%EC%9D%B4%EB%B2%84-%EB%A1%9C%EA%B7%B8%EC%9D%B8-API-in-React-TypeScript

TIL - 네이버 로그인 API in React + TypeScript