Я работаю над своим последним проектом в качестве студента 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.