의외로 가장 자료가 없어서 구현하기 까다로웠던 네이버 로그인. 로그인 버튼을 자유롭게 커스텀까지하고 싶은 욕심에 더욱 구글링이 많았던 것 같습니다.
네아로 Clinet ID와 Clinet Secret을 발급받는 방법은 생략하고 바로 적용하는 부분으로 네이버 로그인 구현을 시작해보겠습니다!
1. script 태그 삽입
pages 폴더 안에 있는 _document.tsx 파일의 <body> 태그 안에 아래와 같이 script 태그를 작성해줍시다.
// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render(){
return(
<Html>
<Head>...</Head>
<body>
<Main/>
<script defer type="text/javascript" src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charSet="utf-8"></script>
<NextScript />
</body>
</Html>
);
}
}2. 컴포넌트 작성
import React, { useState, useEffect } from "react";
declare global {
interface Window {
naver: any;
}
}
export default function NaverLogin() {
useEffect(() => {
initNaverLogin();
getData();
}
}, []);
const initNaverLogin = () => {
const naverLogin = new window.naver.LoginWithNaverId({
clientId: process.env.NEXT_PUBLIC_NAVER_CLIENT_ID,
callbackUrl: `${process.env.NEXT_PUBLIC_URL}/login?naver=true`,
isPopup: false,
loginButton: { color: "green", type: 1, height: 60 },
callbackHandle: true,
});
naverLogin.init();
};
const getData = () => {
if (window.location.href.includes("access_token")) {
console.log("We got AccessToken");
}
};
return (
<React.Fragment>
<div id="naverIdLogin"/>
</React.Fragment>
);
}
로그인 버튼 디자인은 기본적으로 initNaverLogin 함수 속에서
loginButton: { color: "green", type: 1, height: 60 },
를 통해 결정됩니다.
참고로 내가 처음에 적용한 1번 타입은 아래와 같이 생겼다.
다른 타입으로 이것저것 바꿔봤지만 네이버스러움이 가득 풍기는 디자인이라 좀 더 마음대로 커스텀하기 위해 추가로 코드를 작성했습니다.
3. 커스텀 하기
import React, { useState, useEffect } from "react";
declare global {
interface Window {
naver: any;
}
}
export default function NaverLogin() {
useEffect(() => {
initNaverLogin();
getData();
}
}, []);
const initNaverLogin = () => {
const naverLogin = new window.naver.LoginWithNaverId({
clientId: process.env.NEXT_PUBLIC_NAVER_CLIENT_ID,
callbackUrl: `${process.env.NEXT_PUBLIC_URL}/login?naver=true`,
isPopup: false,
loginButton: { color: "green", type: 1, height: 60 },
callbackHandle: true,
});
naverLogin.init();
};
const getData = () => {
if (window.location.href.includes("access_token")) {
console.log("We got AccessToken");
}
};
const handleNaverClick = () => {
const naverLoginButton = document.getElementById(
"naverIdLogin_loginButton"
);
if (naverLoginButton) naverLoginButton.click();
};
return (
<React.Fragment>
<div onClick={handleNaverClick}>네이버로 로그인하기</div>
<div id="naverIdLogin" style={{ display: "none" }}/>
</React.Fragment>
);
}- 기존 디자인의 네이버 버튼을 숨겨주고 원하는 디자인의 로그인 버튼을 만든다.
- 커스텀한 부분이 클릭되면 기존 네이버 버튼이 클릭되도록 하는 handleNaverClick 함수를 작성한다.
- 커스텀한 부분에 handleNaverClick 함수를 추가한다.
이렇게 하면 원하는 디자인으로 네이버 로그인 버튼을 만들 수 있습니다!
온갖 코드를 참고하며 이래저래 가장 까다로웠던 네이버 로그인 버튼 구현이었습니다. 이 글이 누군가에게는 도움이되면 좋겠네요..
참고한 주소
pizz@ttang