авторизация через вконтакте / хабр

Oauth регистрация и авторизация вконтакте на php

Как известно социальные сети довольно основательно вошли в жизнь людей по всему миру. Мы практически ежедневно заходим туда, чтобы написать сообщения друзьям, почитать новости или послушать музыку. Популярность и большой охват населения неизбежно приводит к расширению функционала любой соц. сети. Появляются различные API интеграции, позволяющие взаимодействовать с сайтами и приложениями. Одним из таких API является OAuth авторизация, которая позволяет идентифицировать и авторизовать на вашем сайте любого пользователя зарегистрированного в социальной сети.

Авторизация через ВКонтакте / ХабрСтоит заметить, что по сравнению со стандартной регистрацией пользователей с применением логинов и паролей, а также необходимостью подтверждения email адресов – авторизация через OAuth работает намного проще и требует от пользователей меньше действий, что позволяет значительно ускорить процесс регистрации и авторизации.

В данной статье рассмотрим авторизацию на сайте через социальную сеть Вконтакте vk.com. Авторизация будет работать, даже если на вашем сайте не установлен SSL сертификат, что позволит использовать OAuth социальной сети на любом сайте.

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

В качестве примера создадим приложение для сайта vhod-v-lichnyj-kabinet.ru. Заполняем поля:

Авторизация через ВКонтакте / Хабр
Нажимаем “Подключить сайт”. Далее подтверждаем действие с помощью кода, который придет на смс мобильного телефона. После успешного подтверждения будет создано приложение. В разделе “Информация” загружаем иконку и обложку нашего сайта:

Авторизация через ВКонтакте / Хабр
Авторизация через ВКонтакте / Хабр

Затем переходим в раздел “Настройки”. Проверяем значения некоторых полей:

Первый запрос к API: Оставляем пустым

Состояние: Приложение включено и видно всем

Установка приложения: Не требуется

Open API: Включён

Похожее:  Мультифакторная аутентификация в AWS / Хабр

Сохраняем настройки. Для дальнейшей работы нашего скрипта нам понадобятся “ID приложения” и “Защищённый ключ”. Запоминаем эти данные:

Авторизация через ВКонтакте / Хабр
На этом все настройки на стороне социальной сети завершены. Переходим к нашему сайту, на котором необходимо сделать авторизацию.

Создадим на сайте два php файла для осуществления OAuth авторизации:

auth.php – будет содержать ссылку для авторизации.

vk.php – будет взаимодействовать с соц. сетью для получения данных пользователя.

Также создадим один css файл:

style.css
Разместим эти файлы на нашем сайте.

В файле style.css добавим стили:

.div_auth_vk {
    text-align: center;
    background-color: #f0f0f0;
    width: 300px;
    margin: 50px auto;
    border-radius: 6px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: Arial;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.div_auth_vk h2 {
    text-align: center;
    margin-top: 0px;
    font-size: 14px;
}
.link_auth_vk {
    text-decoration: none;
    border-bottom: 0px;
}
.link_auth_vk:hover {
    text-decoration: none;
    border-bottom: 0px;
}
.link_auth_vk img {
    width: 40px;
    transition: 0.4s;
    border-radius: 8px;
    box-shadow: none;
}
.link_auth_vk:hover img {
    box-shadow: 0px 0px 30px rgba(0,105,186,0.5);
}

В файле auth.php создаем ссылку для авторизации. Она должна иметь адрес:

https://oauth.vk.com/authorize
и передавать следующие GET параметры:

client_id=6740883 – ID приложения (берем из настроек приложения);

display=page – указываем, что авторизация должна быть в отдельном окне;

redirect_uri=http://vhod-v-lichnyj-kabinet.ru/article/6/resources/vk.php – ссылка на страницу vk.php;

response_type=code – осуществлять запросы со стороннего сервера.

Собираем ссылку и подключаем к странице стили:

<html>
<head>
    <link rel="stylesheet" href="http://info-less.ru/article/6/resources/style.css">
</head>
<body>
<div class="div_auth_vk">
    <h2>Войти через Вконтакте</h2>
    <a class="link_auth_vk" href="https://oauth.vk.com/authorize?client_id=6740883&display=page&redirect_uri=http://info-less.ru/article/6/resources/vk.php&response_type=code">
        <img src="https://info-less.ru/article/6/resources/vk.png"/>
    </a>
</div>
</body>
</html>

Переходим к файлу vk.php в котором мы должны получить ответ от сервера Вконтакте. Ответ приходит в виде GET параметра code. Пример:

http://vhod-v-lichnyj-kabinet.ru/article/6/resources/vk.php?code=3c113dc8e957958b53
Отлавливаем этот параметр:

if(isset($_GET['code'])){
    $code = $_GET['code'];
}else{
    exit("Нет кода");
}

После того как получен код, необходимо сделать GET запрос на получение токена. Ссылка должна иметь адрес:

https://oauth.vk.com/access_token
и передавать следующие параметры:

client_id=6740883 – ID приложения (берем из настроек приложения);

display=page – указываем что авторизация должна быть в отдельном окне;

redirect_uri=http://vhod-v-lichnyj-kabinet.ru/article/6/resources/vk.php – ссылка на страницу vk.php;

client_secret=DYzAPYoU3KPOkLSUqexd – защищённый ключ приложения (берем из настроек приложения);

code=3c113dc8e957958b53 – параметр из переменной $code.

Осуществляем запрос через функцию file_get_contents:

$get_token = file_get_contents("https://oauth.vk.com/access_token?client_id=6740883&display=page&redirect_uri=http://info-less.ru/article/6/resources/vk.php&client_secret=DYzAPYoU3KPOkLSUqexd&code=".$code);
if(!$get_token){
    exit("Нет токена");
}

Ответ от сервера приходит в формате JSON, поэтому декодируем его в ассоциативный массив и достаем из него параметры user_id и access_token:

$token = json_decode($get_token, true);
$user_id = $token['user_id'];
$access_token = $token['access_token'];

После того как получен токен, мы можем запросить данные пользователя. Для этого посылаем на сервер ВК еще один GET запрос:

https://api.vk.com/method/users.get
с параметрами:

user_id=201…006 – параметр из переменной $user_id;

access_token=46f00ad548f…ec55fec51f90e – параметр из переменной $access_token;

fields=uid,first_name,last_name,photo_big,sex,city,country,bdate – данные пользователя которые мы хотим получить. Более подробный список можно найти в документации API;

v=5.52 – версия API.

Осуществляем запрос и декодируем JSON ответ:

$get_data = file_get_contents("https://api.vk.com/method/users.get?user_id=".$user_id."&access_token=".$access_token."&fields=uid,first_name,last_name,photo_big,sex,city,country,bdate&v=5.52");
if(!$get_data){
    exit("Нет данных");
}
$data = json_decode($get_data, true)['response'][0];

В результате массив $data будет содержать данные о пользователе. Выведем их на страницу:

echo "<img src='".$data['photo_big']."'/><br>";
echo "Имя: ".$data['first_name']."<br>";
echo "Фамилия: ".$data['last_name']."<br>";
echo "Идентификатор: ".$data['id']."<br>";
if($data['sex'] == 0){echo "Пол: не указан<br>";}
if($data['sex'] == 1){echo "Пол: женский<br>";}
if($data['sex'] == 2){echo "Пол: мужской<br>";}
echo "Дата рождения: ".$data['bdate']."<br>";
echo "Страна: ".$data['country']['title']."<br>";
echo "Город: ".$data['city']['title'];

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

Параметр, по которому должна происходить идентификация пользователя – это его идентификатор в социальной сети, который мы получаем из переменной $data[‘id’]. Соответственно делаем select запрос в базу данных для проверки наличия пользователя с таким ID. Если такой пользователь существует, то авторизуем его. Если такого пользователя нет, то добавляем его в базу командой insert, тем самым производя регистрацию нового пользователя.

Для упрощения демо-примера будем хранить данные в сессии.

Регистрация приложения

Скорее всего Вы уже зарегистрированы в соц. сети ВКонтакте, если нет, то Вам придется это сделать. Указывать номер телефона при регистрации обязательно. Переживать не стоит — никакой смс-рассылки от этих сервисов не приходит.Далее необходимо создать приложение. (Скриншоты были сделаны в апреле 2022, с той поры интерфейс мог измениться)

После смс-подтверждения создания приложения оно, как можно догадаться, создаётся и Вы попадаете на страницу её редактирования. Всю информацию и иконки желателно добавить, но больше всего нас там интересуют id приложения и защищённый ключ— это и есть идентификационные данные нашего сайта:

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

Ссылка для входа

Сформируем и выведем ссылку по которой пользователь даст разрешение на запрошенные действия.

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

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