Slyweb
На разработку сайта! Скидки 50%!

Вход на сайт с Facebook

jQuery и CSS

Как я и обещал в предыдущей статье сегодня я расскажу об авторизации на www.facebook.com.

Я не буду объяснять подробно зачем нужно интегрировать сайт с социальными сетями, так как об этом говорилось в предыдущей статье, но делать это нужно, если Вы заботитесь о пользователях и нуждаетесь в них. Авторизация как с twitter.com и так и с facebook.com и даже с Vkontakte.ru вполне приспосабливается к любой системе авторизации. В отличие от API Twitter API Facebook позволяет получать доступ и осуществлять авторизацию пользователей без сторонних php классов за счёт простого javascript. Поэтому Мы будем использовать методы "FB.login" и "FB.logout". Кнопка авторизации изначально будет отображать надпись "вход", после авторизации мы сменим её текст на "выход".

Живой пример получения данных о пользователе с Facebook

Шаг 1. Создаём приложение

Вся авторизация на Facebook будет осуществляться на javascript, данные полученные с сервера будут переданы с помощью jQuery метода ajax на Ваш сервер для сохранения их в сессию. Но сначала нужно получить id приложения - http://developers.facebook.com/docs/guides/web/#login

Как я уже говорил регистрация на facebook проще чем на twitter, но всё же придётся создать приложение, и получить его ID, а так же указать некоторые дополнительные настройки, например домен и т.д.(рис.1)

Аккаунт для вебразработчика на английском языке, но ничего сложно здесь нет.

Аккаунт для вебразработчика на Facebbok! Аккаунт для вебразработчика на Facebbok!
рис. 1,рис. 2

Привожу полный скрипт авторизации на facebook.com.

  • Код
  • Чистый код
  1./////////////////////////////////
  2.// Авторизация fb //
  3./////////////////////////////////
  4.$(function(){
  5.if(document.getElementById('fb-account')) {
  6.
  7.window.fbAsyncInit = function() {
  8. FB.init({ appId: '209931905688713', // ваш id
  9. status: true,
10. cookie: true,
11. xfbml: true,
12. oauth: true});
13.
14. function updateButton(response) {
15.
16. var button = document.getElementById('fb-account');
17.
18. if (response.authResponse) {
19. //user is already logged in and connected
20. //var userInfo = document.getElementById('user-info');
21. FB.api('/me', function(response) {
22. // userInfo.innerHTML = '<img src="https://graph.facebook.com/'
23. // + response.id + '/picture">' + response.name;
24. button.innerHTML = 'Выход';
25. //console.log(response);
26. });
27. button.onclick = function() {
28.
29. FB.logout(function(response) {
30. var userInfo = document.getElementById('user-info');
31. // userInfo.innerHTML="";
32. });
33. };
34. } else {
35. //далее код выполняется если пользователь не авторизован
36. // button.innerHTML = 'Login';
37. button.onclick = function() {
38.
39. FB.login(function(response) {
40. if (response.authResponse) {
41. FB.api('/me', function(response) {
42. //var userInfo = document.getElementById('user-info');
43. //userInfo.innerHTML =
44. // '<img src="https://graph.facebook.com/'
45. //+ response.id + '/picture" style="margin-right:5px"/>'
46. //+ response.name;
47.
48. $.each(response, function(key, val) {
49. items.push('<li id="' + key + '">' + key + ': ' + val + '</li>');
50. });
51.
52. $('<ul/>', {
53. html: items.join('')
54. }).appendTo('#otvet').parent().show('slow');
55. // далее следует код, отправляющий данные о пользователе для сохранения в базу или сессию
56. $.ajax({
57. url:'fbsession.php',
58. type:'POST',
59. dataType:'json',
60. beforeSend:function(){
61. },
62. data: {name:response.name,id:response.id,fn:response.first_name,ln:response.last_name,email:response.email},
63. success: function(output){
64.
65. },
66. error: function(data){
67. $("#slycommenttext").html(data);
68. $('#slyloaderr').fadeOut();
69.
70. }
71. });
72. });
73.
74.
75.
76. } else {
77. //код выполняемый, если пользователь не получил доступ к API либо не авторизовался
78. }
79. }, {scope:'email'});
80. }
81. }
82. }
83.
84. // функция getLoginStatus определяет статус авторизации
85. FB.getLoginStatus(updateButton);
86. FB.Event.subscribe('auth.statusChange', updateButton);
87.};
88.(function() {
89. var e = document.createElement('script'); e.async = true;
90. e.src = document.location.protocol
91. + '//connect.facebook.net/en_US/all.js';
92. document.getElementById('fb-root').appendChild(e);
93.}());
94.}
95.});
96.

        

Данные полученные от сервера можно использовать любым способом, при этом не забывайте, что API будет проверять подключение к facebook.com и если Вы уже авторизовались, то на кнопке будет написано "выход".

Скачать архив "Вход на сайт с Facebook".


Александр Ермаков