최근에 저는 새로운 소규모 내부 마케팅 팀의 일원으로 KBC Bank & Verzekering 합류했습니다. 풀 스택 개발자로서 저는 마케팅 캠페인에 필요한 (웹) 애플리케이션을 구축하는 일을 담당하고 있습니다. 이 캠페인 중 하나는 Facebook 로그인이 필요했습니다. 전에는 Facebook 통합 작업을 한 적이 없지만 그렇게 어렵지 않을 것이라고 확신했습니다.

내가 틀렸어.

타사 라이브러리

React는 Facebook에서 만든 라이브러리이므로 Facebook 통합을 위한 자체 라이브러리가 있어야 하지 않습니까? 잘못된. 아이러니하게도 Facebook에는 SDK for JavaScript 만 있습니다. (예, 바닐라 JavaScript, TypeScript도 아님)
이전에는 SDK for React Native 이 있었지만 더 이상 지원되지 않는 것 같습니다.

이것은 우리가 우리 자신에 있다는 것을 의미합니다.

내 첫 번째 본능은 타사 라이브러리를 찾는 것이 었습니다. 즉시 내 관심을 끈 라이브러리는 react-facebook-login 입니다. 나는 그것을 시도했고 그것은 해야 할 일을 했지만 그 기능은 매우 제한적이었고 라이브러리는 몇 년 동안 업데이트되지 않았으며 작성 당시 71개의 미해결 문제와 5개의 공개 풀 요청이 있었습니다.

react-facebook 과 같은 다른 라이브러리도 비슷한 패턴을 보였습니다. 나는 확신하지 못했다.

스스로 하기

나폴레옹 보나파르트(Napoléon Bonaparte)가 말했듯이: 원하는 것이 있으면 스스로 하십시오.

JavaScript용 SDK를 index.html 에 추가할 수 있지만 이는 우리가 원하는 것이 아닙니다. 모든 페이지에 SDK를 포함하고 싶지 않을 수 있습니다. 대신 React Hooks를 사용하여 SDK용 래퍼를 빌드하는 것이 좋습니다. 이를 통해 Facebook에서 제공하는 모든 기능에 액세스할 수 있는 동시에 모든 권한을 계속 유지할 수 있습니다.

스크립트 로드

첫 번째 단계는 스크립트를 페이지에 로드하는 것이므로 다음과 같은 작업을 수행하는 새로운 React Hook을 생성해 보겠습니다.

const useFacebook = () => {
  useEffect(() => {
    const script = document.createElement("script");

    script.async = true;
    script.defer = true;
    script.crossOrigin = "anonymous";
    script.src = `https://connect.facebook.net/nl_BE/sdk.js`;

    document.body.appendChild(script);

    window.fbAsyncInit = function () {
      FB.init({
        appId: <ENTER YOUR FACEBOOK APP ID HERE>,
        autoLogAppEvents: true,
        xfbml: true,
        version: "v11.0",
      });
    };

    return () => {
      delete window.fbAsyncInit;
      document.body.removeChild(script);
    };
  }, []);
};

보시다시피 후크가 더 이상 사용되지 않는 즉시 스크립트도 제거합니다.

TypeScript를 사용하는 경우 이미 몇 가지 문제가 발생할 수 있습니다. fbAsyncInit 속성을 window 에 설정하고 있는데, 이 속성에는 시작할 속성이 없습니다. 다음 코드를 추가하여 이 속성을 Window 인터페이스에 추가해야 합니다.

declare global {
  interface Window {
    fbAsyncInit?: Function;
  }
}

발생할 수 있는 또 다른 문제는 TypeScript가 스크립트에 의해 삽입되는 FB 변수를 인식하지 못한다는 것입니다. 프로젝트에 @types/facebook-js-sdk를 추가하여 이 문제를 해결할 수 있습니다.

npm install @types/facebook-js-sdk --save-dev

이제 official docs을 따라갈 수 있어야 합니다.

SDK를 사용하기

SDK는 콜백을 사용하지만 우리는 멋지므로 이를 약속으로 전환할 것입니다.
FB.login 함수로 이것을 설명합시다. 기본적으로 FB.login 함수는 결과에 관계없이 응답을 반환합니다. 로그인이 성공하면 응답을 반환하고 그렇지 않으면 오류를 throw하는 약속으로 이것을 바꾸겠습니다.

  const login = () => {
    return new Promise<fb.StatusResponse>((resolve, reject) => {
      FB.login((response) => {
        if (response.status === "connected") resolve(response);
        else reject(new Error("Facebook login failed"));
      });
    });
  };

fb.StatusResponse 의 출처가 궁금한 경우: TypeScript에서 사용되는 유형은 @types/facebook-js-sdk 에서 유래했습니다.

자! 올바른 방법으로 Facebook SDK를 React 애플리케이션에 성공적으로 통합했어야 합니다.