Я работаю над своим последним проектом в качестве студента Flatiron School. Мой проект получает сообщения пользователей из разных социальных сетей путем поиска дат в прошлом. Facebook был моим первым выбором, так как их Graph API казался довольно простым в использовании и БЕСПЛАТНЫМ (кхм, Twitter)!

Сначала перейдите на https://developers.facebook.com/apps/ и нажмите Добавить новое приложение.

  • Отображаемое имя не может содержать «Facebook», «Face», «book» или «FB» в названии вашего приложения.

Затем установите доменное имя вашего приложения (я использую localhost для разработки) и обратите внимание на идентификатор приложения в сером поле только для чтения.

После этого нажмите «ПРОДУКТЫ» на левой боковой панели, чтобы выбрать, какие API Facebook вам нужны для вашего проекта. В этом случае я выбрал вход через Facebook.

На следующем экране я выбрал «Интернет», потому что я делаю приложение React.

Затем введите URL своего сайта, мой https://localhost:3000. Я не буду говорить о № 2 в этом сообщении блога, потому что в нем рассказывается о том, как связать Facebook Api с ванильным JavaScript, который я не использую. Для № 3 и № 4 я поделился кодом ниже, чтобы начать.

Хорошо, мы закончили настройку и получили наш идентификатор приложения из Facebook (не делитесь им ни с кем). Пришло время использовать его в нашем коде!!

Во-первых, мы можем создать удобный скрипт logins.js, чтобы у нас было централизованное расположение всех наших API. Если вы используете только один API, это может не понадобиться. Этот скрипт просто добавляет SDK Facebook к нашему ‹head›, чтобы мы могли вызывать необходимый код для аутентификации.

Затем я создал компонент класса под названием FacbookAuthorize для подключения к API Facebook (не забудьте импортировать этот удобный сценарий входа в систему, указанный выше).

Это может показаться сложным, но не чувствуйте себя перегруженным. Мы проверяем статус входа ниже. Все, что вам нужно сделать, это вставить свой AppID, который вы получили от Facebook, и все должно работать. Вы должны увидеть «FB: статус: подключен» в консоли JavaScript.

Теперь вы используете Facebook JavaScript API! Далее мы подключимся к учетной записи Facebook, чтобы получить доступ к более конкретным данным в вашей учетной записи Facebook.

На приведенном ниже рисунке handleClick будет вызываться, когда мы нажимаем кнопку «Войти через Facebook» в нашем шаблоне.

Вот кнопка входа в Facebook.

В ПОРЯДКЕ. Мы почти закончили с Facebook API. Теперь мы можем подключиться и войти через Facebook, но как мы можем получить доступ к данным в нашей учетной записи Facebook??

Graph API

(Чтобы получить доступ к Graph Api, откройте панель навигации Facebook Developers и нажмите Инструменты.)

Мы начнем с нажатия Get Token

Появится всплывающее окно, которое позволит вам выбрать, к чему вы разрешите доступ API в своей учетной записи.

Затем программа сгенерирует ваш новый токен, срок действия которого истечет через час (подробнее об этом позже). Вы увидите, что в поле ниже есть раскрывающийся список, в котором показано, к чему у вас есть доступ (это Graph API Explorer).

На картинке ниже я выбрал родной город и фотографии, включая размеры изображений, альбом, название альбома и отмеченных людей.

Это пример того, как я вызываю API Facebook (вставьте сюда свой запрос!) И это все. После этого все остальное зависит от вас. Легкий?!

Будьте в курсе!

  • API Facebook имеет встроенное ограничение в 200 вызовов в час на пользователя. Это можно увеличить, просто добавив больше фиктивных/тестовых пользователей на странице Роли › Тестовые пользователи на боковой панели Facebook для разработчиков.
  • Токен в Graph API истекает каждый час. Не волнуйтесь, просто нажмите «Получить токен» или ALT + T.
  • Facebook по умолчанию использует HTTPS, поэтому по возможности убедитесь, что ваше приложение работает на HTTPS, а не на HTTP. Этого можно добиться с помощью запуска HTTPS=true && npm start каждый раз при запуске приложения React.