Pull to refresh

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

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

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

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

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

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

Нам придется работать с 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 вызывается после подтверждения или отмены авторизации в всплывающем окне

image

На событие 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>


До авторизации:
image
После авторизации:
image
Tags:facebookfacebook apioauthC.net
Hubs: .NET
Total votes 45: ↑33 and ↓12 +21
Views6.5K

Popular right now

.Net разработчик
from 150,000 ₽ArtezioСанкт-Петербург
.Net разработчик
from 150,000 ₽ArtezioСаратов
.Net разработчик
from 180,000 to 220,000 ₽CHIBBIS.RURemote job
C# .net Developer
from 90,000 to 180,000 ₽АЛМАЗМоскваRemote job
C# (.net Core) developer
from 60,000 to 80,000 ₽Современные информационные системыКрасноярскRemote job