React에 Facebook 로그인 얹어보기

소셜로그인 기능을 붙이는건 처음이라 검색을 해봤더니, 온통 react-facebook-login 사용방법밖에 없어서 직접 써봅니다.
(사실 위 라이브러리 가져다 쓰는게 편하..ㅂ...)
본 글에서는 간단한 정보만 불러오는 내용만 기재하니 자세한 내용은 페이스북 개발자 사이트를 참고하시면 됩니다.

본 작업에 앞서, 페이스북 개발자 사이트에서 키를 발급받아야 합니다.
하지만 이 부분은 스킵하도록 하죠.

일단, 컴포넌트를 하나 생성해 줍니다.

const FbLogin = ({}) => {
  return (
    <Button>페이스북 로그인</Button>
  );
};  

그 다음, Facebook SDK를 불러오겠습니다.

useEffect(() => {
  setFBAsyncInit();
  loadSdkAsynchronously();
}, []);

function setFBAsyncInit() {
  (window as any).fbAsyncInit = () => {
    (window as any).FB.init({
      version: `v6.0`, // 작성일 기준 버전이 v6.0 입니다.
      appId: 'appId', // 발급받은 App ID 를 넣어줍니다.
      xfbml: true,
      cookie: true,
    });
  };
}

function loadSdkAsynchronously() {
  ((d, s, id) => { //이런것 까지 타입을...잡아야 하는지는 잘 모르겠습니다 ;ㅅ;
    const element = d.getElementsByTagName(s)[0];
    const fjs = element as Element;
    let js = element as any;
    if (d.getElementById(id)) {
      return;
    }
    js = d.createElement(s);
    js.id = id;
    js.src = `https://connect.facebook.net/en_US/sdk.js`;
    fjs.parentNode!.insertBefore(js, fjs);
  })(document, 'script', 'facebook-jssdk');
}

그 다음 버튼에 클릭이벤트를 추가하고

return (
  <Button onClick={checkLogin}>페이스북 로그인</Button>
);

페이스북에 로그인이 돼있는지 여부를 체크해봅니다.

function checkLogin() {
  (window as any).FB.getLoginStatus((checkResponse: Response) => {
    checkState(checkResponse)
  });
}

function checkState(checkResponse: Response) {
  if (checkResponse.status === 'connected') {
    // 로그인 돼있을 때 작업
  } else {
    // 로그인이 되어있지 않다면 ('not_authorized' | 'unknown')
    (window as any).FB.login((response: Response) => {
     // 로그인 하거나 회원가입 할 수 있는 팝업을 띄웁니다.
    })
  }
}

interface Response {
  status: 'connected' | 'not_authorized' | 'unknown'
  authResponse: null | AuthResponse
}

interface AuthResponse {
  accessToken: string,
  expiresIn: number,
  signedRequest: string,
  userId: string
  data_access_expiration_time: number
  graphDomain: string
}

마지막으로 유저정보를 받아오겠습니다.
저는 이름과 이메일을 받아오기 위해서 필드값으로 이메일과 이름을 넣었습니다.
인자를 넘기지 않을 경우 기본적으로는 이름과 아이디값이 넘어옵니다.

function checkState(checkResponse: Response) {
    if (checkResponse.status === 'connected') {
      getUser();
    } 
  ...
}
  
function getUser() {
  FB.api('/me', {fields: ['email', 'name']}, (response: userData) => {
    console.log(response)
  });
}

이렇게 페이스북 로그인 버튼 컴포넌트를 만들어봤습니다.
저처럼 라이브러리를 사용하기 꺼림칙한데 검색하니 라이브러리밖에 안나와서 고민중인 초보개발자 분들에게 조금이나마 도움이 되길 바랍니다.