Как связать Facebook и Twitter c веб-сайтом

. Первый заключается в том, что вы можете просто вставлять встроенные мини-приложения, виджеты в свои страницы и использовать по мере необходимости неутвержденные программные интерфейсы API. При втором подходе вы можете задействовать социальные сети для аутентификации пользователей на своем сайте. И в третьем случае у вас есть возможность использовать более строгую форму взаимодействия с социальными сетями и, выдавая себя за определенного пользователя, действовать, в основном создавая записи и сообщения, от его имени. В этой статье я поделюсь с вами рядом соображений о каждом из названных подходов.

Установка мини-приложений

Общий сценарий этого типа интеграции социальных сетей заключается в том, чтобы делать вставки блоков из Twitter и Facebook в веб-приложения. Другой общий сценарий – встраивание кнопок, чтобы вы могли подписаться на контент, делиться им с другими и сообщать, если он вам нравится.

Facebook и Twitter как будто схожи только в том, что они позволяют делать. Facebook использовать проще, чем Twitter, поскольку он по-прежнему предлагает некоторые подключаемые модули, которые вы можете задействовать, не прибегая к аутентификации. Чтобы воспользоваться модулем Facebook, посетите сайт для разработчиков Facebook (developers.facebook.com/), выберите из списка подключаемый модуль, который хотите вставить, настройте его, а затем просто получите HTML, чтобы вставить его в свою страницу.

Например, чтобы вставить мини-приложение Like Box, вам нужно знать только имя страницы. Учтите, что мини-приложение Like Box поддерживается только на общедоступных страницах Facebook и не работает на личных страницах. Настроить мини-приложение Like Box просто: все, что вам нужно сделать, это пройти по подсказкам мастера и установить несколько флажков. Вы получаете элемент iframe HTML, чтобы делать вставки куда угодно в шаблоне Razor или HTML, который вы используете. Обратите внимание в следующем примере, что, скрывая лица и разрешая поток сообщений, вы легко можете превратить Like Box в список сообщений Facebook. Эта версия кода была изменена для удобства прочтения.

        scrolling=«no" frameborder=»0«style=»border:none; overflow:hidden; width:500px; height:395px;«>

Like Box должен быть связан с ID приложения, то есть у вас должна быть учетная запись в Facebook для создания внутри него приложений. Чтобы разрешить Like Box, вы должны выбрать ID приложения при запуске мастера. Кроме того, вы можете добавить кнопки Like или Share и получать iframe, чтобы делать вставки.

Обратите внимание, что у Facebook API есть в резерве некоторые другие подключаемые модули, требующие JavaScript и HTML5 для вставки на главную страницу. Это случай для окна Comments. На странице как можно раньше укажите загрузку JavaScript Facebook SDK, как показано в листинге 1.

В решении ASP.NET MVC предусмотрите расположение кода в структуре страницы, чтобы иметь возможность поделиться разными страницами. Вот разметка окна Comments:

На экране 1 показаны все названные выше подключаемые модули Facebook в действии на примере страницы Bootstrap.

Экран 1. Подключаемые модули

В течение долгого времени Twitter предоставлял API для поиска, который просто «расходовался» на вызовы публичных URL для получения данных в формате JSON. Год назад Twitter отказался от API, или, вернее, от способа получения доступа без аутентификации. Как и Facebook, Twitter предоставляет пользователю встраиваемую временную ленту, но для ее использования нужно в первую очередь статически создать ее и привязать к пользователю Twitter. На странице учетной записи Twitter, где используется API, вы создаете мини-приложение и привязываете его к пользователю Twitter, лентой которого заинтересовались. Вы получаете некоторое дополнение, которое выглядит следующим образом:

Some text here

Интересно, что веб-сайт Twitter предоставляет более широкую разметку, включающую атрибут href, указывающий пользователя Twitter для отображения в окне. Оказывается, единственное, что имеет значение, – это ID мини-приложения для работы с данными; содержимое атрибута href игнорируется. На экране 2 показана встроенная временная лента пользователя Twitter. Окно ленты Twitter содержит кнопки follow, tweet, а также «загрузить больше сообщений». Мне встречались сообщения о том, что окно ленты Twitter не работает должным образом на некоторых версиях Internet Explorer (IE), но не в других браузерах. Что касается меня, то я не использую ленту в промышленных приложениях; однако в ходе проверки демо-страниц иногда возникали трудности с IE.

Экран 2. Окно Twitter

В проекте, где использовался блок Facebook Like, мне пришлось отказаться от ленты Twitter, поскольку статически временная лента связана с учетной записью пользователя Twitter. В работе над проектом я должен был выводить ленты Twitter и Facebook динамически. Вы легко это сделаете с Facebook, в отличие от Twitter, который я посчитал неуправляемым. Вместо этого мы решили построить ленту Twitter программным путем.

Доступ к временной ленте программными средствами

В 2013 году Twitter отставил версию 1 публичного приложения REST API, используемого для поиска сообщений, чтобы избежать использования API злоумышленниками. С API v1.1, вам нужно пройти проверку подлинности, чтобы получать информацию о сообщениях программным способом. Первый шаг – это, конечно же, создание учетной записи Twitter и получение секретных ключей. Получив ключи, вы посылаете первый запрос к Twitter на подтверждение подлинности. Следующий код создает заголовок авторизации, включающий параметры аутентификации.

var code = String.Format(»{0}:{1}«,
Uri.EscapeDataString(YourConsumerKey),
Uri.EscapeDataString(YourConsumerSecret));
var authorizationHeader = String.Format(»Basic {0}«,
Convert.ToBase64String(Encoding.UTF8.GetBytes(code)));

Заголовок авторизации должен храниться в заголовке HTTP в запросе POST на имя»https://api.twitter.com/oauth2/token.«Код в листинге 2 иллюстрирует фактический запрос.

В теле запроса вы пишете следующую строку как последовательность байтов:

grant_type=client_credentials;

Ответ в формате JSON, который вы получаете, Twitter преобразует в следующий класс C# (имя класса произвольное).

public class TwitterAuthResponse
{
public string token_type { get; set; }
public string access_token { get; set; }
}

Эти два элемента информации — маркер доступа и тип — должны быть объединены в следующем запросе, чтобы на самом деле задействовать ленту данного пользователя. Вот URL для вызова доступа к временной ленте:

https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name={0}&count{1}»

Аргумент screen_name – это имя учетной записи Twitter для доступа; аргумент count показывает максимальное количество возвращаемых сообщений. Заметьте, что этот URL только возвращает ленту пользователя; если вы хотите получить все сообщения по хештегу, используйте разные URL. Обратитесь к документации Twitter (dev.twitter.com/docs/api/1.1), чтобы уточнить детали. Код для настройки запроса аутентификации, тем не менее, тот же самый. В отличие от возвращаемых JSON, которые нужно как следует разобрать. Ниже приведен код, необходимый для подготовки запроса на доступ к ленте.

var userContext = String.Format(«{0} {1}», authResponse.token_type, authResponse.access_token);
var timelineRequest = (HttpВебRequest)ВебRequest.Create(timelineUrl);
timelineRequest.Headers.Add(«Authorization», userContext);
timelineRequest.Method = «Get»;

Вам возвращается список объектов JSON, которые вы легко можете преобразовать в класс C# с помощью служб сайта http://json2csharp.com. Листинг 3 иллюстрирует образец разметки Razor для отображения сообщений на странице.

Вы можете сделать гораздо больше, когда выполняется рендеринг Twitter или даже лент Facebook программно. В частности, возможно, вы обнаружите гиперссылки и хештэги или захотите расширить картинки. Существует также несколько библиотек JavaScript, доступных для рендеринга лент Twitter и Facebook. Создатели Facebook предпочитают встроить ленту через Like Box. Программный способ проблематичен без имперсонализации пользователя.

Социальная аутентификация

ASP.NET MVC 5 поставляется с готовым шаблоном, который упрощает процедуру, необходимую для того, чтобы пользователи могли проверить подлинность вашего сайта, используя учетную запись Facebook или Twitter. В конце процедуры Facebook и Twitter (а также LinkedIn, Instagram и Google+) возвращают маркер доступа, используемый как ключ для имперсонализации пользователя, который только что был аутентифицирован. Другими словами, с помощью аутентификации на сайте через его учетную запись социальной сети, пользователь предоставляет права, необходимые для его имперсонализации и работы от его имени. Код в листинге 4 показывает, как поместить сообщение в Facebook с прикрепленной картинкой. Код формирует конечную точку ASP.NET MVC, предоставляемую классом контроллера.

Код в листинге 4 основан на классах, определенных в Facebook C# SDK. Для запроса вы используете язык Graph API, и, в соответствии с документацией, вам может потребоваться POST или вызов метода GET на объекте клиента Facebook. Например, чтобы получить фото данного пользователя, вам необходимо ввести следующий код:

var client = new FacebookClient(token);
dynamic result = client.Get(«/user-id/photos»);

Согласно документации Facebook, вы получаете поток данных в формате JSON для разбора. Заметьте, что запрашиваемая информация строго связана с конфиденциальными установками пользователя, включая тот случай, когда пользователь – это вы сами.

Чтобы программно помещать сообщения в Twitter, вам также понадобятся внешние библиотеки, где есть множество своих OAuth лабиринтов. Для этого существует TweetSharp (www.nuget.org/packages/TweetSharp/).

Развивайте свои социальные навыки

Для веб-разработчика Twitter и Facebook – две наиболее важные социальные сети с точки зрения интегрирования в веб-приложения. Многие действия, которые пользователи могут выполнять на сайте, заставляют его быть ближе к социальным сетям — например, предоставление мини-приложений для совместного использования, равно как и рекомендации контента или более контролируемого доступа к ленте с помощью программных средств.

Предоставление такого программного выбора организовано сейчас день гораздо более строго, нежели пару лет назад. Сегодня практически ни одна задача не может быть выполнена без аутентификации через специальное приложение и пользователя. Единственным исключением является использование мини-приложений, если мини-приложение доступно для того типа функции, который вы имеете в виду. Аутентификация повышает уровень сложности кода, но она может быть незаменима и при построении вашей собственной сети пользователей. В любом случае, социальные сети наиболее производительны благодаря именно аутентифицированным пользователям. Если вы действительно активны в социальной сети, вам не избежать аутентификации.

var authRequest = (HttpВебRequest)ВебRequest.Create(OAuthUrl);
authRequest.Headers.Add(«Authorization», authorizationHeader);
authRequest.Headers.Add(«Accept-Encoding», «gzip»);
authRequest.Method = «POST»;
authRequest.ContentType = «application/x-www-form-urlencoded;charset=UTF-8»;
authRequest.AutomaticDecompression = DecompressionMethods.GZip | DecompressionMethods.Deflate;

@foreach (var t in Model)
{

}



@t.text

@t.created_at

public static void Post(String token, String message, String picturePath)
{
var client = new FacebookClient(token);
using (var stream = File.OpenRead(picturePath))
{
dynamic result = client.Post(»me/photos«,
new
{
message = message,
file = new FacebookMediaStream
{
ContentType =»image/jpg",
FileName = Path.GetFileName(picturePath)
}.SetValue(stream)
});
}
}