[OMS] 네이버 로그인 문제해결

 

네이버 로그인 CORS 문제를 해결하였습니다. 내 이전 구현방식과 문제를 해결한 구현방식에 대해 정리해 보겠습니다.

 

기존 네이버 로그인

내가 이전에 작성했던 네이버 로그인의 플로우는

1번 컴포넌트에서 네이버 로그인 버튼을 통해 인증 코드를 가져오고, 2번 컴포넌트를 NaverCallBackURL로 지정하여 해당 컴포넌트에서 토큰 발급을 요청하였습니다. 하지만 이 방법은 인증인가코드발급을 받은 후 토큰 발급이 동시에 진행되지 않았기에 사용자가 이용할 수 없는 로그인방식이었습니다.

 

 

새로운 네이버 로그인

새로운 네이버 로그인에서는 인증인가코드발급과 동시에 토큰발급요청과 응답까지 모든 로그인플로우를 한 번에 담을 수 있도록 구현하였습니다. 네이버에서 제공해 주는 sdk를 통해 간편하게 인증인가코드를 받아오고, 동시에 access_token까지 받아올 수 있었습니다.

 

const initializeNaverLogin = () => {
        const naverLogin = new naver.LoginWithNaverId({
            clientId: NAVER_CLIENT_ID,
            callbackUrl: NAVER_CALLBACK_URL,
            // 팝업창으로 로그인을 진행할 것인지?
            isPopup: false,
            // 버튼 타입 ( 색상, 타입, 크기 변경 가능 )
            loginButton: { color: "green", type: 1, height: 50 },
            callbackHandle: true,
        });
        naverLogin.init();
        }

 

이후 url로 들어온 토큰을 localStorage에 저장하여, OMS 서비스에 적용할 수 있도록 하였습니다.

const getToken = () => {
        const token = window.location.href.split("=")[1].split("&")[0];
        localStorage.setItem("token", token);
        window.location.replace("/");
    };

 두 개의 컴포넌트에서 두 번의 과정을 거쳐 진행되던 네이버 로그인에서 만난 CORS 에러는 동일한 컴포넌트에서 한 번에 진행한 로그인으로 바꾸니 만나지 않고, 로컬스토리지에 token으로 예쁘게 자리하게 되었습니다.

 

 전체코드 

const initializeNaverLogin = () => {
        const naverLogin = new naver.LoginWithNaverId({
            clientId: NAVER_CLIENT_ID,
            callbackUrl: NAVER_CALLBACK_URL,
            isPopup: false,
            loginButton: { color: "green", type: 1, height: 50 },
            callbackHandle: true,
        });
        naverLogin.init();
    };

    const accessToken = () => {
        window.location.href.includes("access_token") && getToken();
    };

    const getToken = () => {
        const token = window.location.href.split("=")[1].split("&")[0];
        localStorage.setItem("token", token);
        window.location.replace("/");
    };

    useEffect(() => {
        initializeNaverLogin();
        accessToken();
    }, []);

    return (
        <>
            <div id="naverIdLogin" />
        </>
    );