Так вышло, что мне пришлось столкнуться с интеграцией с Facebook-ом на платформе ASP.NET. Интеграция нужна была server-side, поэтому решено было использовать Facebook C# SDK.
Как оказалось процесс довольно таки не сложный, но важно понять суть и принцип.
Во первых небольшой дисклеймер — приведенный ниже пример не претендует на гордое звание production. Его цель дать базовое понятие топика.
Разделим пример на несколько этапов-шагов:
На самом деле, минимум теории это плохо. Теоретическую часть важно понимать, дабы не заниматься копипастингом не понимая, что делает код.
Подробности аутентификации/авторизации с Facebook можно (и нужно) почитать тут — developers.facebook.com/docs/authentication
В кратце – мы строим веб аппликацию и хотим:
Далее мы рассмотрим как воплотить в жизнь первые три пункта.
Чтобы работали пункты 2 и 3 нам нужен некий access token, который фейсбук выдаст только если будет успешно пройден пункт номер один. access token это некое подтверждение права доступа, который наша аппликация попросила (и получила) у пользователя.
Для получения онного в нашей веб аппликации будет кнопка LOGIN. Нажатие на эту кнопку откроет стандартное окно аутентификации/авторизации Фейсбука. В случае надобности пользователь пройдет стандартные Фейсбуковские enter username/password. Дальше его спросят, а согласен ли он, залогиниться в аппликацию ХХХ. Последним шагом будет вопрос согласен ли пользователь авторизировать аппликацию ХХХ от его имени делать действия A, B, C. (В более старой версии аутентификационного диалога последние два шага были на одном экране, теперь это два разных экрана). После того, как пользователь подтвердит все вышеуказанное, он будет перенаправлен на URL, заданный нами в самом начале процесса. В качестве параметра Facebook добавит в этот URL некий код (code), который мы используем для получения заветного access token-а. Важно помнить, что с момента нажатия кнопки LOGIN, все происходит в pop-up окне. В конце процесса авторизации мы закроем его и перезагрузим окно с нашей веб аппликацией.
Итак приступим.
Идем по адресу developers.facebook.com/apps
Создаем новую аппликацию
Указываем название аппликации. App Namespace пока можно оставить пустым. Внимательно читаем и соглашаемся с Facebook Platform Policies.
Запоминаем (записываем) App ID и App Secret. Они нам еще понадобятся.
Выбираем способ интеграции Website. В Site URL вписываем http://localhost:12345/ (Важно, чтобы тут был URL нашей веб аппликации. Если совсем точно, returnUrl, который мы будем использовать позже, должен иметь этот же самый домейн, иначе механизм безопастности Фейсбука не даст начаться процессу аутентификации/авторизации).
Все. С самим фейсбуком закончили.
В Visual Studio создаем новый проект. Для простоты использовал обычную ASP.NET Web Application, с MVC все довольно идентично. Называем наш проект FBIntegrationSample.
Правый клик на References, выбираем Add Library Package Reference…
Заходим в раздел Online – All, и ищем facebook. Нас интересуют три отмеченые компонента. Если для MVC приложения потребуется установить все три, для обычной ASP.NET Web Application, хватает верхних двух.
Дальше маленькая хитрость. С настройками по умолчанию IIS будет использовать различные порты при каждом рестарте, что нас не устраивает. Поэтому идем в свойства проекта, в закладку Web и задаем конкретный порт, на котором мы хотим запустить наш сервер. Например – 12345.
Последним шагом будет найти в web.config элемент с названием <facebookSettings/> (обычно в самом конце файла) и внести appId и appSecret, полученые в предыдущем шаге.
Создадим класс FBUser, который будет хранить данные пользователя (для простоты, после получения данных пользователя будем сохранять обьект в сессии)
Создадим Default.aspx, в котором будет кнопка логина и два элемента для данных пользователя.
В Default.aspx.cx попробуем вытащить обьект FBUser из сессии. Если не получилось, создадим ссылку для окна авторизации, в противном случае используем данные пользователя — покажем его имя, юзерпик и даже сделаем пост на его стене.
Создадим класс FBAuthHandler.cs. С помощью Facebook C# SDK создадим URL для окна логина.
Подробней о extended permissions
Подробней о display
Добавим второй метод в FBAuthHandler.cs, который будет проверять вернулся ли ответ от фейсбука с нужным нам параметром.
В случае удачи мы создаем обьeкт FBUser и помещаем его в сессию.
Добавим небольшой JavaScript в Default.aspx, который при нажатии на кнопку логина будет открывать pop-up окно с нужным нам URL-ом.
Последнее, что нам осталось, это создать FacebookOAuth.aspx, на который будет производиться перенаправление после окончания процесса авторизации. Важно помнить, что FacebookOAuth.aspx будет открываться в pop-up окне, поэтому мы используем этот файл чтобы
a. Проверить не вернулся ли код от фейсбука. Eсли да — создаем обьект FBUser.
b. Закрыть pop-up окно и перезагрузить основное окно.
Исходный код доступен тут — http://dl.dropbox.com/u/5249810/habrapost01/FBIntegrationSample.zip
Как оказалось процесс довольно таки не сложный, но важно понять суть и принцип.
Во первых небольшой дисклеймер — приведенный ниже пример не претендует на гордое звание production. Его цель дать базовое понятие топика.
Разделим пример на несколько этапов-шагов:
Шаг 0: Минимум теории
На самом деле, минимум теории это плохо. Теоретическую часть важно понимать, дабы не заниматься копипастингом не понимая, что делает код.
Подробности аутентификации/авторизации с Facebook можно (и нужно) почитать тут — developers.facebook.com/docs/authentication
В кратце – мы строим веб аппликацию и хотим:
- Чтобы аутентификация пользователей происходила через Facebook.
- Получить доступ к данным пользователя (имя, юзерпик).
- Получить возможность постить на стену пользователя от имени нашей аппликации.
- Миллион долларов в мелких купюрах и вертолет.
Далее мы рассмотрим как воплотить в жизнь первые три пункта.
Чтобы работали пункты 2 и 3 нам нужен некий access token, который фейсбук выдаст только если будет успешно пройден пункт номер один. access token это некое подтверждение права доступа, который наша аппликация попросила (и получила) у пользователя.
Для получения онного в нашей веб аппликации будет кнопка LOGIN. Нажатие на эту кнопку откроет стандартное окно аутентификации/авторизации Фейсбука. В случае надобности пользователь пройдет стандартные Фейсбуковские enter username/password. Дальше его спросят, а согласен ли он, залогиниться в аппликацию ХХХ. Последним шагом будет вопрос согласен ли пользователь авторизировать аппликацию ХХХ от его имени делать действия A, B, C. (В более старой версии аутентификационного диалога последние два шага были на одном экране, теперь это два разных экрана). После того, как пользователь подтвердит все вышеуказанное, он будет перенаправлен на URL, заданный нами в самом начале процесса. В качестве параметра Facebook добавит в этот URL некий код (code), который мы используем для получения заветного access token-а. Важно помнить, что с момента нажатия кнопки LOGIN, все происходит в pop-up окне. В конце процесса авторизации мы закроем его и перезагрузим окно с нашей веб аппликацией.
Итак приступим.
Шаг 1: Создание Facebook Application
Идем по адресу developers.facebook.com/apps
Создаем новую аппликацию
Указываем название аппликации. App Namespace пока можно оставить пустым. Внимательно читаем и соглашаемся с Facebook Platform Policies.
Запоминаем (записываем) App ID и App Secret. Они нам еще понадобятся.
Выбираем способ интеграции Website. В Site URL вписываем http://localhost:12345/ (Важно, чтобы тут был URL нашей веб аппликации. Если совсем точно, returnUrl, который мы будем использовать позже, должен иметь этот же самый домейн, иначе механизм безопастности Фейсбука не даст начаться процессу аутентификации/авторизации).
Все. С самим фейсбуком закончили.
Шаг 2: Создание и настройки проекта, добавление Facebook SDK.
В Visual Studio создаем новый проект. Для простоты использовал обычную ASP.NET Web Application, с MVC все довольно идентично. Называем наш проект FBIntegrationSample.
Правый клик на References, выбираем Add Library Package Reference…
Заходим в раздел Online – All, и ищем facebook. Нас интересуют три отмеченые компонента. Если для MVC приложения потребуется установить все три, для обычной ASP.NET Web Application, хватает верхних двух.
Дальше маленькая хитрость. С настройками по умолчанию IIS будет использовать различные порты при каждом рестарте, что нас не устраивает. Поэтому идем в свойства проекта, в закладку Web и задаем конкретный порт, на котором мы хотим запустить наш сервер. Например – 12345.
Последним шагом будет найти в web.config элемент с названием <facebookSettings/> (обычно в самом конце файла) и внести appId и appSecret, полученые в предыдущем шаге.
Шаг 3: Код
Создадим класс FBUser, который будет хранить данные пользователя (для простоты, после получения данных пользователя будем сохранять обьект в сессии)
Создадим Default.aspx, в котором будет кнопка логина и два элемента для данных пользователя.
В Default.aspx.cx попробуем вытащить обьект FBUser из сессии. Если не получилось, создадим ссылку для окна авторизации, в противном случае используем данные пользователя — покажем его имя, юзерпик и даже сделаем пост на его стене.
Создадим класс FBAuthHandler.cs. С помощью Facebook C# SDK создадим URL для окна логина.
- redirectUrl – URL, на который будет произведено перенаправление в конце процесса авторизации.
- extendedPermissions – то, что разрешит нам производить различные действия от имени пользователя (постить на его стену итд).
- response_type должен быть code. Иначе Facebook вернет нам token с использованием hash тэга (#), т.е. с серверной стороны у нас к нему доступа не будет, а это нас абсолютно не устраивает.
- Display – popup. Можно, конечно, загрузить логин окно на весь экран вместо нашей аппликации и потом в нее вернуться, но это не то, что мы хотим.
Подробней о extended permissions
Подробней о display
Добавим второй метод в FBAuthHandler.cs, который будет проверять вернулся ли ответ от фейсбука с нужным нам параметром.
В случае удачи мы создаем обьeкт FBUser и помещаем его в сессию.
Добавим небольшой JavaScript в Default.aspx, который при нажатии на кнопку логина будет открывать pop-up окно с нужным нам URL-ом.
Последнее, что нам осталось, это создать FacebookOAuth.aspx, на который будет производиться перенаправление после окончания процесса авторизации. Важно помнить, что FacebookOAuth.aspx будет открываться в pop-up окне, поэтому мы используем этот файл чтобы
a. Проверить не вернулся ли код от фейсбука. Eсли да — создаем обьект FBUser.
b. Закрыть pop-up окно и перезагрузить основное окно.
Шаг 4: Тест
Исходный код доступен тут — http://dl.dropbox.com/u/5249810/habrapost01/FBIntegrationSample.zip