Аутентификация пользователей с помощью Facebook Connect и Google Friend Connect

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

Приложение

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

# index.php
…
<div class=»new-comment»>
  <h2 class=»sub-title»>Add A Comment</h2>
   
  <form action=»php/savecomment.php» id=»comment-form» method=»post»>
    <div id=»userbox» style=»display:none;»></div>
     
    <div id=»userinfo»>
       
      Name: <input id=»name» name=»name» type=»text» />
      <input id=»url» name=»url» type=»hidden» />
      <input id=»image» name=»image» type=»hidden» />
       
    </div>
     
    <div class=»comment»>
      Comment:<br />
      <textarea id=»comment» name=»comment»></textarea>
    </div>
    <input type=»submit» value=»Send Comment» />
  </form>
 
</div>
…

Здесь вы видите, что у нас есть базовая форма с четырьмя полями: имя, URL, изображение и комментарий. Я решил скрыть поля URL и изображения, потому что это данные, которые мы получим от Facebook и Google Friend Connect. Форма отправляется в PHP-файл savecomment.php , который я не буду рассматривать , но включен в загрузку. По сути, он берет все данные постов и сохраняет их в существующем файле данных комментариев с символом «|», разделяющим каждое поле. Опять же, не практическая техника, но достаточно для наших целей. Чуть выше формы мы перечисляем все комментарии в этом файле, включая другой PHP-скрипт readcomments.php .

# index.php
…
<div class=»comments»>
  <h2 class=»sub-title»>Comments</h2>
   
  <?php include(«php/readcomments.php»);
</div>
…

Последний фрагмент кода, на который мы должны обратить внимание, — это JavaScript. Вся наша аутентификация выполняется на стороне клиента, поэтому я создал application.js для того, чтобы код отвечал за это, и чтобы не писать слишком много JavaScript, я включил jQuery (через Google).

# index.php
—
<head>
…
  <script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js»></script>
  <script src=»./js/application.js» type=»text/javascript»></script>
</head>

Обновление страницы для отображения информации о пользователе.

После создания этого мы можем перейти в файл application.js, упомянутый ранее. Я решил, что было бы лучше создать функцию для каждого сервиса, которая обернет всю логику, необходимую для аутентификации. Затем, после их создания для обоих сервисов, я извлек общий код, чтобы сохранить его сжатым. После создания файла объявите функцию update_userbox ()

