Аутентификация через «ВКонтакте»

2 декабря 2014 Антон Кулешов 3001 0

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

Реклама

Итак, приступим к технический части. Для этого мы создадим и настроим новое приложение в социальной сети. После чего напишем класс, который будет взаимодействовать с API «ВКонтакте»: устанавливать соединение и получать данные о пользователе. В результате проделанных действий, мы сможем авторизовать пользователя у себя на сайте.

Создаём новое приложение «ВКонтакте»

Перед тем, как писать код, нам нужно зарегистрировать новое приложение. Делается это просто, заходим в свой профиль, переходим в раздел приложения и в нем кликаем на кнопку «Управление». В этом разделе вы увидите список всех приложений, которыми вы пользуетесь и кнопку «Создать приложение», жмём по ней. Заполняем название и выбираем пункт «Веб-сайт».

sozdanie-novogo-prilozheniya-vkontakte

После этого появятся два новых поля, которые также заполняем и жмём «Подключить сайт». В следующем окне вам останется подтвердить регистрацию.

podtverzhdenie-registratsii-prilozheniya-vkontakte

Вот так просто и быстро регистрируется новое приложение «ВКонтакте». Теперь переходим в настройки и копируем ID приложения и защищенный ключ в блокнот. На этом работа с социальной сетью заканчивается.

nastrojka-prilozheniya-vkontakte

Пишем класс для работы с API

Перед тем, как написать класс, мы определим его логику, которая будет содержать 3 свойства и 3 метода (включая конструктор).

class VKAuth{

	public $settings    = array();
	public $auth_status = false;
	public $user_info   = array();

	public function __construct($settings){

	}

	public function auth($code){

	}

	public function get_link(){

	}
}
  • settings – отвечает за хранение настроек для подключения к API;
  • auth_status – статус аутентификации, если пользователь пройдет, то значение изменяться на true;
  • В конструкторе мы будем принимать настройки для подключения, и сохранять в переменную settings;
  • auth – метод, который будет производить соединение с API и вытягивать нужные нам данные (принимает код для получения ключа доступа);
  • get_link – метод генерирующий путь ссылки для аутентификации.

Теперь давайте рассмотрим каждый из методов подробно:

1. Конструктор:

Как и было раннее оговорено, мы принимаем настройки и сохраняем их в переменную settings. Для надёжности проверяем наличие их при помощи функции isset().

public function __construct($settings){

	if(isset($settings["client_id"], $settings["client_secret"], $settings["redirect_uri"])){

		$this->settings = $settings;
	}
}

2. Auth:

С начала мы проверяем наличие переменных code и settings. Если всё нормально, то формируем первый запрос, который будет состоять из массива данных, обёрнутых в две функции.

urldecode() – декодирует %## символы в url.

http_build_query() – генерирует строку запроса.

После того, как мы обратимся по сформированному адресу, нам в ответ придет json строка. Для удобства, получаемые данные мы преобразуем в массив, делается это путем передачи у функции json_decode() второго параметра true. Данный массив будет содержать три ячейки: access_token, expires_in и user_id.

Идём дальше, проверяем наличие токена и формируем новый запрос на получение данных пользователя. В нашей функции мы будем сохранять: id, имя, фамилию и аватарку. Для этого через запятую в ячейку fields поместим строку с параметрами «uid,first_name,last_name,photo_100». Какие ещё данные пользователя можно получить описаны в документации объекта user. Обращаемся по новой ссылке и получаем ответ в виде массива. Проверяем наличие принятых данных и сохраняем их в переменную user_info (принятый массив является многомерным, данные будут храниться в нулевой ячейке response), а так же значение auth_status меняем на true и возвращаем true.

public function auth($code){

	if($code && $this->settings){

		$query = urldecode(http_build_query(array(

			"client_id"	  => $this->settings["client_id"],
			"client_secret"   => $this->settings["client_secret"],
			"code" 	          => $code,
			"redirect_uri"    => $this->settings["redirect_uri"]
		)));

		$token = json_decode(file_get_contents("https://oauth.vk.com/access_token?".$query), true);

		if(isset($token["access_token"])){

			$query = urldecode(http_build_query(array(

				"uids"         => $token["user_id"],
				"fields"       => "uid,first_name,last_name,photo_100",
				"access_token" => $token["access_token"]
			)));

			$this->user_info = json_decode(file_get_contents("https://api.vk.com/method/users.get?".$query), true);

			if(isset($this->user_info["response"][0]["uid"])){

				$this->user_info = $this->user_info["response"][0];
				$this->auth_status = true;

				return true;
			}
		}
	}

	return false;
}

3. Get Link:

Первым делом проверяем наличие настроек, а далее формируем путь для ссылки. Функции, которые используются, описаны выше. Когда пользователь нажмёт на ссылку с этим путём, то его перебросит на страницу c параметром code в адресной строке – код для получения токена.

public function get_link(){

	if($this->settings){

		$query = urldecode(http_build_query(array(

			"client_id"     => $this->settings["client_id"],
			"redirect_uri"  => $this->settings["redirect_uri"],
			"response_type" => "code"
		)));

		return "https://oauth.vk.com/authorize?".$query;
	}

	return false;
}

Простая авторизация

На этом этапе – всё довольно рационально. После того как вы подключите класс к файлу, останется получить экземпляр VKAuth, передав ему настройки. Ниже описываем простой обработчик, который отлавливает переменную $_GET[code] и проверяем аутентификацию.

require_once("VKAuth.php");

$vk  = new VKAuth(array(

	"client_id"     => "ID_приложения",
	"client_secret" => "защищенный_ключ",
	"redirect_uri"  => "адрес_сайта"
));

if(isset($_GET["code"])){

	if($vk->auth($_GET["code"])){

		// Делаем свои дела
	}
}

Далее, чтобы произвести авторизацию, вам нужно будет проверить наличие пользователя у себя в базе данных и, если его нет, то добавить. В противном случае обновить его данные (перед обновлением желательно проверить - изменились ли они). Касательно базы данных обычно добавляют два поля: тип авторизации и id пользователя в социальной сети. Вот так осуществляется аутентификация и авторизация через социальную сеть «ВКонтакте».

В архиве вы найдёте готовый пример работы с классом VKAuth, где выводятся данные пользователя.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Растянутый на всю ширину HTML список

20 июля 2014 Антон Кулешов

Использовать HTML список можно по разному, но, несомненно, чаще всего его применяют при создании меню для сайта. Дизайнерская мысль в этом направлении бьет ключом, а верстальщику приходится приспосабливаться, орудуя не столь многочисленным набором инструментов. С проблемой красивого вписания меню в уже заданные габариты, я и столкнулся совсем недавно.

Ещё одно адаптивное меню

23 октября 2015 Антон Кулешов

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

Делаем подгрузку контента при прокрутке страницы

16 ноября 2014 Антон Кулешов

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