Что делать с полученными данными при авторизации vk?
Записываем данные на носитель…
Авторизация на сайте с помощью вк, простой и понятный способ на php! »
Статьи / PHP
В данной статье Вас ждет действительно рабочий,а самое главное понятный туториал, как сделать авторизацию с помощью ВК!
Я заинтересовался как сделать авторизацию, почитав официальную документацию понял, что ничего не понял. и так давайте приступим.
Если Вы заинтересованы в этом вопросе, как же все-таки сделать авторизацию используя ВК, то у Вас уже есть сайт, или как минимум вы обладаете базовыми знаниями. Для начала нам нужно создать приложение Вконтакте, самый простой шаг.
1. Переходим на сайт https://vk.com/apps?act=manage и создаем новое приложение:
2. Заполняем следующие данные:
Название: Любое, его видно только во время авторизации, например авторизовавшись на нашем сайте с помощью ВК, Вы видите это, без количества участников.
Платформа: Выбираем «Сайт»
Адрес сайта: Ссылка на ваш сайт
Базовый домен: Ссылка на ваш сайт
Отлично, нажимаем подключить сайт.
3. Переходим в настройки приложения, копируем ID приложения и Защищенный ключ, сохраняем куда-нибудь и на этом работа на стороне ВК окончена, переходим к написанию скрипта.
4. Теперь самое интересное, нам нужно написать скрипт (обработчик), давайте создадим на нашем сервере в корне сайта файл auth.php и приступим к его редактированию. Хочу отметить, что на локальном сервере (OpenServer) авторизация работать не будет!
Открываем файл, я использую для этого PHPStorm и давайте создадим несколько переменных с пояснениями:
$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 для дальнейшей авторизации токеном
echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';
Теперь можно открыть сайт скопировав $redirect_uri
Ссылка сформирована, теперь нужно получить и обработать ответ от ВК, после того как пользователь перешел по ссылке:
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 />";
}
}
После того как пользователь перешел по ссылке и подтвердил передачу данных, Вам на сервер в 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, который мы можем распарсить. Давайте попробуем авторизоваться, заходим на нашу страницу и нажимаем авторизация:
Разрешаем и у нас на сайте появляются данные об аккаунте:
Авторизация работает. Далее можете сохранить 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'];
Авторизация через ВК готова! Скачать исходник можно ниже
Остались вопросы? Задавай в комментарии, всегда рады помочь!
Архитектура приложения
Первый экран приложения (MainActivity) содержит только кнопку “Войти через ВКонтакте”, по нажатию на которую открывается второй экран.
Бонус
Можно продолжить экспериментировать с Vk SDK и выполнить какие-нибудь еще запросы. Например, можно запросить список друзей при помощи метода friends.get и показать его в отдельном экране при помощи RecyclerView.
Зарегистрировать приложение в api вконтакте
- Ввести любое название приложения, выбрать вариант “Standalone” и нажать “Подключить приложение”
- Пройти предложенную верификацию (через приложение или SMS — как вам нравится)
- После успешной верификации зайти в настройки зарегистрированного приложения и получить там ID приложения
- Там же в настройках приложения ввести
- Android application ID (которое вы прописали в
app/build.gradle
) - Название активности
ru.ifmo.droid2022.vkdemo.VkDemoActivity
- Ваш отпечаток сертификата (полученный ранее при помощи keytool)
- Android application ID (которое вы прописали в
- Не забыть нажать “Сохранить изменения”
Клиентская авторизация
С клиентской авторизацией действительно нет ничего сложного.
Согласно
, достаточно асинхронно загрузить
и, «повесить»
VK.init({appid: YOUR_APP_ID})
на событие
window.vkAsyncInit
, после чего уже можно вызвать функцию
VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS)
, которая и выполнит авторизацию пользователя.
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
Для того, чтобы создать приложение нам понадобится: