Проблема
Есть потребность вести учет пользователей на своем сайте, но нет желания тратить много усилий на создание авторизации на сервере?
Разберемся, как добавить на сайт виджет авторизации ВКонтакте.
Исследование
Первым делом прочитать документацию:
Безуспешная попытка №1
Создаю на сайте ВКонтакте новое приложение и прописываю настройки:
Затем создаю страницу и тестирую её на локальном компьютере по адресу http://localhost:3000/:
<!DOCTYPE html>
<html>
<head>
<title>Виджет для авторизации ВКонтакте</title>
<script src="https://vk.com/js/api/openapi.js?151" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
// здесь использовать ID вашего приложения
VK.init({
apiId: 6334072
});
</script>
<div id="vk_auth"></div>
<script type="text/javascript">
VK.Widgets.Auth('vk_auth', {});
</script>
</body>
</html>
<html>
<head>
<title>Виджет для авторизации ВКонтакте</title>
<script src="https://vk.com/js/api/openapi.js?151" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
// здесь использовать ID вашего приложения
VK.init({
apiId: 6334072
});
</script>
<div id="vk_auth"></div>
<script type="text/javascript">
VK.Widgets.Auth('vk_auth', {});
</script>
</body>
</html>
Не работает.
Пишу в службу поддержки ВК.
Жду...
Отвечают:
Успешная попытка №2
Коллеги подсказали, а поисковик подтвердил, что ВК работает только с портом 80: https://ru.stackoverflow.com/a/612222
Обновляю настройки приложения:
Настраиваю локальный сайт на 80 порт.
Работает.
Кодинг
Теперь, когда все заработало, я добавляю кнопку "Поприветствовать", которая будет выполнять функцию приветствия для авторизованного пользователя.
Делаю самую простую обработку кнопки и запрос к Open API ВКонтакте.
На сайте ВК создаю еще одно приложение id, которое используется на сайте.
Выкладываю сайт на Github Pages. При выходе из аккаунта появляется ошибка:
Github Pages не разрешает встраивание iframe, поэтому сайт приходится выложить на другой хостинг, на котором установлен LAMP, и прописать в .htaccess файле следующий код:
<IfModule mod_headers.c>
Header set X-Frame-Options "ALLOW-FROM https://vk.com/"
</IfModule>
Посмотреть сайт можно здесь:
Итого
Минусы
Документация ВКонтакте оставляет желать лучшего. Помощь от службы поддержки идет долго. Пост занял много времени. Виджет глючит на мобильных устройствах.
Плюсы
Нет
Вывод
На написание поста ушло около 6 часов. Есть проблемы в работе виджета. Использовать виджет авторизации на своем сайте － никогда.
Следующие статьи
В следующем посте я расскажу, как реализовать вход на сайт с помощью Open API ВКонтакте без использования виджета авторизации.
