구글링 실력의 탓일까? React와 연동하는 글이면서 뭔가 상세한글은 찾아보기 힘들었다.
SDK
- public/index.html 에 sdk script 삽입
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
</head>
<body>
</body>
</html>누군가에게 당연한 것들이 나에게는 시간을 들여서 고민을 하고 답을 찾아야만 할때가 있다.
네이버 공식문서에는 html 과 Javascript를 사용하는 예제만 있었고 또 HTML에 JS쓰고 싶지않아! 라는 생각이 들어, 작성 방법을 달리해보기로 했다.
함수로 만들어버리기
const { naver } = window;
const Naver = () => {
const naverLogin = new naver.LoginWithNaverId({
clientId: REACT_APP_NAVER_CLIENT_ID,
callbackUrl: REACT_APP_NAVER_CALLBACK_URL,
isPopup: false,
loginButton: { color: 'green', type: 3, height: '50' }
});
naverLogin.init();
};Naver라는 컴포넌트는 이런식으로 구성이 되어있습니다.
API key를 발급받으며 얻은 ClinetID와 설정해주었던 CallbackURL을 맞는 자리에 넣어주고 네아로가 팝업 형식으로 나타날 것인지 리다이렉트 형식으로 나타날 것인지는 isPopup 값으로 false값을 준다면 리다이렉트 true면 팝업으로 나타날 것입니다.
CallbackURL이 API설정에서 정해준거와 다르다면 로그인 창에서 문제를 알려주니 꼭 맞춰줘야겠습니다.
로그인 버튼의 생김새도 정해줄 수 있습니다.
- 실행 부분
naverLogin.init()으로 로그인 과정을 거치면 Access_token / tokenType / expirein을 URL로 전달해줍니다.
const UserProfile = () => {
window.location.href.includes('access_token') && GetUser();
function GetUser() {
const location = window.location.href.split('=')[1];
const form_data = new FormData();
const item:any = {
token: location.split('&')[0],
};
for (const key in item) {
form_data.append(key, item[key]);
}
fetch(${유저 토큰으로 유저 정보를 가져오는 backend api url}, {
method: 'POST',
body: form_data,
}).then((res) => res.json())
.then((resjson) => {
if (resjson.responseCode == '403') {
// 사용자가 없으니 회원가입 창으로
} else if (resjson.responseCode == '200') {
// 로그인이 되었으니 이 후 process 로 이동
}
}).catch((err) => console.log(err));
}
};URL로 전달해주었으니 URL을 가공하여 토큰값을 사용하였습니다. 받은 토큰으로 회원가입이든 백엔드 개발자와 상의를 통하여 어떤 액션을 할 지 정해주면 됩니다.
사실 처음으로 해보아서 이런 로직이 맞는지 불필요한 process는 없는지 잘 모르겠습니다만 작동은 한다.
실-행
const NaverLogin = () => {
Naver();
UserProfile();
}위 코드로 로직을 차례대로 호출하면서 실행을 하였습니다.
네아로를 진행하면서 힘들었던점
- 네이버 로그인 이미지를 커스텀하여 해당 이미지가 아닌 버튼을 클릭하였을때에는 로그인 로직이 실행되지 않았습니다. 이 부분은 useRef 등을 활용하여 해결을 했지만 근본적인 문제를 파악하지 못했다.
- token을 활용하여 user정보를 불러오는 API는 클라이언트에서 호출하였을 때에 CORS에러를 뱉었습니다. 그래서 서버로 토큰을 전달하고 서버에서 호출하여 결과값을 다시 클라이언트로 전달해주는 로직으로 구현했습니다. 원래 해당 API는 클라이언트에서 사용이 불가한것인지 더 알아봐야 할 것 같습니다.
결과를 보니 많지 않은 코드로 구현을 했는데, 시간은 참 많이 들었던 작업이였습니다.
코린이
커스텀 버튼 useRef 로 어떻게 작업하셨나요?