Авторизация по VK ID | Mail.ru | Одноклассники

С одной интеграцией VK ID вы получаете все три способа авторизации: через ВКонтакте, Одноклассники (ОК), Mail.ru

Документация VK ID:
https://id.vk.com/about/business/go/docs/ru/vkid/latest/oauth-vk

Регистрация приложения VK ID

1. Подключить VK ID можно по ссылке https://id.vk.com/about/business

2. Добавить приложение.

3. Введите название вашего приложения, выберите "Web" и нажмите "Далее".

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

5. Для завершения регистрации необходимо нажать "Создать приложение".

Виджет авторизации

ВК предоставляет несколько виджетов которые можно поместить на страницу сайта.
Для быстрой авторизации через ВК, Mail.ru и Одноклассники нужен код виджета "3 в 1".

В редакторе страницы Кремакса виджет можно разместить в любом месте страницы, если добавить html-компонент и вставить код виджета во вкладку HTML.

Настройка доступа и подготовка БД

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

user: {
	user_id: "78318111",
	first_name: "Иван",
	last_name: "Иванов",
	avatar: "https://sun1-47.vkuserphoto.ru/s/v1/ig2/ZySVxbJMB6VafBwp123456",
	sex: 2,
	verified: false,
	birthday: "10.10.1990"
	}

Для запроса других данных пользователя, необходимо отредактировать параметр scope в коде виджета. Возможные значения перечислены здесь: https://id.vk.com/about/business/go/docs/ru/vkid/latest/vk-id/connection/work-with-user-info/scopes

Пример полей таблицы "Пользователи" на Кремаксе, созданные для хранения стандартной информации пользователя ВК:

Обязательным полем является только поле “VK ID”. Остальные могут быть созданы в таблице по усмотрению и служат для вывода информации самому пользователю.

Заметка: Сценарий из данной инструкции будет настроен именно на структуру таблицы представленную выше (поля: vk_id, vk_full_name, vk_avatar, vk_birthday). Если у вас планируется другая структура таблицы, то в дальнейшем необходимо будет отредактировать сценарий в соответствии.

Сценарий авторизации

После успешной авторизации в ВК, виджет ВК отправляет на сценарий специальный токен. Сценарий должен отвечать за: обмен токена на персональные данные пользователя ВК, запись данных в БД и авторизацию на Креатиуме по данным из ВК.

Сценарий авторизации VK ID

В сценарии необходимо заменить CLIENT_ID на ваш ID приложения.

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

Обратите внимание, что авторизация в сценарии происходит так же как и обычная авторизация. Id записи пользователя устанавливается в сессию пользователя. VK ID пользователя сохраняется в БД только для того чтобы мы могли соотносить запись с типом авторизации и находить пользователя по VK ID при последующих авторизациях.

Связка виджета и сценария

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

Код для вставки:

cr.api(function (page) {
	// vk_id_avtorizaciya нужно заменить на название эндпоинта сценария авторизации
  page.executeBackendScenario("vk_id_avtorizaciya", {
    // Значения для передачи в сценарий.
    data: data
  }, {}).then((res) => {
    // Обработка результата который возвращает сценарий
    	window.location.href = res;
    })
});

В коде виджета от ВК, код выше нужно вставить под комментарием “Обработка полученного результата”. vk_id_avtorizaciya нужно заменить на название эндпоинта вашего сценария авторизации VK ID.

Завершение и тестирование

После настройки всех компонентов шаги авторизации должны выглядеть так:

1. На странице с виджетом на публикации отображается кнопка входа по VK ID.

2. При нажатии на один из методов авторизации VK ID, пользователь переходит в ВК для разрешения доступа к данным.

3. После нажатия “Разрешить”, пользователя перенаправляет обратно на наш сайт и запускается сценарий авторизации.

4. Происходит перенаправление на страницу которая возвращается сценарием авторизации.

5. (Опциональный шаг) - вывод данных пользователя, которые мы получили из ВК. После успешной авторизации данные пользователя должны были быть записаны в таблицу. На странице выводятся данные из таблицы "Пользователи".

Выход из аккаунта происходит как и с обычной авторизацией - по кнопке выхода или по истечению сессии.

Проблемы и их решение