# application.js
—
//Generic updates #userbox with info retrieved
//from services
function update_userbox(name, image, url, logout) {
 
  //populate the data in #userbox and show it
  $(‘#userbox’).html( «<a href='»+url+»‘>»
                    + «<img alt='»+name+»‘ src='»+image+»‘ />»
                    + «Logged in as » + name + «</a> «
                    + «(<a href=’./index.php’ onclick='» + logout + «‘>logout</a>)» ).show();
 
  //hide name input and service
  //login buttons
  $(‘#userinfo’).hide();
 
 
  //populate the values of the inputs
  //using data from service
  $(‘#name’).val(name);
  $(‘#url’).val(url);
  $(‘#image’).val(image);
 
}

Эта функция является общей и может использоваться с любым сервисом, и, как следствие, возможно, что другие функции также могут использоваться. Целью этого является вставка HTML в пустой div с именем #userbox, чтобы у пользователя было визуальное понимание того, что он вошел в службу. Это делается путем скрытия поля имени и отображения изображения профиля из удаленной службы вместе с их именем и ссылкой выхода из системы для отключения от службы. Также за кулисами мы заполняем ввод имени, URL и изображения, чтобы они отправлялись на сервер вместе с комментарием для сохранения в файл нашей базы данных. Вы можете увидеть это, передав четыре переменные:

name: имя пользователя, которое они предоставили сервису
изображение: ссылка на изображение профиля пользователя
url: ссылка на профиль пользователя на сервисе
logout: строка кода JS, выполняемая при нажатии кнопки выхода

Все это довольно просто, кроме переменной logout. Это можно объяснить, если взглянуть на API, предлагаемые FB и GFC. У каждого есть функция, которая будет уведомлять службу о том, что пользователь хочет выйти из системы, именно так я решил передать вызов этой функции в ссылку выхода из системы.

Facebook Connect — Получение ключа API

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

После того, как вы создали приложение, нам нужно отредактировать некоторые настройки, в левой части экрана вы увидите вкладки, нажмите Connect . Здесь вам нужно ввести URL-адрес подключения, который является URL-адресом, где существует корень вашего сайта. Я также решил загрузить картинку, и я рекомендую всем веб-сайтам делать это, поскольку это дает вам визуальный брендинг.

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

Добавление междоменного получателя

Facebook спроектировал API подключения для работы исключительно на стороне клиента. Этот учебник не требует кода на стороне сервера для аутентификации пользователей. Это делается с помощью некоторых сложных методов AJAX, где Facebook передает данные туда и обратно через фреймы, чтобы обойти политику одного и того же происхождения, реализованную большинством браузеров. Часть этого процесса требует, чтобы мы разместили на нашем сервере файл, с которым Facebook может взаимодействовать для проверки нашей личности. Поэтому на верхнем уровне вашего домена создайте файл с именем xd_receiver.html и вставьте этот код.

# xd_receiver.html
—
<pre name=»code» class=»html»>
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»
   «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<body>
    <script src=»http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js» type=»text/javascript»></script>
</body>
</html>
</pre>

Кнопка подключения Facebook

Facebook требует, чтобы мы перепрыгнули через несколько обручей, чтобы все заработало, во-первых, нам нужно включить JS-файл с веб-сайта Facebook и запустить функцию init () в нашем файле index.php в самом низу чуть выше закрытия < тег / body>

# index.php
—
<!— Facebook API Includes —>
<script src=»http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php» type=»text/javascript»></script>
<script type=»text/javascript»>
  FB.init(«FB_API_KEY», «xd_receiver.htm», {«ifUserConnected» : auth_using_fb});
</script>

Есть несколько вещей, на которые мы должны обратить внимание в этой функции. Во-первых, не забудьте заменить FB_API_KEY своим ключом API. Затем у нас есть строка, представляющая путь к файлу нашего междоменного получателя, который должен находиться в корне каталога вашего приложения. Наконец, мы можем передать хэш опций. Мы хотим сохранить состояние входа пользователей, поэтому мы просим Facebook запустить функцию auth_using_fb (мы создадим ее через несколько минут), если пользователь уже подключен к нашему сайту. Это означает, что если пользователь перезагрузит страницу, он все равно покажет, что он вошел в систему, поэтому ему не нужно повторно входить на каждую страницу.

Затем мы должны создать фактическую кнопку входа в систему, для этого необходимо использовать XFBML , язык разметки Facebook, который является расширением HTML. X обозначает код, который вставляется на сторонние веб-сайты, а не на веб-сайт Facebook. Где-то на странице мы должны вставить тег Fb: кнопка входа и несколько опций.

<fb:login-button length=»long» onlogin=»auth_using_fb();»></fb:login-button>

Я решил поместить это рядом с моим текстовым полем имени, чтобы пользователь мог легко видеть его, когда они идут, чтобы добавить комментарий. Обратите внимание, что у нас есть два атрибута length и onlogin . Длина позволяет нам указать текст на кнопке и имеет две опции: короткая (по умолчанию) и длинная. Коротко говорит Connect, а долго говорит Connect with Facebook . Onlogin работает во многом как onclick или onmouseover и позволяет нам выполнять JS, когда пользователь успешно проходит аутентификацию на нашем сайте через Facebook. Мы вызываем ту же функцию, которую мы упоминали ранее, auth_using_fb () , но прежде чем мы сможем создать, нам нужно сделать еще одно изменение. В верхней части страницы в теге HTML нам нужно сообщить браузеру, что мы используем более одного языка разметки.

# index.php — <html xmlns=»http://www.w3.org/1999/xhtml» xmlns:fb=»http://www.facebook.com/2008/fbml»>

Атрибут xmlns указывает пространство имен xml для документа. Первый — это стандартный xhtml , а второй — новый язык разметки facebook, это помогает сделать наш документ совместимым с W3C.

Написание Javascript

Теперь мы вернемся к application.js и напишем функцию auth_using_fb () .

# application.js
—
//Facebook Connect
function auth_using_fb() {
  //get the users data from FB
  var viewer = FB.Facebook.apiClient.fql_query(
   
      ‘SELECT name, pic_square_with_logo,profile_url FROM user WHERE uid=’+FB.Facebook.apiClient.get_session().uid,
       
      function(results) {
        update_userbox( results[0].name,
                        results[0].pic_square_with_logo,
                        results[0].profile_url,
                        ‘FB.Connect.logoutAndRedirect(«./index.php»);return false;’)
      }
  );
}

Это функция, которую мы используем для взаимодействия с данными Facebook и извлечения данных пользователей. Кнопка входа в систему, которую мы создали ранее, на самом деле имеет встроенную функцию входа пользователя в Facebook, но если вы хотите получить информацию о пользователе, мы должны запросить ее отдельно. Первая строка кода в функции — это вызов метода API Facebook, fql_query () . Эта функция позволяет нам использовать SQL-подобный язык запросов Facebook для извлечения данных пользователя. Нам нужны только три столбца, которые мы обсуждали ранее: имя, изображение и URL. В вики Facebook Developer есть страница, содержащая все различные таблицы, к которым вы можете обращаться за информацией. Важно добавить предложение WHERE , ограничивающее пользователя, вошедшего в данный момент. Второй параметр fql_query — это функция обратного вызова, которой передается массив результатов. Нам просто нужно взять первый результат в массиве и отправить каждое свойство в нашу функцию update_userbox () вместе с вызовом JS выхода из системы. Важно включить «return false»; после вызова logoutAndRedirect (), поскольку в противном случае страница перезагружается, прежде чем API сможет выйти из системы.

И что удивительно, это все, что нам нужно сделать, чтобы Facebook Connect заработал, иди и попробуй!

Google Friend Connect — ключ API

Как и в случае с Facebook Connect, Google Friend Connect требует от нас подписки на ключ API. Это намного быстрее, чем Facebook Connect, поскольку у них есть простой в использовании мастер, который проведет вас через все это. Для начала вам нужно указать имя и URL-адрес приложения, как в Facebook Connect.

Затем он инструктирует вас загрузить несколько файлов на ваш сервер для поддержки междоменного AJAX, снова как в Facebook Connect. Видя тенденцию здесь?

Последний шаг проверит, что все настроено правильно. Google называет ключ API идентификатором сайта, но действует точно так же, как и ключ API Facebook.

Включая необходимые файлы

Далее нам нужно включить соответствующие файлы JS внизу нашей страницы после файлов Facebook. Нам также необходимо реализовать метод initOpenSocialApi () API Google Friend Connect. Это принимает один параметр в виде хэша опций. Единственный обязательный параметр — это сайт, который является идентификатором нашего сайта, который мы собрали ранее.

# index.php
—
<!— Google API Includes —>
<script src=»http://www.google.com/friendconnect/script/friendconnect.js?v=0.8″ type=»text/javascript»></script>
 
<!— Initialize the Google Friend Connect OpenSocial API.
<script type=»text/javascript»>
  google.friendconnect.container.setParentUrl(‘/envato/nologin/’ /* location of rpc_relay.html and canvas.html */);
  google.friendconnect.container.initOpenSocialApi({
    site: ‘GFC_API_KEY’,
    onload: function(securityToken) { auth_using_gfc();
  });
  google.friendconnect.renderSignInButton({id:»google-login»,style:’long’})
</script>

Нам также нужно добавить страницу в функцию обратного вызова для выполнения, когда пользователь проходит аутентификацию в Google Friend Connect. Кроме того, мы должны вызвать функцию, которая отображает кнопку входа, это очень похоже на разметку XFBML, которую мы использовали ранее, за исключением того, что Google решил придерживаться простого HTML. Эта функция требует, чтобы мы передали ей DOM-идентификатор элемента, в котором мы хотим создать кнопку входа, я сделал div чуть ниже кнопки входа в FB с идентификатором google-login . Мы также передаем опцию style: ‘long’, чтобы она была похожа на нашу кнопку Facebook.

<div class=»services»>
  <fb:login-button length=»long» onlogin=»auth_using_fb();»></fb:login-button>
  <div id=»google-login»></div>
</div>

Написание JavaScript

Google Friend Connect во многом похож на Facebook Connect, что, конечно, облегчает нашу работу. Одно языковое различие, которое я обнаружил, состоит в том, что API Google имеет тенденцию быть более многословным по своей природе, поэтому мы разделим наше объяснение auth_using_gfc () на две части.

//Google Friend Connect
function auth_using_gfc() {
  //Request GFC to send extra profile data
  var params = {};
      params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] =
      [opensocial.Person.Field.URLS];
 
 
  // Create a request to grab the current viewer.
  var req = opensocial.newDataRequest();
  req.add(req.newFetchPersonRequest(‘VIEWER’, params), ‘viewer_data’);
…

Первое, что мы делаем, — объявляем переменную params как пустой хеш. Он будет содержать параметры, которые нам нужно отправить с нашим запросом в Google, потому что по умолчанию мы не получаем URL профиля пользователя. Затем мы создаем объект запроса, который фактически отправит запрос в Google на данные профиля пользователя. Метод add () принимает два аргумента объект newFetchPersonRequest (), а затем уникальную строку для идентификации данных. VIEWER — это константа, представляющая текущего пользователя.

// Sent the request
req.send(function(data) {
 
  // If the view_data had an error, then user is not signed in
  if (!data.get(‘viewer_data’).hadError()) {
    //get the users data from GFC
    var viewer = data.get(‘viewer_data’).getData();
     
    update_userbox( viewer.getDisplayName(),
                    viewer.getField(opensocial.Person.Field.THUMBNAIL_URL),
                    viewer.getField(opensocial.Person.Field.URLS)[0].getField(‘address’),
                    ‘google.friendconnect.requestSignOut()’ );
  }
 
});

Последняя часть функции представляет собой фактический запрос данных с использованием метода send (), который принимает один аргумент функции обратного вызова. Мы объявляем функцию встроенной, и у нас есть оператор if, который проверяет, получил ли запрос ошибку. Если это не так, мы предполагаем, что все прошло хорошо, и мы объявляем переменную под названием view, которая содержит данные, полученные из запроса. Эти данные затем передаются в нашу функцию update_userbox () . Единственное, что следует отметить, это третий аргумент, который передается в URL пользователя. Google позволяет пользователям вводить несколько URL-адресов профиля (например, Facebook, Twitter и т. Д.), И нам нужен только первый, который является URL-адресом профиля Google. Последний аргумент — наша строка JS для выполнения, которая подписывает пользователя, который также перезагружает страницу.

Это все, что нам нужно сделать, так что попробуйте! Вы можете заметить, что пользователю не обязательно иметь учетную запись Google для входа в систему, он также может использовать свои учетные записи AOL / AIM, Yahoo !, Netlog или Open ID.

Вывод

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

Надеюсь, вам понравился этот урок, и если будет достаточно интереса, я напишу последующий урок о том, как его можно интегрировать с помощью PHP на стороне сервера. Как всегда, если кому-то нужна помощь или вы можете найти меня в Twitter , @noahhendrix .

Подпишитесь на нас в Твиттере или подпишитесь на RSS-канал NETTUTS, чтобы получать ежедневные обзоры и статьи о веб-разработке.

Аутентификация пользователей с помощью Facebook Connect и Google Friend Connect

Приложение

Обновление страницы для отображения информации о пользователе.

Facebook Connect — Получение ключа API

Добавление междоменного получателя

Кнопка подключения Facebook

Написание Javascript

Google Friend Connect — ключ API

Включая необходимые файлы

Написание JavaScript

Вывод

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC