Интеграция ASP.NET MVC 3 приложений с Facebook OAuth API. Часть 1: Авторизация

Зачем нужна авторизация на вашем сайте через Facebook?
На данный момент в социальной сети Facebook более 500 млн. пользователей. Многие сайты предоставляют возможность авторизироваться без дополнительной регистрации, где нужно заполнять много полей информации о себе. Если у вас есть аккаунт на Facebook, то вам достаточно войти на сайт используя его. Это экономит время, ведь регистрация нередко требует потратить минут 5-10.

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

Итак, приступим…

Перед созданием приложения необходимо зарегистрировать ваш сайт на Facebook
developers.facebook.com/setup
После регистрации вы получите 2 ключа: App ID и App Secret.

А теперь создадим новое приложение ASP.NET MVC 3.


Нам придется работать с Json, поэтому библиотеку вы можете скачать тут и подключить в проекту:
using Newtonsoft.Json.Linq;
Или воспользоваться менеджером пакетов NuGet и написать "Install-Package Newtonsoft.Json"

Для начала подгружаем JavaScript SDK на нашу страницу.

Copy Source | Copy HTML

1. $(document).ready(function () {
2.     if (document.getElementById('fb-root') != undefined) {
3.         var e = document.createElement('script');
4.         e.type = 'text/javascript';
5.         e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
6.         e.async = true;
7.         document.getElementById('fb-root').appendChild(e);
8.     }
9. });

Далее инициализируем нашу страницу при помощи App Id, который был получен при регистрации домена на Фейсбуке.

Copy Source | Copy HTML

1. FB.init({
2.    appId:'YOUR_APP_ID', cookie:true,
3.    status:true, xfbml:true
4. });

Отобразим кнопку входа через Facebook на странице сайта.

Copy Source | Copy HTML

1. <fb:login-button perms="email,user_checkins"
2. onlogin="onConnect();" autologoutlink="false">
3. </fb:login-button>

Здесь используется пространство имен xmlns:fb="http://www.facebook.com/2008/fbml".
Сгенерировать кнопку можно тут.

Событие onlogin кнопки fb-button вызывается после подтверждения или отмены авторизации в всплывающем окне



На событие onlogin вызывается метод onConnect(), в котором мы получаем
access_token.

Copy Source | Copy HTML

1. function onConnect() {
2.     FB.getLoginStatus(function (response) {
3.         if (response.session) {
4.             window.location = "../Account/FbLogin?token=" + response.session.access_token;
5.         } else {
6.             // if user cancel
7.         }
8.     });
9. };

Это ключ можно использовать для получения информации о пользователе. Вызывается метод FbLogin() контроллера AccountController, который получает информацию о пользователе:

Copy Source | Copy HTML

1. public ActionResult FbLogin(string token)
2. {
3.       WebClient client = new WebClient();
4.       string JsonResult = client.DownloadString(string.Concat("https://graph.facebook.com/me?access_token=", token));
5.       JObject jsonUserInfo = JObject.Parse(JsonResult);
6.       UInt64 facebook_userID = jsonUserInfo.Value<UInt64>("id");
7.       string username = jsonUserInfo.Value<string>("username");
8.       string email = jsonUserInfo.Value<string>("email");
9.       //можем сохранить эту информацию
10.       FormsAuthentication.SetAuthCookie(username, true);
11.       return RedirectToAction("Index", "Home");
12. }

Какую информацию можно получить у пользователя можно посмотреть тут.

Весь код _LogOnPartial.cshtml:

Copy Source | Copy HTML

1. @if (Request.IsAuthenticated)
2. {
3.     <text>Welcome <strong>@User.Identity.Name</strong>! [ @Html.ActionLink("Log Off", "LogOff", "Account") ]</text>
4. }
5. else
6. {
7.     <fb:login-button perms="email,user_checkins" onlogin="onConnect();" autologoutlink="false"></fb:login-button>
8.     <div id="fb-script" st yle="display: inline; margin-left: 20px;">
9.     </div>
10.     @:[ @Html.ActionLink("Log On", "LogOn", "Account") ]
11. }
12. <script language="javascript" type="text/javascript">
13.     window.fbAsyncInit = function () {
14.         FB.init({ appId: '177572352298948', status: true, cookie: false, xfbml: true });
15.     };
16.     function afterConnect() {
17.         FB.getLoginStatus(function (response) {
18.             if (response.session) {
19.                 window.location = "../Account/FbLogin?token=" + response.session.access_token;
20.             } else {
21.                 // if user cancel
22.             }
23.         });
24.     };
25.     $(document).ready(function () {
26.         if (document.getElementById('fb-root') != undefined) {
27.             var e = document.createElement('script');
28.             e.type = 'text/javascript';
29.             e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
30.             e.async = true;
31.             document.getElementById('fb-root').appendChild(e);
32.         }
33.     });
34. </script>

До авторизации:

После авторизации: