33. 항해99 실전프로젝트- 네이버아이디로 로그인 (네이버로그인 API) 소셜로그인 네이버, 네이버로그인 원형 버튼, 버튼 커스텀, 네이버로그인 로그아웃방법, 리액트 코드

소셜로그인을 구현하기로 한 우리 팀

소셜로그인중에서도 네이버가 제일 정보가 없었습니다..

네이버로그인 구현을 거의 일주일 내내 했는데

참 외롭고 힘든 시간이었습니다. ..

 

네이버 developer만 봐서는 구현하기 너무 어렵고,

검색해서 나오는 블로그들 다 참고해봤지만 처음부터 끝까지 잘 나와있는 곳이 없어서

여기저기 코드 섞이다보니 더 헷갈리고 너무 어렵더라고요..

그래서 도중에 포기하고싶단 생각을 얼마나 많이했는지

 

어찌어찌 시행착오 끝에 되긴 됐습니다 😅

 

이건 블로그에 꼭 써서 오래 보관해야겠다 다짐헀었죠..

 

네이버로그인도 카카오로그인 검색해보면 금방 나오는 그 로직 그대로

네이버로그인페이지로 이동시켜서 수집정보에 동의 이후에 로그인버튼을 누르면 

우리 서버로 네이버의 access token을 보냅니다.  

access token은 어딨냐면, 

주소창에 이렇게 입력이 됩니다. 

여기서 토큰을 추출해내는 코드는 아래와 같습니다. 

const navertoken = window.location.href.split("=")[1].split("&")[0];

서버측으로 이 코드를 header든 body든 담아서 보내면

서버에서는 네이버acess token과 함께 유저정보를 확인할 수 있다고 하더라고요.

그럼 서버가 클라이언트에게 필요한 정보 (이름, 닉네임, 이메일, 등.. 수집하는 정보의 범위에 따라) 를 response값으로 서버에서 우리 사이트에 접근할 수 있는 Authorization과 함께 보내줍니다. 

 

그럼 프론트엔드측은 그 Authorization을 로컬스토리지나 세션스토리지, 쿠키 등에 보관하면 됩니다

 

FE는 여기까지만 해내면 됩니다!

---

그럼 전체코드 갈게여

 

NaverLogin.jsx

import { useEffect } from "react";

const NaverLogin = () => {
  const { naver } = window;

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

  // 화면 첫 렌더링이후 바로 실행
  useEffect(() => {
    initializeNaverLogin();
  }, []);

  return (
    <>
      {/*네이버 로그인아이콘표시 */}
      <div id="naverIdLogin" />
    </>
  );
};
export default NaverLogin;

이게 NaverLogin 버튼이 되는 컴포넌트입니다.

이건 버튼을 커스텀하기 전 코드이구요, 

{ color: "green", type: 1, height: 58 }

요기 type부분이 버튼의 모양을 결정합니다. 

총 세가지인데 세개 모두 사각형.

 

저희팀은 원형으로 디자인이 나와서 모양을 살짝 변경을 해줄겁니다! 

가장 아래에 버튼 커스텀 코드 작성할게요.

 

NaverLoginLoading.jsx

