Github – ifmo-android-2016/practice3: авторизация во вконтакте

Что делать с полученными данными при авторизации vk?

Записываем данные на носитель…

Авторизация на сайте с помощью вк, простой и понятный способ на php! »

Статьи / PHP

GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте

В данной статье Вас ждет действительно рабочий,а самое главное понятный туториал, как сделать авторизацию с помощью ВК!

Я заинтересовался как сделать авторизацию, почитав официальную документацию понял, что ничего не понял. и так давайте приступим. 

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

1. Переходим на сайт https://vk.com/apps?act=manage и создаем новое приложение:
GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте
2. Заполняем следующие данные:
Название: Любое, его видно только во время авторизации, например авторизовавшись на нашем сайте с помощью ВК, Вы видите это, без количества участников.
GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтактеПлатформа: Выбираем «Сайт»
Адрес сайта: Ссылка на ваш сайт
Базовый домен: Ссылка на ваш сайт

GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте
Отлично, нажимаем подключить сайт.

3. Переходим в настройки приложения, копируем ID приложения и Защищенный ключ, сохраняем куда-нибудь и на этом работа на стороне ВК окончена, переходим к написанию скрипта.
GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте
4. Теперь самое интересное, нам нужно написать скрипт (обработчик), давайте создадим на нашем сервере в корне сайта файл auth.php и приступим к его редактированию. Хочу отметить, что на локальном сервере (OpenServer) авторизация работать не будет!
GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте
Открываем файл, я использую для этого PHPStorm и давайте создадим несколько переменных с пояснениями:

$client_id = 7157110; // ID приложения
$client_secret = 'ESlBJHmVMbeh8IVLiBDv'; // Защищённый ключ
$redirect_uri = 'http://royera.ru/auth.php'; // Адрес сайта

GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте

Тут все понятно, подставляем параметры из нашего приложения, ссылку указывать полностью, где лежит сам скрипт.

Далее формируем ссылку, которая будет ввести на сайт ВК с передаваемыми параметрами:

    $url = 'http://oauth.vk.com/authorize'; // Ссылка для авторизации на стороне ВК

    $params = [ 'client_id' => $client_id, 'redirect_uri'  => $redirect_uri, 'response_type' => 'code']; // Массив данных, который нужно передать для ВК содержит ИД приложения код, ссылку для редиректа и запрос code для дальнейшей авторизации токеном

GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте

echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';

 Теперь можно открыть сайт скопировав $redirect_uri

GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте
Ссылка сформирована, теперь нужно получить и обработать ответ от ВК, после того как пользователь перешел по ссылке:

if (isset($_GET['code'])) {
    $result = true;
    $params = [
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'code' => $_GET['code'],
        'redirect_uri' => $redirect_uri
    ];

    $token = json_decode(file_get_contents('https://oauth.vk.com/access_token' . '?' . urldecode(http_build_query($params))), true);

    if (isset($token['access_token'])) {
        $params = [
            'uids' => $token['user_id'],
            'fields' => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big',
            'access_token' => $token['access_token'],
            'v' => '5.101'];

        $userInfo = json_decode(file_get_contents('https://api.vk.com/method/users.get' . '?' . urldecode(http_build_query($params))), true);
        if (isset($userInfo['response'][0]['id'])) {
            $userInfo = $userInfo['response'][0];
            $result = true;
        }
    }

    if ($result) {
        echo "ID пользователя: " . $userInfo['id'] . '<br />';
        echo "Имя пользователя: " . $userInfo['first_name'] . '<br />';
        echo "Ссылка на профиль: " . $userInfo['screen_name'] . '<br />';
        echo "Пол: " . $userInfo['sex'] . '<br />';
        echo "День Рождения: " . $userInfo['bdate'] . '<br />';
        echo '<img src="' . $userInfo['photo_big'] . '" />'; echo "<br />";

    }
}

GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте
После того как пользователь перешел по ссылке и подтвердил передачу данных, Вам на сервер в GET запросе вернется code, используя его мы запрашиваем у ВК токен пользователя, отправляем запрос в ВК с параметрами указанные в массиве 

    $params = [
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'code' => $_GET['code'],
        'redirect_uri' => $redirect_uri
    ];

ВК возвращает нам токен пользователя, его можно сохранить в базу данных.

Теперь следующим запросом мы получаем данные о пользователе, используя его токен и обращаясь к API VK https://api.vk.com/method/users.get мы получаем json от VK, который мы можем распарсить. Давайте попробуем авторизоваться, заходим на нашу страницу и нажимаем авторизация:

GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте
Разрешаем и у нас на сайте появляются данные об аккаунте:

GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте

Авторизация работает. Далее можете сохранить ID в сессию и проверять авторизован пользователь или нет. Давайте доработаем код:

В самый конец добавляем:

$_SESSION['id'] = $userInfo['id'];

А ссылку заменяем на:

    if(empty($_SESSION['id'])) {

        echo "Вы уже авторизованы";
        

    } else {


    echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';
    }

Весь код:

<?php

$client_id = 7157110; // ID приложения
$client_secret = 'ESlBJHmVMbeh8IVLiBDv'; // Защищённый ключ
$redirect_uri = 'http://royera.ru/auth.php'; // Адрес сайта

$url = 'http://oauth.vk.com/authorize'; // Ссылка для авторизации на стороне ВК

$params = [ 'client_id' => $client_id, 'redirect_uri'  => $redirect_uri, 'response_type' => 'code']; // Массив данных, который нужно передать для ВК содержит ИД приложения код, ссылку для редиректа и запрос code для дальнейшей авторизации токеном

if(empty($_SESSION['id'])) {

    echo "Вы уже авторизованы";

} else {

    echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';
}

if (isset($_GET['code'])) {
    $result = true;
    $params = [
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'code' => $_GET['code'],
        'redirect_uri' => $redirect_uri
    ];

    $token = json_decode(file_get_contents('https://oauth.vk.com/access_token' . '?' . urldecode(http_build_query($params))), true);

    if (isset($token['access_token'])) {
        $params = [
            'uids' => $token['user_id'],
            'fields' => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big',
            'access_token' => $token['access_token'],
            'v' => '5.101'];

        $userInfo = json_decode(file_get_contents('https://api.vk.com/method/users.get' . '?' . urldecode(http_build_query($params))), true);
        if (isset($userInfo['response'][0]['id'])) {
            $userInfo = $userInfo['response'][0];
            $result = true;
        }
    }

    if ($result) {
        echo "ID пользователя: " . $userInfo['id'] . '<br />';
        echo "Имя пользователя: " . $userInfo['first_name'] . '<br />';
        echo "Ссылка на профиль: " . $userInfo['screen_name'] . '<br />';
        echo "Пол: " . $userInfo['sex'] . '<br />';
        echo "День Рождения: " . $userInfo['bdate'] . '<br />';
        echo '<img src="' . $userInfo['photo_big'] . '" />'; echo "<br />";

    }
}

$_SESSION['id'] = $userInfo['id'];

GitHub - IFMO-Android-2016/practice3: Авторизация во ВКонтакте
Авторизация через ВК готова! Скачать исходник можно ниже

auth.rar

Остались вопросы? Задавай в комментарии, всегда рады помочь!

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

Первый экран приложения (MainActivity) содержит только кнопку “Войти через ВКонтакте”, по нажатию на которую открывается второй экран.

Бонус

Можно продолжить экспериментировать с Vk SDK и выполнить какие-нибудь еще запросы. Например, можно запросить список друзей при помощи метода friends.get и показать его в отдельном экране при помощи RecyclerView.

