среда, 22 декабря 2010 г.

Логин на ваш сайте через Вконтакте

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

В рамках подключения к Open API создается специальное приложение, которое позволяет использовать на Вашем сайте все текущие методы ВКонтакте API. Помимо этого, Open API предоставляет возможность упростить процесс регистрации новых пользователей на Вашем сайте, если у них уже есть учетная запись ВКонтакте.


Подключение Open API
Для подключения Вашего сайта к платформе Open API, необходимо выполнить следующие действия:

  • Необходимо создать новое или взять уже созданное приложение.
  • На странице редактирования настроек приложения заполнить необходимые поля Open API:
    • Open API URL – адрес сайта, к которому Вы планируте подключить Open API (например http://durov.at/)
    • Базовый домен – базовый домен Вашего сайта (например, durov.at)


Инициализация Open API
Инициализация Open API может происходить двумя способами: обычным (синхронным) и асинхронным.

Обычная инициализация
Для использования обычной инициалиазации необходимо добавить следующий блок кода внутри тега:
<script src="http://vkontakte.ru/js/api/openapi.js" type="text/javascript"></script>
<script type="text/javascript">
  VK.init({
    apiId: ВАШ_API_ID
  });
</script>


Асинхронная инициализация
В отличие от обычной, асинхронная инициализация Open API, позволяет производить инициализацию платформы параллельно инциализации Вашего JavaScript-кода. Для использования асинхронной инициализации, добавьте следующий HTML и JavaScript код сразу же после открытия тега:
<div id="vk_api_transport"></div>
<script type="text/javascript">
  window.vkAsyncInit = function() {
    VK.init({
      apiId: ВАШ_API_ID
    });
  };

  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "http://vkontakte.ru/js/api/openapi.js";
    el.async = true;
    document.getElementById("vk_api_transport").appendChild(el);
  }, 0);
</script>

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

Пример авторизации через Open API
<script src="http://vkontakte.ru/js/api/openapi.js" type="text/javascript"></script>

<div id="login_button" onclick="VK.Auth.login(authInfo);"></div>

<script language="javascript">
VK.init({
  apiId: ВАШ_API_ID
});
function authInfo(response) {
  if (response.session) {
    alert('user: '+response.session.mid);
  } else {
    alert('not auth');
  }
}
VK.Auth.getLoginStatus(authInfo);
VK.UI.button('login_button');
</script>


Описание методов Open API
Объект VK имеет следующие поля:

  • VK.init - основной метод инициализации платформы Open API.
  • VK.Auth - содержит методы, связанные с авторизацией пользователей.
  • VK.Api - содержит методы, связанные с работой с ВКонтакте API.
  • VK.Observer - содержит методы для реакции на возникающие в ходе работы платформы события.
  • VK.UI - содержит методы, связанные с интерфейсом пользователя.


Пример использования Open API
По адресу http://durov.at/ выложен пример приложения, сделанного на основе Open API. После авторизации приложение получает информацию о Вас, список Ваших друзей и последние новости группы ВКонтакте API непосредственно с API-сервера ВКонтакте.

Комментариев нет: