[Front end] SNS 로그인 연동(네이버, 카카오) with React

 

SNS 로그인

SNS 연계에 필요한 개발자 및 앱 등록은 간단하므로 샘플 소스 위주로 정리하였다. 실제 로그인 연동 및 사용자 정보까지 연동이 되는 React 코드이다.

 

developers.naver.com

NAVER Developers

developers.kakao.com

Kakao Developers

 

정보 제공 동의 철회 방법(로그인 테스트)

네이버

• 네이버 앱 -> 설정 -> 내 정보 보안 기능 -> 보안 설정 -> 네이버와 연결된 서비스 관리 -> 정보 제공 철회

카카오

• 카카오톡 앱 -> 설정 -> 개인/보안 -> 개인정보 관리 -> 카카오 계정 및 연결된 서비스 -> 연결된 서비스 관리 -> 외부 서비스 -> 연결 끊기

 

네이버

 

카카오

 

NaverLogin

import React, { Component } from "react";

class NaverLogin extends Component {
  componentDidMount() {
    // Naver sdk import
    const naverScript = document.createElement("script");
    naverScript.src =
      "https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js";
    naverScript.type = "text/javascript";
    document.head.appendChild(naverScript);

    // Naver sdk 스크립트 로드 완료시
    naverScript.onload = () => {
      const naverLogin = new window.naver.LoginWithNaverId({
        clientId: "Naver Client ID",
        callbackUrl: "로그인 성공이후 URL",
        callbackHandle: true,
        isPopup: false, // 로그인 팝업여부
        loginButton: {
          color: "green", // 색상(white, green)
          type: 3, // 버튼타입(1,2,3)
          height: 60, // 배너 및 버튼 높이
        },
      });

      naverLogin.init();
      naverLogin.logout(); // 네이버 로그인이 계속 유지되는 경우가 있다. 초기화시 로그아웃
      naverLogin.getLoginStatus((status) => {
        if (status) {
          console.log("Naver 로그인 상태", naverLogin.user);
          const { id, email, gender } = naverLogin.user;

          // 필수 제공 동의 조건
          if (gender == undefined) {
            alert("성별은 필수 동의 입니다. 정보제공을 동의해주세요.");
            naverLogin.reprompt();
            return;
          }
        } else {
          console.log("Naver 비 로그인 상태");
        }
      });
    };
  }

  render() {
    return <div id="naverIdLogin"></div>;
  }
}

export default NaverLogin;

 

KakaoLogin

import React, { Component } from "react";

class KakaoLogin extends Component {
  componentDidMount() {
    // Kakao sdk import
    const kakaoScript = document.createElement("script");
    kakaoScript.src = "https://developers.kakao.com/sdk/js/kakao.min.js";
    document.head.appendChild(kakaoScript);

    // Kakao sdk 스크립트 로드 완료시
    kakaoScript.onload = () => {
      window.Kakao.init("Kakao API KEY");
      window.Kakao.Auth.createLoginButton({
        container: "#kakao-login-btn",
        success: (auth) => {
          console.log("Kakao 로그인 완료", auth);
          // Kakao 로그인 성공시, 사용자정보 API 호출
          window.Kakao.API.request({
            url: "/v2/user/me",
            success: (res) => {
              console.log("Kakao 사용자 정보", res);
            },
            fail: (err) => {
              console.log(err);
            },
          });
        },
        fail: (err) => {
          console.log(err);
        },
      });
    };
  }

  render() {
    return <button type="button" id="kakao-login-btn"></button>;
  }
}

export default KakaoLogin;