С помощью виджета для авторизации Вы можете максимально просто предоставить пользователям возможность авторизовываться на Вашем ресурсе. Перед авторизацией пользователь сможет увидеть свою фотографию и уже авторизовавшихся друзей.
Виджет поддерживает два вида авторизации:
- обычный — пользователь будет переадресован на указанный в параметре authUrl адрес с полями: uid, first_name, last_name, photo, photo_rec, hash
- динамический — после авторизации будет вызвана функция onAuth c объектом data, содержащим поля uid, first_name, last_name, photo, photo_rec, session, hash, также пользователь будет авторизован в openApi.
Для проверки авторизации Вы можете использовать полученный параметр hash, сравнив его с md5 подписью от app_id+user_id+secret_key, например md5(194253766748fTanppCrNSeuYPbA4ENCo).
Виджет также может быть использован вместе с другими виджетами и Open API.
Для доступа к API ВКонтакте с Вашего сайта предусмотрен механизм серверной авторизации на базе протокола OAuth 2.0. Этот метод позволяет реализовать безопасную аутентификацию пользователей на Вашем сайте через ВКонтакте и получить доступ к API с сервера Вашего приложения.
Процесс авторизации сайта состоит из 4-х шагов:
- Открытие окна браузера для аутентификации пользователя на сайте ВКонтакте.
- Разрешение пользователем доступа к своим данным.
- Передача сайту значения code для получения ключа доступа.
- Получение сервером приложения ключа доступа access_token для доступа к API ВКонтакте.
Для авторизации пользователя необходимо перенаправить его браузер по адресу:
https://oauth.vk.com/authorize, передав следующие параметры:
| client_id Обязательно | Идентификатор Вашего приложения. |
| redirect_uri Обязательно | Адрес, на который будет переадресован пользователь после прохождения авторизации (домен указанного адреса должен соответствовать основному домену в настройках приложения и перечисленным значениям в списке доверенных redirect uri — адреса сравниваются вплоть до path-части). |
| display Обязательно | Указывает тип отображения страницы авторизации. Поддерживаются следующие варианты:
Если пользователь авторизуется с мобильного устройства, будет использован тип mobile. |
| scope | Битовая маска настроек доступа приложения, которые необходимо проверить при авторизации пользователя и запросить, в случае отсутствия необходимых. |
| response_type | Тип ответа, который Вы хотите получить. Укажите code, чтобы осуществлять запросы со стороннего сервера. |
| v | Версия API, которую Вы используете. Актуальная версия: 5.103. |
| state | Произвольная строка, которая будет возвращена вместе с результатом авторизации. |
Пример запроса:
Если пользователь не вошел на сайт, то в диалоговом окне ему будет предложено ввести свой логин и пароль.
После успешного входа на сайт пользователю будет предложено авторизовать приложение, разрешив доступ к необходимым настройкам, запрошенным при помощи параметра scope. Полный список настроек доступен в разделе прав доступа приложений.
Параметр code может быть использован в течение 1 часа для получения ключа доступа к API access_token с Вашего сервера.
В случае возникновения ошибки браузер пользователя будет перенаправлен с кодом и описанием ошибки:
Для получения access_token необходимо выполнить запрос с Вашего сервера на https://oauth.vk.com/access_token, передав следующие параметры:
| client_id Обязательно | Идентификатор Вашего приложения |
| client_secret Обязательно | Защищенный ключ Вашего приложения (указан в настройках приложения) |
| redirect_uri Обязательно | URL, который использовался при получении code на первом этапе авторизации. Должен быть аналогичен переданному при авторизации. |
| code Обязательно | Временный код, полученный после прохождения авторизации. |
Пример запроса:
В результате выполнения данного запроса Ваш сервер получит вновь созданный access_token. Вместе с access_token серверу возвращается время жизни ключа expires_in в секундах. Процедуру авторизации приложения необходимо повторять в случае истечения срока действия access_token, смены пользователем своего логина или пароля или удаления приложения из настроек.
Если у пользователя указан email, а приложением были запрошены соответствующие права, сервер также вернет email пользователя.
В случае ошибки будут переданы параметры error и error_description.
Чтобы добавить на свой сайт виджет авторизации ВКонтакте, выполните эти три шага:
I. В тег на странице Вашего сайта добавьте подключение openapi.js:
Более подробно про инициализацию транспорта Вы можете узнать на этой странице.
III. В тело страницы добавьте элемент DIV, в котором будут отображаться рекомендации, задайте ему уникальный id, и добавьте в него код инициализации виджета. Например:
Этот код добавляет блок авторизации стандартного вида.
Если на Вашем сайте уже используется Open API, добавить виджет ещё проще. Достаточно просто добавить инициализацию виджета (пункт III).