Новый инструмент существенно упрощает процесс интеграции своего сервиса в веб-приложения и мобильные приложения.
Сервис станет большим подспорьем как для разработчиков, так и для бизнеса. Новые возможности позволяют быстрее и проще настраивать виджет авторизации VK: решение относится к no-code платформам.
Зачем нужен VK ID: плюсы инструмента
Одним из главных преимуществ нового инструмента является его простота в использовании.
- Он дает возможность легко настраивать интерфейс виджета, его визуальные элементы, что, в свою очередь, облегчает процесс идентификации и авторизации пользователей на сайте.
- Простота интеграции снижает требования к техническим навыкам, так что бизнесу теперь не обязательно иметь в штате программиста для добавления авторизации через ВКонтакте.
- Инструмент VK помогает компаниям сэкономить на разработке собственных решений и минимизировать затраты на SMS-уведомления при авторизации.
- Обеспечивает надежную защиту информации о пользователях, позволяя им авторизоваться в один клик. Сервис поддерживает двухфакторную аутентификацию и возможности входа по лицу или отпечатку пальца, что повышает безопасность персональных данных.
- Позволяет просматривать историю активных сессий, получать индивидуальные рекомендации по безопасности, что повышает общее доверие к сервису.
- Ну и еще: сервис российский поэтому заблокировать его не должны.
Как настроить: пошаговая инструкция
Чтобы сделать кнопку авторизацию через ВК ID, потребуется задать параметры виджета, скопировать полученный код и вставить его на сайт (если добавить виджет авторизации нужно в веб-приложение).
Можно изменять стиль и расположение элементов в зависимости от дизайна своего приложения.
Перед тем как начать, убедитесь, что у вас есть доступ к административной панели вашего приложения. Также, чтобы использовать VK ID, вам необходимо зарегистрировать приложение на платформе VK и получить уникальные параметры — ID приложения и секретный ключ. Это потребуется для настройки авторизации.
Шаг 1. Регистрация приложения
Перейдите в административный кабинет VK ID. В разделе «Инструменты» выберите опцию, связанную с интеграцией инструментов авторизации. Нажмите синюю кнопку:
Регистрируем приложение:
Для этого указываем его название и выбираем платформу. Не забудьте выбрать изображение. При подключении модуля VK ID указанное изображение будет использовано в качестве иконки приложения на окнах авторизации и в Личном кабинете пользователя VK ID.
В зависимости от типа приложения указываем обязательные параметры.
- Базовый домен — базовый домен вашего сайта. Если вы хотите, чтобы использовались поддомены, необходимо поставить в начале базового домена точку (например, .mysite.com). Вы также можете указать несколько доменных имен, если есть необходимость использовать один APP_ID на разных доменах.
- Доверенный редирект URL — URL, на который будет переадресован браузер пользователя после нажатия кнопки «Войти как». Важно указать адрес, если вы используете схему авторизации Config.set
- Название пакета приложения. Заполнение полей «Название пакета приложения» и «SHA-1 хеш подписи приложения» необходимо для отображения данных пользователя на кнопке (имя, фото профиля, телефон)
- SHA-1 хеш подписи приложения — все тоже самое, что и в пункте выше.
Шаг 2. Настройка визуальных элементов
На странице настройки будет предложено выбрать тип визуального элемента, который хотите интегрировать на свой сайт. Возможные варианты:
- Обычный виджет;
- Шторка для входа;
- Кнопка OneTap для мгновенной авторизации.
Нажимаем «К настройке».
Шаг 3. Генерация кода
Настраиваем внешнее представление виджета. Можно поменять тему оформления на темную, изменить размер, стиль или добавить скругление кнопок, подстраивая их под ваш интерфейс. Редактировать код для изменения этих параметров не придется. Просто настройте дизайн через эти кнопки:
Код будет динамически меняться по ходу настройки:
После настройки визуальных элементов, сервис сгенерирует готовый код для добавления интеграции. Вам нужно просто скопировать его.
Если вы выбирали несколько элементов, нажимаем «Следующий элемент» — и по аналогии настраиваем другой вид виджета (затем копируем код).
Готово. Наше приложение успешно добавлено в аккаунт VK ID.
Дополнительно можете:
- Изучить документацию, чтобы настроить приложение;
- Настроить подключение своего приложения. Вот все способ интеграции;
- Получить токен для работы с пользовательскими данными. Подробнее про работу с Access token читайте в справке.
Шаг 4. Встраивание кода на сайт
После того как код сгенерирован, вставьте его в HTML-сайта. Обычно это делается в разделе <head> или перед закрывающим тегом </body>. Важно убедиться, что код размещен корректно, чтобы избежать ошибок при авторизации пользователей.
Шаг 5. Тестирование интеграции
После завершения встраивания кода проведите тестирование интеграции. Попробуйте зарегистрироваться и войти на сайт с использованием созданных вами элементов авторизации. Проверьте, правильно ли отображаются кнопки и работают ли функции авторизации.
Шаг 6. Обработка ошибок и поддержка
Если во время тестирования возникают проблемы, пересмотрите шаги настройки и убедитесь, что код вставлен правильно.
Шаг 7. Завершение настройки
Если все работает корректно, вы успешно настроили VK ID в своем приложении.
Коротко о главном
- Новый инструмент доступен как для веб-сайтов, так и для мобильных приложений, поддерживая платформы Android и iOS.
- Сервис бесплатный.
- Быстрые варианты регистрации и входа через аккаунт ВКонтакте — это улучшение пользовательского опыта.
- VK ID продолжает развиваться и адаптироваться к требованиям рынка, и запуск этого инструмента — яркий пример.
- Упрощение интеграции сервиса VK на сайты и мобильные приложения может привести к более широкому распространению VK ID.
- Запуск инструмента имеет большое значение для бизнеса. Ведь его помощью можно улучшать взаимодействие с клиентами, упрощая процесс регистрации и авторизации.
Читайте также:
Реклама в новом кабинете ВК: все плюсы и минусы
Как правильно оформить страницу в «ВК» для бизнеса
Лучшие расширения для «ВКонтакте»: как скачать и что изменить
