[react] 네이버 로그인 구현 & 커스텀

서연주·2021년 10월 16일
1

Solution

목록 보기
3/7

의외로 가장 자료가 없어서 구현하기 까다로웠던 네이버 로그인. 로그인 버튼을 자유롭게 커스텀까지하고 싶은 욕심에 더욱 구글링이 많았던 것 같습니다.

네아로 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번 타입은 아래와 같이 생겼다.
네이버 로그인 버튼 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>
  );
}
  1. 기존 디자인의 네이버 버튼을 숨겨주고 원하는 디자인의 로그인 버튼을 만든다.
  2. 커스텀한 부분이 클릭되면 기존 네이버 버튼이 클릭되도록 하는 handleNaverClick 함수를 작성한다.
  3. 커스텀한 부분에 handleNaverClick 함수를 추가한다.

이렇게 하면 원하는 디자인으로 네이버 로그인 버튼을 만들 수 있습니다!

온갖 코드를 참고하며 이래저래 가장 까다로웠던 네이버 로그인 버튼 구현이었습니다. 이 글이 누군가에게는 도움이되면 좋겠네요..

참고한 주소

profile
pizz@ttang

0개의 댓글