VK API - Создание приложения - Заметки системного администратора

Для начала, давайте определимся, что же такое VK API и какие возможности он нам предоставляет. API Вконтакте — позволяет разработчику взаимодействовать напрямую с базой данных вконтакте при помощи специальных http запросов. Чем нам, как разработчикам это может быть полезно? При помощи API мы можем извлекать самую различную информацию о пользователях, группах, записи со стены, фотографии и многое другое. Само собой, сервис имеет определенные ограничения, об этом подробнее под катом.

Предупреждаю сразу, статья не для новичков и некоторые моменты я пояснять не буду, так как статья получится очень длинной. Данными статьями я хочу лишь показать принцип работы с VK API и примеры кода. И конечно же код будет доступен на github.

Основная информация

Первое, что нам нужно для создания нашего приложения, это перейти по адресу https://vk.com/dev. Далее переходим в «Мои приложения» и нажимаем кнопку «Создать приложение». Вконтакте позволяет регистрировать 3 типа приложений, краткое описание каждого:

Standalone-приложение — это для мобильных клиентов, десктопных программ и сайтов на которых взаимодействие с API будет вестись из Javascript.
Веб-сайт — если вы хотите написать скрипт для веб сайта, который будет использовать API указывайте этот вариант.
IFrame/Flash приложение — игры в вконтакте и т.д.

Пишем имя приложения, тип выбираем «Веб-сайт», в адрес сайта и базовый домен указываем собственно адрес вашего сайта и домен. Если разрабатываете локально, можно указывать http://localhost.

Создание приложения

Наше приложение создано, теперь в разделе редактирования, переходим в «Настройки». На этой странице будут нужные нам данные, а именно id, защищенный ключ и сервисный ключ. Все это нужно для авторизации пользователя. Алгоритм взаимодействия с API очень простой:

Пользователь авторизирует учетную запись ВК в приложении.
Получает специальный токен.
Выполняет запросы к API.

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

В папке проекта создаем файл composer.json и записываем в него следующее:

{
  "require": {
    "slim/slim": "^3.0",
    "twbs/bootstrap": "4.0.0-alpha.6",
    "illuminate/database": "^5.4",
    "slim/twig-view": "^2.2",
    "guzzlehttp/guzzle": "~6.0"
  }
}

Сохраняем файл, открываем консоль и переходим в папку с нашим проектом в котором есть созданный нами файл. Выполняем команду composer install.
Этой командой мы установили мини фреймворк Slim, Bootstrap для быстрой верстки, пакет для работы с базой данных и шаблонизатор.

Структура приложения

Структура очень проста и включает в себя несколько файлов и папок.

app — для настроек приложения, в этой папке будем держать маршруты, классы и прочие файлы настроек.
public — основная папка в которой содержится файл index.php и файлы стилей
resources — папка для представлений(views)

Создаем файлы

public/index.php

<?php
session_start();

include '../app/app.php';

$app->run();

В этом файле мы только запускаем наше приложение, все настройки будем производить в других файлах. Это наша точка входа.

app/app.php

include '../vendor/autoload.php';

// Debug
$config = [
    'settings' => [
        'displayErrorDetails' => true,
        'LogLevel' => 'debug',
        'vk' => [
          'client_id' => 'ID ВАШЕГО ПРИЛОЖЕНИЯ',
          'client_secret' => 'СЕКРЕТНЫЙ КЛЮЧ ВАШЕГО ПРИЛОЖЕНИЯ',
          'redirect_uri' => 'http://vk-tutor.com/authorize',
          'display' => 'popup',
          'scope' => 'friends,wall,offline',
          'response_type' => 'code'
        ]
    ],
];

$app = new Slim\App($config);

// DI for twig view
$container = $app->getContainer();

$container['view'] = function ($container) {
    $view = new \Slim\Views\Twig('../resources/views', [
        'cache' => false
    ]);

    $basePath = rtrim(str_ireplace('index.php', '', $container['request']->getUri()->getBasePath()), '/');
    $view->addExtension(new Slim\Views\TwigExtension($container['router'], $basePath));

    return $view;
};

include 'classes/VK.php';

// Routes
require 'routes.php';

Не пугайтесь, сложного нет ничего. Просто подключаем загрузчик, внедряем зависимость для применения Twig и подключаем файл с маршрутами.

app/routes.php

<?php

$app->get('/', function ($request, $response) {
  $vk = new VK($this->get('settings')['vk']);

  if (isset($_SESSION['vk'])) {

    if (!isset($_SESSION['account'])) {
      // Устанавливаем токен
      $vk->accessToken = $_SESSION['vk']->access_token;
      // Получаем информацию о текущем пользователе
      // Записываем всю информацию в сессию
      $_SESSION['account'] = $vk->getAccountInfo($_SESSION['vk']->user_id);
    }
    return $this->view->render($response,'index.html', ['vk' => $vk, 'account' => $_SESSION['account']->response]);
  }
  return $this->view->render($response,'index.html', ['vk' => $vk]);
});

