LinkedIn. Данные из профиля вместо заполнения формы

На одном из проектов (который до сих под в подвешенном состоянии) появилась задача «позволить пользователю загружать свое резюме из LinkedIn». Другими словами — есть форма с несколькими полями, которые пользователь должен заполнить своими данными, а так же есть кнопка «загрузить из LinkedIn», при нажатии на которую форма заполняется сама.

Основной вопрос — получить данные из LinkedIn. Вставить их в форму и автоматически отправить форму на сервер — не проблема.

Для начала посмотрим на LinkedIn API (а куда же без него) — http://developer.linkedin.com/apis, https://developer.linkedin.com/documents/javascript-api-tutorial. Первое, что нам надо — это получить ключ API. Идем по ссылке — https://www.linkedin.com/secure/developer и регистрируем новое приложение (особенно обратите внимание на последнее поле — поле доменов). Сделав это мы получим наш ключ (рис. 1). Нам нужен только первый из них. Остальные — для других целей.

LinkedIn API key

Теперь немного кода.

Создадим простую html-страничку с кнопкой, при нажатии на которой будут подгружаться (с разрешения пользователя) данные с LinkedIn. Для начала подгружаем официальную библиотеку по ссылке — http://platform.linkedin.com/in.js:

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
       api_key: 87nmmq1c1ris // your api-key
 </script>

Далее пишем нужные функции для обработки авторизации на LinkedIn’e:

<script type="text/javascript">
function onLinkedInLoad() {
                IN.Event.on(IN, "auth", onLinkedInAuth);
            }
            function onLinkedInAuth() {
                IN.API.Profile("me").fields("firstName", "lastName", "publicProfileUrl", "pictureUrl", "summary", "headline").result(displayProfiles);
            }
</script>

onLinkedInLoad — обработчик того, что библиотека была загружена. В ней мы проверяем, что пользователь выполнил авторизацию и вызываем соответствующую функцию-callback — onLinkedInAuth. В функции onLinkedInAuth мы получаем список полей с данными пользователя (список доступных полей можно посмотреть по ссылке — https://developer.linkedin.com/documents/profile-fields). displayProfiles — имя функции, которая будет выводить полученные с сервера данные (она будет расписана чуть позже).

Допустим, у нас есть кнопка с кодом:

<a class="linkedin" href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/01/LinkedIn_Logo.svg/200px-LinkedIn_Logo.svg.png" alt="" /></a>

Тогда вешаем на нее обработчик клика (jQuery):

$('a.linkedin').click(function() {
  if (!IN.User.isAuthorized()) {
      IN.User.authorize(function() {
          onLinkedInAuth();
      });
  }
  else {
       onLinkedInAuth();
   }
   return false;
});

Теперь при клике будет выполняться запрос на LinkedIn и если, пользователь «одобрит», то его данные подтянутся на страницу. Осталось только расписать функцию отображения этих данных — displayProfiles.

  function displayProfiles(profiles) {
      member = profiles.values[0];
      var val = '';
      val += '<p class="name">Name: ' + member.firstName + " " + member.lastName + '</p>';
      if(member.publicProfileUrl) val += '<p class="url">Url: <a href="' + member.publicProfileUrl + '">' + member.publicProfileUrl + '</a></p>';
      if(member.pictureUrl) val += '<p class="photo"><img src="'+ member.pictureUrl + '" alt="" /></p>';
      if(member.headline) val += '<p class="headline">' + member.headline + '</p>';
      if(member.summary) val += '<p class="summary">' + member.summary + '</p>';
      $('div.data').html(val);
  }

В качестве параметра передается массив данных о пользователях. Нам нужен первый из них — profiles.values[0]. Дальше вытягиваем разные значения и выводим их нужным образом.

Простой пример — ссылка (там Вам нужно просто нажать на кнопку). В примере с сервера вытягивается имя/фамилия, аватарка, ссылка на профиль, текущая должность и полное описание (summary).

P.S. Я так открыто написал свой API-ключ, потому что он привязывается к домену. Имейте это ввиду, когда регистрируете его и не забудьте добавить http://localhost.

P.P.S. Не пытайтесь открыть пример в Опере — не сработает.

, , , , ,

Оставить комментарий

Top ↑ | Main page | Back