(TIL 27일차) 스타일쉐어 1차 프로젝트 API 로그인 연동(3)

로그인 API 연동 절차

1. SDK 로드
2. SDK 초기화 작업(Client ID 등 우리 웹사이트의 정보를 알려줘야 함)
3. 로그인 단계
4. 로그아웃 단계
추가로 로그인 된 상태인지 아닌지 체크하는 단계

---

페이스북 API 연동

• 페이스북 웹어플리케이션 초기 설정 풀코드(공식사이트)
• 페이스북 유저정보 가져오는 scope 설정(공식사이트)

1. SDK 로드 및 초기화 설정 작업

// index.html 파일
<script
      async
      defer
      src="https://connect.facebook.net/ko_KR/sdk.js"
></script>

// 로그인 페이지.js 
facebookSDK = () => {
    // SDK 초기 설정
    window.fbAsyncInit = function() {
      window.FB.init({
        appId: "당신의 코드",
        autoLogAppEvents: true,
        cookie: true,
        xfbml: true,
        version: "v6.0"
      });
        //  로그인 상태 체크
      window.FB.getLoginStatus(function(response) {
        if (response.status === "connected") {
          let uid = response.authResponse.userID;
          let accessToken = response.authResponse.accessToken;
          console.log(response);
        } else if (response.status === "not_authorized") {
          console.log(response);
        } else {
          console.log(response);
        }
      });
    };
    };
 // 페이스북 SDK 로드
    (function(d, s, id) {
      // Load the SDK asynchronously
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://connect.facebook.net/ko_KR/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    })(document, "script", "facebook-jssdk");

  };

2. 유저 정보 가져오는 scope 설정

loginWithFacebook = () => {
    // 유저의 정보를 불러옴
     window.FB.login(function(response) {
      window.FB.api("/me", "GET", { fields: "email" }, 				function(response) {
        console.log(response);
      });
    });
    );
  };

---

구글 API 연동

• 구글 클라우드 플랫폼-본인 프로젝트 관리 사이트
• 구글 초기 셋팅 공식 사이트
• 구글 커스텀 로그인 버튼 참고 사이트

1. SDK 로드 및 초기화 설정 작업

// index.html 파일
  <meta
      name="google-signin-client_id"
      content="당신의 코드"
    />
<script src="https://apis.google.com/js/platform.js?onload=init" async defer></script>

// 로그인 페이지.js 
googleSDK = () => {
    // 구글 SDK 초기 설정
    window["googleSDKLoaded"] = () => {
      window["gapi"].load("auth2", () => {
        this.auth2 = window["gapi"].auth2.init({
          client_id:
            "당신의 코드",
          scope: "profile email"
        });

        this.loginWithGoogle();	
      });
    };
// 구글 SDK 로드
    (function(d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.src = "https://apis.google.com/js/platform.js?onload=googleSDKLoaded";
      fjs.parentNode.insertBefore(js, fjs);
    })(document, "script", "google-jssdk");
  };

2. 유저 정보 가져오는 scope 설정

 //구글 로그인
  loginWithGoogle = () => {
    this.auth2.attachClickHandler(
      this.refs.googleLoginBtn,
      {},
      googleUser => {
        let profile = googleUser.getBasicProfile();
        console.log("Token || " + googleUser.getAuthResponse().id_token);
        console.log("ID: " + profile.getId());
        console.log("Name: " + profile.getName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());
      },
      error => {
        alert(JSON.stringify(error, undefined, 2));
      }
    );
  };

---

카카오 API 연동

• 카카오 developer 사이트(SDK, 등 커스텀버튼 구현 방법)

1. SDK 로드 및 초기화 설정 작업

// index.html 파일
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

// 로그인 페이지.js 
// 카카오 SDK 초기화 작업
 window.Kakao.init("f6b88303f2a59f0e0bd1fc1dad652f65");

2. 유저 정보 가져오는 버튼 구현(카카오는 developer 사이트에서 scope 설정해줘야 함)

loginWithKakao = () => {
    window.Kakao.Auth.login({
      success: authObj => {
        console.log(authObj);
      },
      fail: function(err) {
        console.log("에러", err);
      }
    });
  };