프로젝트를 진행하면서 소셜 로그인을 도입하자는 아이디어가 나왔고, 접근성 등을 고려해 네이버 아이디로 로그인을 구현하게 되었다.
네아로 연동을 위해 여러 레퍼런스들을 찾아봤지만, 대부분 CSR 방식(react, react-dom)을 활용하여 연동을 했고, SSR 방식(next.js)에서의 레퍼런스가 없었다. (내가 찾지 못한 것일수도 있다.)
나와 같이 방황하는 사람들에게 조금이나마 도움이 되고자 기록해본다!
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>;
}
여기서 ssr의 특징이 나오게 되는데, 주석 처리로도 확인할 수 있겠지만 ssr은 초기 렌더링시 window 객체를 불러오지 못한다.
이를 확인하지 못하고 자꾸 에러 메세지만 나올 때 억장이 무너지는 줄 알았다ㅋ
여러 방안을 물색해봤지만, window 객체를 불러오지 못할 때 reload()로 가져오도록 구현했다.
(더 나은 구현 방식이 있다면 공유해주시면 감사하겠습니다!)
네아로는 다른 소셜로그인과 다르게 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로 네아로 구현을 마무리하면 끝이다 🙃
개발당시 감도 제대로 안잡히고 개발한다고 아주 끙끙 거렸는데 정리하니 아주 후련하다 🤗
한 분이라도 도움이 되었으면....🙌