В этом блоге я покажу вам, как просто использовать Facebook JS SDK в React или Next JS.

Этот блог предполагает;

  • Вы уже создали приложение на платформе Meta Developer
  • Вы настроили параметры входа в Facebook своего приложения, чтобы разрешить аутентификацию веб-клиента и использовать FB SDK.
  • Вы добавили безопасный действительный URI перенаправления OAuth и домены для JavaScript SDK.

  1. Первый шаг — добавить сценарий SDK в общедоступные файлы вашего проекта. Внутри вашего публичного › index.html добавьте следующий скрипт в заголовок вашего html.
 <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

2. Второй шаг — создать файл Facebook SDK, который будет инициализировать наше приложение и содержать все наши функции Facebook. Вы можете добавить это в свой каталог utils, например src › utils › FacebookSDK.js.

В файле FacebookSDK.js давайте экспортируем функцию для инициализации нашего приложения.

  export const initFacebookSdk = () => {
    return new Promise((resolve, reject) => {
      // Load the Facebook SDK asynchronously
      window.fbAsyncInit = () => {
        window.FB.init({
          appId: '1268250524120464',
          cookie: true,
          xfbml: true,
          version: 'v16.0'
        });
        // Resolve the promise when the SDK is loaded
        resolve();
      };

Давайте также экспортируем функцию в тот же файл, чтобы получить статус входа в Facebook наших клиентов.

export const getFacebookLoginStatus = () => {
    return new Promise((resolve, reject) => {
      window.FB.getLoginStatus((response) => {
        resolve(response);
      });
    });
  };

Наконец, давайте экспортируем функцию для входа через Facebook.

 export const fbLogin = () => {
    return new Promise((resolve, reject) => {
      window.FB.login((response) => {
        resolve(response)        
      })
    })
  }

3. Наконец-то мы можем использовать эти функции в наших компонентах. Создайте новый компонент в своем каталоге.

Давайте добавим эффект использования, чтобы получать и регистрировать в консоли статус входа наших пользователей.

import { useEffect } from "react";
import {
  getFacebookLoginStatus,
  initFacebookSdk,
  fbLogin,
} from "../../utils/FacebookSDK";

export default function FBInit() {
  useEffect(() => {
    console.log("Started use effect");
    initFacebookSdk().then(() => {
      getFacebookLoginStatus().then((response) => {
        if (response == null) {
          console.log("No login status for the person");
        } else {
          console.log(response);
        }
      });
    });
  }, []);

Давайте добавим кнопку входа в систему, чтобы наши пользователи могли щелкнуть ее и перенаправить на страницу входа в Facebook.

  function login() {
    console.log("reached log in button");
    fbLogin().then((response) => {
      console.log(response);
      if (response.status === "connected") {
        console.log("Person is connected");
      } else {
        // something
      }
    });
  }



  return (
    <div>
      <button onClick={login}>Login</button>
    </div>
  );
}

Теперь Javascript SDK должен работать!