Как сделать у себя на сайте авторизацию через ВК

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

Местами прокатывают пары вида «qwerty:qwerty» или «login:password», но, увы, далеко не везде. Надоело. Не счесть, сколько раз я, увидев надпись «только зарегистрированный пользователь может ****», просто кривился и закрывал вкладку, чтобы больше ни разу на этот сайт не заходить. Неужели администраторы ресурсов сами этого не понимают?

А ведь технологии OAuth уже 6 лет, и 90% процентов интернет-аудитории имеет аккаунт минимум на одном из ресурсов, поддерживающих OAuth. Так почему кнопки «Войти через» нет на каждом ресурсе? Я установил опрос у себя на сайте.

Как обойти авторизацию через ВК на сайте.

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

• Это не сложная технология. Смею надеяться, что каждый, нашедший в себе силы прочитать статью до конца, сможет самостоятельно прикрутить OAuth к своему сайту за 1-2 дня.
• OAuth базируется на HTTP. Большинство сервис-провайдеров даже цифровой подписи не требуют, т.е., кроме собственно возможности создавать GET и POST запросы — ничего не надо, а простота протокола позволяет написать OAuth-клиент «на коленке» буквально за час. Без каких-то специальных библиотек.
• Так они и зарегистрируются у вас! Просто используют для этого свои логин-пароль на другом сайте. Сервис-провайдеры не предоставляют какую-то специфическую характеристику пользователя, необходимую на вашем сайте? Так запросите эту характеристику при первом визите и всех делов. В остальном — пользователь, вошедший через OAuth, ничем не отличается от зарегистрировавшихся обычным путем.
• Я не ставил целью подробно описать протокол OAuth и его возможности. Это все уже написано неоднократно, например, здесь (http://habrahabr.ru/post/77648/) и здесь (http://habrahabr.ru/company/mailru/blog/115163/). Я хочу дать примеры практической реализации OAuth для наиболее распространенных социалок рунета без привязки к конкретному языку.
• Ну а что касается 7%, которым OAuth не нужен — если 93 из ста прочитавших этот пост админов внедрят OAuth у себя на сайте, я буду более чем доволен 🙂

Почему OAuth, а не OpenID?

Потому что OpenID практически бесполезен для тех целей, для которых декларирован. Это сугубо мое мнение, но оно опирается не на пустое место.

Во-первых, OpenID пользуются в основном «гики», процент которых в интернете не настолько высок, чтобы перестраивать под них сайты (за некоторым исключением, разумеется 🙂 ) Почему так? Потому что для того, чтобы получить OpenID аккаунт, надо — его получить. Зайти на OpenID сервер и предпринять некоторые действия, чтобы заполучить некий, довольно невразумительный, набор символов.

Который, несмотря на сложность (для простого пользователя) надо не забыть и вводить при случае, если на глаза попадется знакомая пиктограмма . Ну какой казуальный пользователь будет это делать? А с OAuth все намного проще — видит человек кнопку «Войти через ВКонтакте», нажимает, и… уже на сайте с правами зарегистрированного пользователя. «Будьте проще», — говорил классик, — «и люди к вам потянутся». Как в воду глядел.

Во-вторых, возможности OAuth далеко не исчерпываются аутентификацией и авторизацией. Получив в процессе авторизации токен, его можно использовать для дальнейшей интеграции возможностей социалки в свой ресурс — чтение/написание постов, доступ к френдленте и стене и многое другое.

В-третьих, OpenID активно пользуются спамеры и хакеры. Зачастую реализация OpenID аутентификации на ресурсе делается без особого внимания к известным его уязвимостям — по одному только описанию протокола на OpenID-провайдере или с помощью неизвестно кем и когда написанной библиотеки. К примеру, многие сайты не требуют со входящих по OpenID ввода капчи.

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

Она подтверждает лишь, что запрашиваемый пользователь действительно зарегистрирован на одном из OpenID-серверов — и все. Механизмы получения дополнительной информации о пользователе (email, имя, возраст) имеются, но мало кем поддерживаются. Можно, конечно, в нарушение идей OpenID, анализировать идентификатор и доверять только определенным OpenID-провайдерам (например, тем же социалкам). Но смысл, если почти все из них (за исключением ЖЖ, но он и по OpenID ровным счетом ничего не расскажет о пользователе) поддерживают OAuth, который позволяет получить намного больше информации? Так что со всех своих сайтов я вообще убрал поддержку OpenID.

Почему OAuth, а не виджет «Войти через»?

Нет проблем. Если вас устраивают функционал, дизайн и уровень безопасности виджета — то его воткнуть в код на самом деле намного проще — можете дальше не читать.

Как это работает

Если кому интересны все подробности, то см. ссылки выше. А вкратце — так:

Заходите на сервис-провайдер ХХХ, регистрируете там свой сайт, получаете код клиента и секретный код.

По нажатию кнопки на вашем сайте «войти через ХХХ» производится обмен запросами с сервером XXX, перенаправление пользователя на ХХХ для ввода пароля, логина и подтверждения передачи данных на ваш сайт и получения токена, с помощью которого у сервера ХХХ можно запросить дополнительные данные о пользователе. Конкретика зависит от реализации OAuth на сервис-провайдере — поддерживаемой версии протокола, поддерживаемых потоков и пр.

С помощью полученного токена с сервера ХХХ получаются имя, емайл, дата рождения, аватар и прочая информация, которая обычно и требуется при регистрации. После этого можно вызывать стандартную функцию по добавлению нового пользователя.

Почему сырой HTTP, а не куски кода с использованием OAuth библиотеки?

Потому что я порядком помучался, вытаскивая этот самый сырой HTTP зачастую и из кусков кода, иллюстрирующих использование той или иной библиотеки. Конкретная реализация OAuth на каждом сервере имеет свои тонкости, перед которыми может спасовать даже самая гибкая библиотека. Кроме того, веб-языков много, библиотек — еще больше, дать примеры на все просто нереально. А сырого HTTP (при наличии мозгов) вполне достаточно для использования любой библиотеки. Чего не скажешь об обратном случае.

Практические рекомендации по реализации

Разумеется, в первую очередь надо зарегистрироваться в соцсети, активировать аккаунт, ну и всё такое. Не торопиться. Некоторые сервера не сразу корректно обрабатывают запросы от свежезарегистрированных OAuth-клиентов. Здесь я расписал только успешные потоки, забывать про обработку ошибок — никак не стоит.

Также я практически не уделил внимания аспектам безопасности — это тема отдельной статьи. Как минимум, везде, где можно передавать уникальный параметр в callback-url для каждого пользователя — это стоит делать (Основной callback адрес должен оставаться без изменений, а меняться — только параметр, иначе сервер не пропустит запрос. Особо обратите на это внимание, если у вас стоит mod_rewrite), как и пользоваться параметром state для передачи дополнительных данных callback-скрипту (там, где этот параметр поддерживается). Я все это пока оставил за скобками.

1. Идем сюда (http://vk.com/apps.php?act=addclient_secret=p=users.get). Полный список методов API ВКонтакте здесь (http://vk.com/developers.php?oid=-1Непрерывное развитие API. Правильные решения в изменчивом технологическом ландшафте»

Авторизация пользователя ВКонтакте.Что значит авторизоваться через вк. Что такое авторизация вк?

Источник: webhamster.ru

Авторизация через VK Api

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

Что такое VK API

VK API — это интерфейс программирования приложений, предоставляемый социальной сетью ВКонтакте. С его помощью можно получить доступ к различным функциям и данным ВКонтакте, таким как профиль пользователя, друзья, группы, фотографии и т.д. Он может использоваться для создания приложений, которые интегрируются с ВКонтакте, например, для сбора информации о пользователях или создания игр на платформе ВКонтакте.

Как работает авторизация через VK API

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

Шаги по авторизации через VK API

Следующие шаги описывают, как использовать VK API для авторизации пользователей на вашем сайте.

Шаг 1: Зарегистрировать приложение в ВКонтакте

Первый шаг в создании приложения, которое использует VK API, это зарегистрироваться в ВКонтакте и создать новое приложение. Для этого перейдите на страницу разработки ВКонтакте (https://vk.com/dev) и войдите в свой аккаунт.

Затем перейдите на страницу «Мои приложения» и нажмите кнопку «Создать приложение». Выберите тип вашего приложения, введите его название и адрес сайта, если он есть.

После создания приложения вы получите идентификатор приложения (appId) и защищенный ключ (secretKey), которые нам понадобятся на следующих этапах.

Шаг 2: Подключить VK API на вашем сайте

Чтобы использовать VK API на вашем сайте, вам нужно добавить JavaScript-библиотеку VK Connect на ваш сайт. Это можно сделать с помощью следующего кода, вставленного перед закрывающим тегом страницы:

Эта библиотека предоставляет нам возможность интегрировать VK API на наш сайт.

Шаг 3: Создать кнопку для авторизации пользователя

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

Создайте кнопку, назначьте ей идентификатор, например, «vk_auth», а затем добавьте следующий код для инициализации VK API и создания кнопки:

VK.init(< apiId: appId >); VK.Widgets.Auth(«vk_auth», < authUrl: ‘/’ // Указываем URL-адрес на страницу нашего сайта, на которую будет перенаправлен пользователь после авторизации >);

Где appId — идентификатор вашего приложения. authUrl — это URL-адрес нашего сайта, которая будет вызвана после прохождения процесса авторизации.

Шаг 4: Обработка ответа авторизации

После того, как пользователь разрешит доступ к своей информации, его перенаправят на страницу, указанную в параметре authUrl. Этой странице нужно обработать ответ от сервера VK API и сохранить токен доступа.

Добавьте код на страницу, которая будет обслуживать авторизацию и получение токена доступа:

VK.Auth.login(function(response) < if (response.session) < var accessToken = response.session.access_token; // Сохраняем токен доступа // Дополнительные действия после авторизации >>, VK.Auth.access.AUTHORIZATE);

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

Шаг 5: Получить информацию о пользователе

Используя полученный токен доступа, можем получить информацию о пользователе из VK API. Например, чтобы получить информацию о пользователе и его друзьях, используйте следующий код:

VK.api(‘users.get’, < fields: ‘photo_200’ >, function(response) < if (response.error) < // Ошибка получения информации о пользователе >else < var user = response.response[0]; // Показать информацию о пользователе на странице >>); VK.api(‘friends.get’, < fields: ‘photo_200’ >, function(response) < if (response.error) < // Ошибка получения списка друзей >else < var friends = response.response.items; // Показать список друзей на странице >>);

Где users.get и friends.get — это методы VK API, которые возвращают информацию о пользователе и его друзьях соответственно. Параметр fields указывает, какую информацию следует вернуть. Мы сохраняем информацию о пользователе и его друзьях в переменные user и friends соответственно.

Авторизация через VK API — это простой и удобный способ аутентификации пользователей на вашем сайте. Используя VK API, мы можем получать доступ к разнообразной информации в ВКонтакте, чтобы упростить процесс регистрации и входа на нашем сайте. В этой статье мы рассмотрели шаги, которые необходимо выполнить для успешной авторизации пользователя через VK API.

Похожие записи:

1. Авторизация на IP камере Dahua через HTTP API
2. Как происходит авторизация через api в php
3. Регистрация и авторизация через VK API
4. REST API — авторизация/регистрация через соцсети и по email/password
5. Авторизация через telegram бота на php в asana

Источник: qaa-engineer.ru

Авторизация на сайте с помощью HybridAuth. Часть 3.

Начинаем первую официальную часть нашего курса. В данном уроке мы с вами затронем авторизацию на нашем будущем интернет-сервисе с помощью социальных сетей: Facebook, VK и Одноклассники.

Настройка групп пользователей.

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

Теперь нам нужно кликнуть правой кнопкой мыши по вновь созданной группе пользователей и перейти в ее редактирование. Нам интересна вкладка “Права доступа”. Там, где у нас с вами доступ к контекстам, у контекста “web” необходимо установить политику доступа “Load, List and View”.

Аналогично нам нужно сделать с группой ресурсов “users”, для этого перейдите на вкладку “Доступ к группам ресурсов”.

После всех выполненных действий не забудьте кликнуть по кнопке “Сохранить”. Далее снова переходим в раздел “Контроль доступа”, но в этот раз нам необходимо отредактировать группу пользователей “аноним”, так как MODx по умолчанию не верно устанавливает права. Нас интересует вкладка “Доступ к группам ресурсов” и нам нужно выставить доступ к группе ресурсов “users” в “Load Only”.

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

1. Разместил файлы в директорию “assets/templates/pesok/”.
2. Разбил шаблоны на чанки (пока 2 штуки “meta” и “scripts”), изменив, конечно пути к файлам.
3. Создал 2 ресурса: “главная страница” и “сервис” и поставил им соответствующие шаблоны.

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

Отлично! Теперь, если аноним откроет этот ресурс, его должно переадресовать на главную страницу. Вы можете это сделать с помощью режима инкогнито в браузере Google Chrome. Отлично! Мы проделали с вами большую работу, это будет базой для наших дальнейших действий.

Следующим шагом будет авторизация с помощью социальной сети и компонента HybridAuth.

Авторизация на сайте с помощью HybridAuth.

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

Теперь нам нужно создать чанк “providerTpl” с содержимым: