Авторизация на сайте с помощью ВК, простой и понятный способ на 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 для дальнейшей авторизации токеном
Теперь можно открыть сайт скопировав $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'] . '
'; echo "Имя пользователя: " . $userInfo['first_name'] . '
'; echo "Ссылка на профиль: " . $userInfo['screen_name'] . '
'; echo "Пол: " . $userInfo['sex'] . '
'; echo "День Рождения: " . $userInfo['bdate'] . '
'; echo '
'; echo "
"; > >
После того как пользователь перешел по ссылке и подтвердил передачу данных, Вам на сервер в 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'];А ссылку заменяем на:
$client_id, 'redirect_uri' => $redirect_uri, 'response_type' => 'code']; // Массив данных, который нужно передать для ВК содержит ИД приложения код, ссылку для редиректа и запрос code для дальнейшей авторизации токеном if(empty($_SESSION['id'])) < echo "Вы уже авторизованы"; >else < echo $link = 'Аутентификация через ВКонтакте
'; > 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'] . '
'; echo "Имя пользователя: " . $userInfo['first_name'] . '
'; echo "Ссылка на профиль: " . $userInfo['screen_name'] . '
'; echo "Пол: " . $userInfo['sex'] . '
'; echo "День Рождения: " . $userInfo['bdate'] . '
'; echo ''; echo "
"; > > $_SESSION['id'] = $userInfo['id'];
Авторизация через ВК готова! Скачать исходник можно ниже
Остались вопросы? Задавай в комментарии, всегда рады помочь!
- Сергей Котов
- 03.10.2019
- 37 183
- 25
- 15
Авторизация на сайте через ВКонтакте
Многие соцсети позволяют создавать приложения и через API получать данные пользователей, поэтому их использует для быстрой регистрации и авторизации на сайтах. Как проходит аутентификация, рассмотрим на примере VK.
- На сайте, пользователь нажимает на ссылку «Войти», открывается страница VK, где он разрешит приложению доступ к своим данным.
- После подтверждения браузер пользователя будет перенаправлен по адресу, указанному при открытии диалога авторизации. К URL добавляется GET-параметр с кодом авторизации.
- Скрипт выполняет ответный запрос с полученным кодом и ключом приложения для получения access_token .
- Полученный в ответе access_token , скрипт использует для запроса к данным пользователя.
Регистрация приложения
Для начала нужно создать приложение на странице https://vk.com/editapp?act=create
В меню «Платформа» нужно указать – сайт, заполнить поля «адрес сайта» и «основной домен».
В настройках видим ID приложения и защищённый ключ, также нужно убедится что приложение включено и видно всем.
Ссылка для входа
Сформируем и выведем ссылку по которой пользователь даст разрешение на запрошенные действия.
В redirect_uri указываем скрипт-обработчик, туда придет секретный код.
В параметре state можно передать URL текущей страницы, чтобы вернуть пользователя обратно.
При переходе по ссылке откроется страница:
Получение данных
После того как пользователь дал разрешение, он возвращается на redirect_uri , к URL добавляются GET-параметры:
https://example.com/oauth-vk.php?code=1234567890&state=https://example.com/page-1
Далее запрашивается access_token (в ответе с токеном будет e-mail). После этого выполняется метод users.get , который возвращает ID, имя, фамилию и URL аватарки.
redirect_uri должен быть такой же, как в ссылке для входа.
'ID приложения', 'client_secret' => 'Защищённый ключ', 'redirect_uri' => 'https://example.com/oauth-vk.php', 'code' => $_GET['code'] ); // Получение access_token $data = file_get_contents('https://oauth.vk.com/access_token?' . urldecode(http_build_query($params))); $data = json_decode($data, true); if (!empty($data['access_token'])) < // Получили email $email = $data['email']; // Получим данные пользователя $params = array( 'v' =>'5.52', 'uids' => $data['user_id'], 'access_token' => $data['access_token'], 'fields' => 'photo_big', ); $info = file_get_contents('https://api.vk.com/method/users.get?' . urldecode(http_build_query($params))); $info = json_decode($info, true); echo $email; print_r($info); > >
Полученные данные пользователя
ivan_ivanov@gmail.com Array ( [response] => Array ( [0] => Array ( [first_name] => Иван [id] => 12345678 [last_name] => Иванов [photo_big] => https://vk.com/images/camera_200.png?ava=1 ) ) )
Далее все завит от реализации сайта, пользователя можно добавить в БД или обновить его данные и авторизовать в системе.
- ← Авторизация на сайте через Яндекс
- Кэширование данных в PHP на примере класса →
Вход на сайт через Вконтакте
Многие соцсети позволяют создавать приложения и через API получать данные пользователей, поэтому их использует для быстрой регистрации и авторизации на сайтах. Как проходит аутентификация, рассмотрим на примере VK:
- На сайте, пользователь нажимает на ссылку «Войти», открывается страница VK, где он разрешит приложению доступ к своим данным.
- После подтверждения браузер пользователя будет перенаправлен по адресу, указанному при открытии диалога авторизации. К URL добавляется GET-параметр с кодом авторизации.
- Скрипт выполняет ответный запрос с полученным кодом и ключом приложения для получения access_token .
- Полученный в ответе access_token , скрипт использует для запроса к данным пользователя.
Регистрация приложения
Для начала нужно создать приложение на странице https://vk.com/editapp?act=create
В меню «Платформа» нужно указать – сайт, заполнить поля «адрес сайта» и «основной домен».
В настройках видим ID приложения и защищённый ключ, также нужно убедится что приложение включено и видно всем.
Ссылка для входа
Сформируем и выведем ссылку по которой пользователь даст разрешение на запрошенные действия.
В redirect_uri указываем скрипт-обработчик, туда придет секретный код. В параметре state можно передать URL текущей страницы, чтобы вернуть пользователя обратно. При переходе по ссылке откроется страница:
Получение данных
После того как пользователь дал разрешение, он возвращается на redirect_uri , к URL добавляются GET-параметры:
https://example.com/oauth-vk.php?code=1234567890&state=https://example.com/page-1 Далее запрашивается access_token (в ответе с токеном будет e-mail). После этого выполняется метод users.get , который возвращает ID, имя, фамилию и URL аватарки.
redirect_uri должен быть такой же как в ссылке для входа.
'ID приложения', 'client_secret' => 'Защищённый ключ', 'redirect_uri' => 'https://example.com/oauth-vk.php', 'code' => $_GET['code'] ); // Получение access_token $data = file_get_contents('https://oauth.vk.com/access_token?' . urldecode(http_build_query($params))); $data = json_decode($data, true); if (!empty($data['access_token'])) < // Получили email $email = $data['email']; // Получим данные пользователя $params = array( 'v' =>'5.81', 'uids' => $data['user_id'], 'access_token' => $data['access_token'], 'fields' => 'photo_big', ); $info = file_get_contents('https://api.vk.com/method/users.get?' . urldecode(http_build_query($params))); $info = json_decode($info, true); echo $email; print_r($info); > >Полученные данные пользователя
xxxx@xx.ru array( "response" => array( 0 => array( "id" => 12345678, "first_name" => "Иван", "last_name" => "Иванов", "photo_big" => "https://vk.com/images/camera_200.png?ava=1" ) ) )Далее все завит от реализации сайта, пользователя можно добавить в БД или обновить его данные и авторизовать в системе.
Настройка авторизации через «Вконтакте»
Как настроить авторизацию посетителей сайта через «Вконтакте» в личном кабинете и для оформления заказа
- Зарегистрируйтесь во «Вконтакте».
- Перейдите на страницу добавления приложения «Вконтакте» .
- Напишите любое название, например, домен вашего сайта.
- Выберите платформу «Веб-сайт».
- Напишите адрес своего сайта и отдельно только его домен — без указания протокола.
- Перейдите в раздел «Настройки».
Если авторизация для этого сайта уже включена, перейдите по ссылке «Настройки авторизации».
- Откройте свой сайт в режиме браузера «инкогнито». Или в другом браузере, где вы не авторизованы ни в своем Вебасисте, ни во «Вконтакте».
- Перейдите по ссылке «Вход».
- Щелкните по иконке «Вконтакте».
Введите данные для входа в сервис.
5 комментариев
+2
Сергей BestForPet 15 января 2018 17:10 #
Ребят, поправьте инструкцию, теперь не обязательно заполнять п.7 В поле «Доверенный redirect URI» впишите адрес вида» Более, если прописываешь этот Url, то авторизация не работает.
+2
Зул 6 февраля 2018 21:30 #
Скорее всего у тебя такая печаль, если ты имея сертификат SSL указал протокол http, а если укажешь в этом поле https то все нормально работает, только что протестировал, хотя и без этого поля работает, зачем оно не знаю но у меня оно указано, у меня везде вместо http https.
+1
42na 19 февраля 2019 00:38 #
Благодарю, в поле было указывал HTTPS ничего не работало, удалил и все гуд
+2
evteev777 25 февраля 2018 08:25 #
Не получилось настроить авторизацию через VK, выдает ошибку: <"error":"invalid_request","error_description":"application is blocked">Пробовал и с www/без www, и с http/https, и с Доверенным redirect URI, и без него, даже удалял и заново создавал приложение — результат один и тот же. Естественно, «приложение включено и видно всем» ))) Перелогиниться в VK или зайти с другого браузера, как пишут в интернете, не помогло — ведь все равно захожу в режиме инкогнито. AdBlock отключен. Авторизация через Facebook завелась без проблем! Это решается??
+4
evteev777 25 февраля 2018 08:55 #
Разобрался сам! В настройках Webasyst надо было ввести ID приложения и Защищенный ключ, а я в эти поля вводил Защищенный ключ и Сервисный ключ доступа — просто похожи формы настроек Webasyst и приложения VK! Всегда читайте то, что написано мелким шрифтом! )))