Сбор начальных данных
Для проверки текущего статуса пользователя существует метод VK.Auth.getLoginStatus. Задействуем его, чтобы определить, авторизирован ли пользователь, и скрыть/показать необходимые из описанных выше блоков. Также, если пользователь уже авторизирован, сразу перейдем к началу игру. В метод VK.Auth.
VK.Auth.getLoginStatus(function(response){
if(response.session)
{
// пользователь авторизирован
}
else
{
// пользователь не авторизирован
}
});
Для вызова любого метода ВКонтакте API служит метод VK.Api.call, который принимает три параметра — название метода, объект, представляющий собой параметры, передаваемые в указанный метод, и callback-функцию, в которую будет передан результат вызова метода.
Для получения списка друзей необходимо вызвать метод friends.get. Метод не имеет обязательных параметров и в случае вызова без параметров вернет список всех друзей. Поскольку нам нужны фотографии друзей пользователя, передадим в метод параметр fields со значением ‘photo_rec’, что соответствует квадратной фотографии со стороной 50 пикселей:
VK.Api.call('friends.get', {
fields: 'photo_rec'
}, function(data){
// обработка списка друзей
});
В случае возникновения ошибки, объект data будет содержать вложенный объект error, содержащий информацию об ошибке. Ошибка с кодом 7 говорит о том, что у приложения не хватает прав, то есть в нашем случае о том, что пользователь не разрешил доступ к списку друзей.
Если вызов метода завершен успешно, то объект data будет содержать поле response, которое является массивом объектов, каждый из которых представляет информацию об одном из друзей пользователя.
После того, как список друзей получен, отбираем из него тех, у кого задана фотография (то есть не является стандартной картинкой со знаком вопроса) и переходим к инициализации игры:
Авторизация
Для авторизации пользователя добавим обработчик для ссылки a#vk-login, который будет вызывать метод VK.Auth.login. Первым параметром передается callback-функция, а вторым — необходимые пользовательские настройки приложения, которые являются перечнем необходимых уровней доступа. В нашем случае необходим доступ только к списку друзей, поэтому обработчик для ссылки будет выглядеть так:
$('a#vk-login').click(function(event){
event.preventDefault();
VK.Auth.login(null, VK.access.FRIENDS);
});
Завершение сеанса
Для того, чтобы пользователь мог завершить сессию, добавим обработчик для ссылки a#vk-logout, который будет вызывать метод VK.Auth.logout. Первым параметром передается callback-функция, которая в нашем случае будет обновлять страницу:
$('a#vk-logout').click(function(event){
event.preventDefault();
VK.Auth.logout(function(){
refreshPage(false);
});
});
Инициализация open api
Важной частью скрипта является инициализация API, которая заключается в вызове метода VK.init, в который передается объект, содержащий минимум одно поле — apiId — ID приложения (он отображается на странице настроек приложения):
VK.init({
apiId: 2151186
});
Набор квадратных кнопок
Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:
Для применения квадратных кнопок нужно всё тоже самое что и для круглых, только в CSS заменить в 10-строчке значение и вместо:
border-radius: 24px;изменяем на:
border-radius: 6px;Надеюсь вам понравится мой вариант и оформление кнопок для соцсетей. Ну а если у вас возникли трудности, то можете задавать свои вопросы ниже в комментариях.
Записи по теме
Набор круглых кнопок
Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:
Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.
Отслеживание событий
Для того, чтобы перейти к игре (в нашем случае это заключается в обновлении страницы) после того как пользователь прошел авторизацию, необходимо подписаться на событие auth.login. Также подпишемся на событие auth.sessionChange, оно будет генерироваться, когда изменяются данные, связанные с авторизацией пользователя.
Это необходимо для того, чтобы перейти к игре в том случае, если пользователь уже авторизирован ранее и только подтверждает доступ к списку друзей. Для добавления обработчика события необходимо вызвать метод VK.Observer.subscribe, который принимает два параметра — событие, на которое необходимо подписаться, и callback-функцию — обработчик события:
VK.Observer.subscribe('auth.login', function(response){
refreshPage(true);
});
VK.Observer.subscribe('auth.sessionChange', function(response){
refreshPage(true);
});
Метод refreshPage обновляет страницу, если пользователь не был ранее успешно авторизован:
function refreshPage(checkLogged)
{
if((checkLogged && !isLogged) || !checkLogged)
{
location.href = 'index.html';
}
}
Подготовка игрового процесса
Подготовка игрового процесса заключается в том, что мы отбираем случайным образом необходимое количество фотографий (если у пользователя недостаточно друзей, информируем его об этом) и формируем таблицу, которая заполнена «обратной стороной» фотографий. Для каждой ячейки-фотографии добавляем обработчик, который при нажатии на фотографию:
В случае успешного хода вызывается метод ВКонтакте API getProfiles, который возвращает информацию об указанных пользователях. Список пользователей, для которых необходимо получить информацию, передается в качестве параметра uids. Вызов этого метода используется для отображения имени и ссылки на профиль пользователя, который был успешно отгадан.
Получаем информацию из профиля «вконтакте» через открытый api на jquery
С социальной сетью «ВКонтакте» я работаю уже давно. Что значит «работаю»? Это значит, что я пишу различные модули, где идет взаимодействие сайта с социальной сетью (получение последних записей из группы, отправка сообщений в группу, автоответчики), пишу различных ботов на заказ. Одна из последних моих работ в этой области – бесплатный бот-информер погоды.
Сегодня я хотел бы поговорить о том, как получить информацию из профиля «ВКонтакте» через открытый API. «Что такое открытый API?» – спросите вы. Это значит, что нам не нужно создавать приложение во «ВКонтакте» и получать специальный доступ к профилям, а хватит лишь загрузки данных с определенного URL и обработки полученной информации.
Всю информацию мы будем брать со следующего URL:
https://api.vk.com/method/getProfiles?uids=ID_пользователя_ВКонтакте&fields=uid, first_name, last_name, sex, bdate, city, country, photo_50, photo_100, photo_200_orig, photo_200, photo_400_orig, photo_max, photo_max_orig, online, lists, screen_name, has_mobile, contacts, education, universities, schools, can_post, can_see_all_posts, can_write_private_message, activity, last_seen, relation, counters, nickname, wall_comments, relatives, interests, movies, tv, books, games, about, connections Здесь не забывайте «ID_пользователя_ВКонтакте» заменить на ID нужного вам пользователя.
А теперь более подобно рассмотрим, как именно получить информацию из профиля на jQuery.
Как я уже говорил ранее, использовать мы будем приведенный выше URL, будем обращаться к нему, получать данные через AJAX и после этого – обрабатывать полученную информацию.
Давайте посмотрим, как это будет выглядеть практически на примере моего профиля.
1. Если у вас не подключена библиотека jQuery, подключите ее (перед закрывающим тегом </head>):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>2. Далее, перед закрывающим тегом </body> вставляем скрипт, который будет получать необходимую информацию из профиля (в нашем случае мы будем получать имя):
<script>
$(document).ready(function() {
$.ajax({
url: "https://api.vk.com/method/getProfiles?uids=188031076&fields=uid, first_name, last_name, sex, bdate, city, country, photo_50, photo_100, photo_200_orig, photo_200, photo_400_orig, photo_max, photo_max_orig, online, lists, screen_name, has_mobile, contacts, education, universities, schools, can_post, can_see_all_posts, can_write_private_message, activity, last_seen, relation, counters, nickname, wall_comments, relatives, interests, movies, tv, books, games, about, connections",
dataType: "jsonp",
success: function(e) {
var first_name = e.response[0].first_name; // Имя
$("#profile_info").html("<b>Имя:</b> " first_name);
}
});
});
</script>3. В нужное место, куда будет выводиться информация, вставьте:
<div id="profile_info"></div> Если вы все сделали правильно, должна получиться следующая картина:
Вот таким простым способом мы получили имя человека по его ID.
Приведу вам несколько примеров получения основной информации:
var uid = e.response[0].uid; // ID
var first_name = e.response[0].first_name; // Имя
var last_name = e.response[0].last_name; // Фамилия
var sex = e.response[0].sex; // Пол, где: 0 - не указан, 1 - женский, 2 - мужской
var nickname = e.response[0].nickname; // Ник
var screen_name = e.response[0].screen_name; // Имя страницы
var bdate = e.response[0].bdate; // Дата рождения
var city = e.response[0].city; // ID Города
var country = e.response[0].country; // ID Страны
var photo_max_orig = e.response[0].photo_max_orig; // Ссылка на оригинальную фотографию
var online = e.response[0].online_mobile; // Статус пользователя, где 1 - в сети, 0 - не в сети
var skype = e.response[0].skype; // Skype
var activity = e.response[0].activity; // Статус пользователя, указанный под именем
var last_seen = e.response[0].last_seen.time; // Дата последнего посещения (Unix Time)
var albums = e.response[0].counters.albums; // Количество фотоальбомов
var videos = e.response[0].counters.videos; // Количество видеозаписей
var audios = e.response[0].counters.audios; // Количество аудиозаписей
var notes = e.response[0].counters.notes; // Количество заметок
var photos = e.response[0].counters.photos; // Количество фотографий
var groups = e.response[0].counters.groups; // Количество групп
var gifts = e.response[0].counters.gifts; // Количество подарков
var followers = e.response[0].counters.followers; // Количество подписчиков
var interests = e.response[0].interests; // Интересы
var movies = e.response[0].movies; // Любимые фильмы
var tv = e.response[0].tv; // Любимые телешоу
var books = e.response[0].books; // Любимые книги
var games = e.response[0].games; // Любимые игры
var about = e.response[0].about; // Информация "О себе"Если вам нужно получить какую-то определенную информацию, которую я не привел в примере, то посмотрите ответ от «ВКонтакте» (для этого перейдите по предложенному выше URL) и по аналогии с примером получите информацию из массива данных. Или же перейдите в официальную документацию «ВКонтакте», где также описаны все параметры пользователя, которые можно получить без авторизации.
Обратите внимание, что если некоторая информация не приходит в ответе – то она либо скрыта настройками приватности, либо вообще не указана.
Если у вас возникли трудности с получением информации – напишите об этом в комментариях, я постараюсь вам помочь. А уже в следующей статье читайте, как все это можно реализовать на PHP.
Приступаем к работе
Прежде всего необходимо
, указав его название и тип.
После этого переходим к настройкам приложения и указываем адрес сайта и базовый домен.
Реализация
Создадим HTML страницу, которая будет содержать несколько блоков:
Результат
Итоговый файл general.js можно посмотреть
, сама игра доступна по ссылке
Список чемпионов
Для получения таблицы рекордов используется метод getHighScores, который не имеет параметров. Метод возвращает массив объектов, каждый из которых содержит информацию о пользователе и его рекорд.
Чтобы пользователь мог посмотреть таблицу рекордов, добавим обработчик ссылки a#game-scores, который будет вызывать указанный выше метод, формировать таблицу результатов и показывать ее в диалоговом окне:
Ссылка на соц сеть
Теперь чтобы вставить ссылку на ваш профиль, канал или группу – нужно в атрибуте href вместо символа # вставить ссылку на вашу соцсеть. Будьте внимательны чтобы не удалить двойную кавычку, которая должна быть перед и в конце ссылки.
