В этом блоге я покажу вам, как просто использовать Facebook JS SDK в React или Next JS.
Этот блог предполагает;
- Вы уже создали приложение на платформе Meta Developer
- Вы настроили параметры входа в Facebook своего приложения, чтобы разрешить аутентификацию веб-клиента и использовать FB SDK.
- Вы добавили безопасный действительный URI перенаправления OAuth и домены для JavaScript SDK.
- Первый шаг — добавить сценарий 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 должен работать!