Работа с VK Open API

При работе с пользователем на сайте периодически возникает необходимость получения контактных данных (регистрация пользователя, отправка всевозможных заявок и т.д.). Чаще всего к таким данным относятся: Ф.И.О, телефон, e-mail адрес, все это обычно доступно в информации из социальных сетей. Так почему бы не использовать эту информацию и не облегчить жизнь вашим клиентам? Социальная сеть ВКонтакте предоставляет для работы с клиентскими данными API. Возможны два способа работы с методами - через oAuth (для приложений) и упрощенная js реализация - VK Open API. Для сайтов удобнее использовать второй вариант. Рассмотрим работу с Open API на примере заполнения простейшей формы данными пользователя. Для начала нам потребуется зарегистрировать новое приложение на странице https://vk.com/editapp?act=create (создание для каждого сайта отдельного приложения требуется из соображений безопасности). Введем название приложения, например "автозаполнение формы sitename". Выберем тип - Веб-сайт. А так же заполним появившиеся поля в соответствии с информацией о вашем сайте, например Адрес сайта: http://sitename.ru , Базовый домен: sitename.ru, вводим код проверки из смс. На этом создание приложения завершено. Вы так же можете заполнить информацию о приложении на странице информация. Вторым шагом, нам нужно подключить Open API на наш сайт (пример кода вместе с html):

    type="text" id="name" placeholder="Иванов Петр Николаевич">

    type="text" id="phone" placeholder="+79264443333">

    type="text" id="mail" placeholder="inf@yyy.ru">
    class="vk" onclick="VK.Auth.login(authInfo);">Заполнить через ВКонтакте

Подключение к Open API происходит вызовом метода VK.init и передачей ему ID вашего приложения (можно посмотреть на вкладке настройки)

VK.init({
    apiId: 4250797
});

Получаем информацию из полей контактов (fields: 'contacts') через users.get и заполняем поля формы с помощью jQuery.

VK.Api.call('users.get', {uids: id, fields: 'contacts'}, function(r) {
    if (r.response) {
        if (r.response[0].first_name) {
            jQuery("#name").val(r.response[0].first_name + ' ' + r.response[0].last_name);
        }
        if (r.response[0].mobile_phone) {
            jQuery("#phone").val(r.response[0].mobile_phone);
        } else if (r.response[0].home_phone) {
            jQuery("#phone").val(r.response[0].home_phone);
        }
    }
});

Простейшая форма с автозаполнением готова. Более подробно о методах Open API можно почитать в официальной документации по адресу: https://vk.com/dev/openapi Небольшой бонус для дебага отдаваемой информации (функция для вывода информации из объектов js)

function dump(obj) {
    var out = "";
    if(obj && typeof(obj) == "object"){
        for (var i in obj) {
            out += i + ": " + obj[i] + "\n";
        }
    } else {
        out = obj;
    }
    alert(out);
}