$app->get('/authorize', function ($request, $response) {
  // Проверяем, есть ли в адресной строке код
  if ($request->getQueryParam('code') != NULL) {
    $vk = new VK($this->get('settings')['vk']);
    // Получаем токен
    $_SESSION['vk'] = $vk->getAccessToken($request->getQueryParam('code'));
  }
  return $response->withStatus(302)->withHeader('Location', '../');
});

Маршрут для главной страницы и страницы авторизации.

Теперь наше приложение полностью готово к использованию. Для рендеринга страницы, нужно поместить шаблон в директорию resources/views. Можем приступать к написанию самого кода, который позволит нам взаимодействовать с API вконтакте. Поскольку нам нужно будет выполнять HTTP запросы к API, я установил Guzzle. Это HTTP клиент который позволит нам очень просто выполнять HTTP запросы к vkontakte.

Класс для работы с VK API

<?php

class VK
{
  private $loginUrl = 'https://oauth.vk.com/authorize?';
  private $queryUrl = 'https://oauth.vk.com/access_token';

  public $accessToken = '';

  protected $client_id = NULL;
  protected $client_secret = NULL;
  protected $redirect_uri = NULL;
  protected $display  = NULL;
  protected $scope = NULL;
  protected $response_type = NULL;

  public function __construct($params = [])
  {
    $this->client_id = $params['client_id'];
    $this->client_secret = $params['client_secret'];
    $this->redirect_uri = $params['redirect_uri'];
    $this->display = $params['display'];
    $this->scope = $params['scope'];
    $this->response_type = $params['response_type'];
  }

  public function getLoginLink()
  {
    $params = [
      'client_id' => $this->client_id,
      'redirect_uri' => $this->redirect_uri,
      'scope' => $this->scope,
      'response_type' => $this->response_type
    ];

    return $this->loginUrl . http_build_query($params);
  }

  public function getAccessToken($code)
  {
    $client = new \GuzzleHttp\Client();
    $response = $client->request('POST', $this->queryUrl, [
                'form_params' => [
                    'client_id' => $this->client_id,
                    'client_secret' => $this->client_secret,
                    'redirect_uri' => $this->redirect_uri,
                    'code' => $code,
                ],
                'verify' => false,
            ]);

    $data = json_decode($response->getBody());

    return $data;
  }

  public function getAccountInfo($id)
  {
    $url = 'https://api.vk.com/method/users.get';
    $client = new \GuzzleHttp\Client();
    $response = $client->request('POST', $url, [
      'form_params' => [
        'user_ids' => $id,
        'fields' => 'photo_50,counters',
        'name_case' => 'Nom',
        'access_token' => $this->accessToken
      ],
      'verify' => false
    ]);

    $data = json_decode($response->getBody());

    return $data;
  }
}

Я написал небольшой класс, который пока еще умеет только авторизировать пользователя.
Метод getLoginLink() генерирует ссылку для авторизации, метод getAccessToken() запрашивает токен для доступа и последний метод getAccountInfo() загружает информацию об авторизованом пользователе.

На этом логика приложения завершена и при авторизации пользователя мы получим в сессии массив с данным пользователя и можем отобразить это.
Поскольку я подключил Twig шаблонизатор, шаблоны у меня записываются в html файлы, но вы можете использовать и обычные php файлы или другой шаблонизатор.

Код файла для отображения информации.

{% extends "layout/app.html" %}

{% block content %}

<div class="row card" style="margin-top: 30px">

    <div class="card-block">


      {% if account %}
        <h1>Учетная запись</h1>
        <hr>
        {% for acc in account %}
          <div class="card col-4">
            <div class="card-block">
              <img src="{{ acc.photo_50 }}">
              {{ acc.first_name }}
              {{ acc.last_name }}
              <hr>
              Друзей: {{ acc.counters.friends }}<br>
              Подписчиков: {{ acc.counters.followers }}<br>
            </div>
          </div>
        {% endfor %}
      {% else %}
        <h1>Авторизировать пользователя</h1>
        <hr>
        <a href="{{ vk.getLoginLink }}">Авторизация</a>
      {% endif %}
    </div>

</div>

{% endblock %}

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

One thought to “VK API — Создание приложения”

пирожок_PHP:

01.12.2021 в 13:49

доброго времени суток! подскажите пожалуйста, как создать проверку на то, авторизован ли пользователей ( чтобы пользователя не пропускало на страничку если он не вошел в аккаунт. Это через сессию или как? и где ее будет правильнее создать? ведь могут вылезти ошибки по типу «заголовки уже отправлены»

Ответить

VK API — Создание приложения

Основная информация

Создание приложения

Структура приложения

Создаем файлы

public/index.php

app/app.php

app/routes.php

Класс для работы с VK API

One thought to “VK API — Создание приложения”

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

Рубрики

Свежие записи

Архивы

Основная информация

Создание приложения

Структура приложения

Создаем файлы

public/index.php

app/app.php

app/routes.php

Класс для работы с VK API

Возможно вам будет интересно:

One thought to “VK API — Создание приложения”

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

Рубрики

Свежие записи

Архивы