import axios from "axios";
import React, { useEffect } from "react";

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

  const getToken = async () => {
    const navertoken = window.location.href.split("=")[1].split("&")[0];
    console.log(navertoken);
  };

  const sendTokenAndGetAuthorization = async () => {
    await axios
      .post(process.env.REACT_APP_BASE_URL, {
      //token이라는 이름으로 네이버의 access token을 담아보냅니다. 
        token: navertoken,
      }) 
      .then((res) => {
      //응답은 콘솔로 찍어보는게 가장 명확한 방법입니다. 서버의 응답에서 필요한 값들을 처리하는 코드를 이 아래에 작성하면 됩니다. 
        console.log("res", res);
        console.log("email?", res.data.data.email);
        console.log("member?", res.data.message);
        const email = res.data.data.email;
        //여기가 이미 가입이 된 유저인지, 새로 가입할 유저인지 분기하는 지점입니다.
        if (res.data.message !== "non-member") {
          const accessToken = res.headers.get("Authorization");
          const nickname = res.data.data.nickname;
          const userId = res.data.data.userId;
          const profileImage = res.data.data.profileImage;
          console.log(nickname);
          sessionStorage.setItem("token", accessToken);
          sessionStorage.setItem("nickname", nickname);
          sessionStorage.setItem("profileImage", profileImage);
          sessionStorage.setItem("userId", userId);
          alert("환영합니다");
          return window.location.assign("/main");

          //멤버가 아닐시 프로필 정보를 받는 페이지로 돌려야합니다.
        } else if (res.data.message === "non-member") {
          alert("프로필 정보를 입력해주세요.");
          sessionStorage.setItem("email", email);
          sessionStorage.setItem("socialCode", "NAVER");
          return window.location.assign("/signup/setProfileName");
        }
      });
  };

  useEffect(() => {
    userAccessToken();
    getToken();
    sendTokenAndGetAuthorization();
  }, []);

  return (
    <div>
      <div>loding...</div>
    </div>
  );
}

export default NaverLoginLoding;

거의 초반 일주일 내내 짠 코드가 이게 다네요. ㅎ..ㅎ

특히 이미 가입한 유저는 바로 로그인처리를시키고 가입이 필요한 유저이면 가입절차로 보내는 지점에 대해선 소개되어있는 글이 없어서 이 로직을 이해하기가 쉽지 않았습니다. 

 

네이버로그인API는 로그아웃기능을 지원하지 않습니다. 

https://developers.naver.com/docs/login/web/web.md

접근토큰삭제부분을 참고하세요

Web 애플리케이션 - LOGIN

https://nid.naver.com/oauth2.0/token?grant_type=delete&client_id={클라이언트 아이디}&client_secret={클라이언트 시크릿}&access_token={접근 토큰}&service_provider=NAVER

여기에 모두 입력한 후 주소창에 보내면 로그아웃처리가됩니다.

 

 

 

 

이 방법이 100%정답은 아니겠지만 저처럼 헤매고있는 분이 계시다면 조금이라도 도움이 되길.....

 

 

네이버로그인버튼 커스텀하기

(네이버에서 규정하는 디자인가이드를 따라야함.)

저희팀은 원형으로 선택했고, 

기본적으로 제공하는 버튼타입은 모두 사각형이여서, 

버튼을 index.css에서 display:none 처리 한 다음

새 버튼 이미지를 useRef를 이용해 클릭시 대신 응답처리를 하게 만들었다. 

 

index.css

#naverIdLogin {
  display: none;
}

 

NaverLogin.jsx

import { useEffect, useRef } from "react";
import NaverUnion from "../../img/NaverUnion.png";

const NaverLogin = () => {
  const naverRef = useRef();
  const { naver } = window;
  const NAVER_CLIENT_ID = process.env.REACT_APP_NAVER_CLIENT_ID;
  const NAVER_CALLBACK_URL = process.env.REACT_APP_NAVER_CALLBACK_URL;
  const initializeNaverLogin = () => {
    const naverLogin = new naver.LoginWithNaverId({
      clientId: NAVER_CLIENT_ID,
      callbackUrl: NAVER_CALLBACK_URL,
      isPopup: false,
      loginButton: { color: "green", type: 1, height: 58 },
      callbackHandle: true,
    });
    naverLogin.init();
  };
  
  //원형아이콘클릭해도 네이버로그인이 가능.
  const handleClick = () => {
    naverRef.current.children[0].click();
  };
  
  // 화면 첫 렌더링이후 바로 실행
  useEffect(() => {
    initializeNaverLogin();
  }, []);

  return (
    <>
      {/*기존 네이버 로그인아이콘-보여지지않을것임 */}
      <div ref={naverRef} id="naverIdLogin" />
      {/* 원형버튼 */}
      <img
        onClick={handleClick}
        className="h-[60px]"
        src={NaverUnion}
        alt="네이버로고이미지"
      />
    </>
  );
};
export default NaverLogin;

네이버로그인 구현 끝!