Зарегистрировать приложение в api вконтакте

  • Ввести любое название приложения, выбрать вариант “Standalone” и нажать “Подключить приложение”
  • Пройти предложенную верификацию (через приложение или SMS — как вам нравится)
  • После успешной верификации зайти в настройки зарегистрированного приложения и получить там ID приложения
  • Там же в настройках приложения ввести
    • Android application ID (которое вы прописали в app/build.gradle)
    • Название активности ru.ifmo.droid2022.vkdemo.VkDemoActivity
    • Ваш отпечаток сертификата (полученный ранее при помощи keytool)
  • Не забыть нажать “Сохранить изменения”

Клиентская авторизация

С клиентской авторизацией действительно нет ничего сложного.

Согласно

, достаточно асинхронно загрузить

и, «повесить»

VK.init({appid: YOUR_APP_ID})

на событие

window.vkAsyncInit

, после чего уже можно вызвать функцию

VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS)

, которая и выполнит авторизацию пользователя.

Авторизация и запрос через Open API

var vk = {
 data: {},
 api: "//vk.com/js/api/openapi.js",
 appID: YOUR_APP_ID,
 appPermissions: YOUR_APP_PERMISSIONS,
 init: function(){
  $.js(vk.api);
  window.vkAsyncInit = function(){
   VK.init({apiId: vk.appID});
   load();
  }

  function load(){
   VK.Auth.login(authInfo, vk.appPermissions);

   function authInfo(response){
    if(response.session){ // Авторизация успешна
     vk.data.user = response.session.user;
     vk.getFriends();
    }else alert("Авторизоваться не удалось!");
   }
  }
 },
 getFriends: function(){
  VK.Api.call('friends.get', {fields: ['uid', 'first_name', 'last_name'], order: 'name'}, function(r){
   if(r.response){
    r = r.response;
    var ol = $('#clientApi').add('ol');
    for(var i = 0; i < r.length;   i){
     var li = ol.add('li').html(r[i].first_name ' ' r[i].last_name ' (' r[i].uid ')')
    }
   }else alert("Не удалось получить список ваших друзей");
  })
 }
}

$.ready(vk.init);

Во-первых, сразу оговорюсь, что используемые здесь функции

$

— это не

jQuery

. Тем не менее, их назначение может не быть интуитивно понятным, так что я буду рассказывать, что же делает та или иная функция. Их самостоятельная реализация не должна составить особого труда, ровно как и перекладка всего кода на

jQuery

.

Итак,
$.ready(function) — Это обработчик для DOMContentLoaded;
$.js(text) — асинхронно загружает javascript файл;
$(element) — возвращает обёртку над DOM узлом element;
$(element).add(node) — создаёт новый дочерний для element узел node и возвращает обёртку над ним;
$(element).html(string) — обёртка для element.innerHTML = string.


По-сути, этот код делает следующее:

По готовности документа загружается API ВКонтакте, и, после его инициализации, вызывается метод

VK.Auth.login()

, который показывает всплывающее окно,

которое успешно «блочится» любой баннерорезкой

, в котором пользователь должен подтвердить своё согласие предоставить данные клиентскому приложению.


Функция

authInfo

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

Клиентскую часть таким образом можно считать законченной, однако, стоит как-то предупреждать пользователей о возможности блокировки их браузером окна подтверждения.

Поменять id приложения

ID Anroid приложения указывается в файле build.gradle в модуле приложения. По этому ID приложения идентифицируются, например, в магазине приложений Google Play, а в нашем случае он нужен для идентификации приложения в API ВКонтакте. У двух приложений ID не может быть одинаковым, поэтому вам следует поменять ID, который сейчас прописан в исходном коде задания.

Найдите в файле app/build.gradle строчку, содержащую applicationId “ru.ifmo.droid2022.vkdemo” и замените этот ID на свой новый уникальный ID. Можно просто добавить в конце свою фамилию или другое уникальное слово.

Создаем приложение для авторизации через api vk

Для того, чтобы создать приложение нам понадобится:

Похожее:  Кредиты Частным лицам

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *