Получите сайт "под ключ" за 20 дней: удобный функционал, современный дизайн, более
200 интеграций
для бизнеса Реклама. ООО «Инсейлс Рус»‎ ИНН 771484376 erid: 2Ranynxjx8G
Получите продающий сайт «под ключ» за 20 дней: уникальный дизайн, подключение интеграций, удобный функционал
Реклама. ООО «Инсейлс Рус»‎ ИНН 771484376 erid: 2Ranyo5dJeU

Авторизация через социальные сети

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

В таком случае можно делегировать задачу аутентификации пользователя этим сервисам. Скорее всего, клиенты уже залогинены в одном из них, поэтому им придется не вводить свой пароль, а только согласиться на передачу некоторых их персональных данных, таких как email.

Более подробно о протоколе такой аутентификации можно узнать, например, в Википедии. В данной статье рассмотрены технические детали реализации подобного механизма на inSales.

Каждую социальную сеть необходимо настраивать индивидуально. Обычно настройка состоит из двух этапов:

  1. регистрация интернет-магазина в социальной сети и получение специальных ключей;
  2. настройка социальной сети в интернет-магазине.

Важно: интернет-магазин должен быть с ssl-сертификатом, то есть его адрес должен начинаться на https.

  1. Приложение для авторизации через соцсети
  2. ВКонтакте
  3. Google
  4. Яндекс
  5. Mail.ru

Приложение для авторизации через соцсети

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

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

Далее необходимо заполнить форму данными о приложении:

Форма добавления приложения авторизации

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

Важно: можно добавить не более одного приложения каждого провайдера. Для создания приложения социальной сети необходим аккаунт в этой социальной сети.

Далее подробно рассмотрено, как создавать подобные приложения у провайдеров.

ВКонтакте

Для настройки авторизации через ВКонтакте требуется аккаунт с настроенным VK ID.

1. Авторизуйтесь в VK ID и перейдите в раздел "Мои приложения" сервиса авторизации ВКонтакте. Нажмите "Добавить приложения".

2. В открывшемся окне создания приложения заполните название приложения. Скорее всего, клиентам магазина будет комфортнее, если приложение будет называться так же, как и магазин, но формально это необязательно. Включите платформу "Web". Также можно добавить логотип сайта в окне выбора изображения, но на работоспособность это не повлияет.

3. Введите домен сайта магазина. Если у магазина несколько доменов, нажмите "+ Добавить базовый домен" и заполните добавленное поле.

В поле "Доверенный Redirect URL" введите любой адрес, при дальнейшей настройке нужно будет очистить поле.

Нажмите "Готово". Подтвердите создание приложения с помощью кода в открывшемся модальном окне:

4. После успешного создания откроются настройки приложения. Очистите поле "Доверенные Redirect URL" и сохраните настройки.

Также к настройкам приложения можно перейти из раздела "Мои приложения", нажав на нужное приложение в списке.

5. Скопируйте ID приложения и защищенный ключ.

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

6. В настройках приложения для авторизации в разделе Настройки → Авторизация inSales вставьте скопированное ID приложения в соответствующее поле, а скопированный защищенный ключ в поле "API токен приложения".

После сохранения приложение добавится в список в блоке "Приложения для авторизации через соцсети":

Google

1. Перейдите по ссылке и примите условия пользования.

2. Создайте новый проект:

3. Введите в поиске "API" и перейдите в раздел "APIs & Services":

4. Включите API и сервисы:

5. В библиотеке API нужно найти "Google+ API":

6. Включите "Google+ Api":

7. После подключения вернитесь в "APIs & Services" (например, через поиск) и настройте "OAuth consent screen":

Далее заполните необходимые данные и сохраните их:

8. Перейдите во вкладку "Credentials", нажмите кнопку "create credentials" и создайте QAuth client ID:

9. Выберите тип "Web application" и добавьте "Authorized redirect URIs" :

Необходимо вставить адрес https://домен/auth/google/callback, где слово "домен" необходимо заменить доменом магазина, например myshop.ru

Важно: если домен включает "www", то данный адрес тоже должен содержать "www".

10. После создания клиента будут доступны идентификатор и ключ:

11. Скопируйте эти данные и введите в панели администратора магазина. Впишите "Идентификатор клиента" в поле "ID приложения" панели администратора, а "Секрет клиента" в поле " API токен приложения":

Все готово к работе. Также можно добавить описание и логотип своего приложения.

Яндекс

1. Перейдите к созданию приложения для входа и авторизуйтесь в нужном Яндекс ID.

После авторизации откроется создание приложения:

2. Заполните поля формы. Справа от формы можно посмотреть, как меняется окно авторизации в зависимости от введенных данных.

2.1. Введите название магазина:

Название будет отображаться в системе Яндекс и будет видно пользователям.

2.2. Выберите "Web services" и в открывшемся поле введите Redirect URL.

Redirect URL должна иметь вид https://<домен>/auth/yandex/callback, где вместо <домен> нужно подставить доменный адрес магазина. Например, insalestest.ru.

Важно: если домен включает "www", то данный адрес тоже должен содержать "www".

2.3. Выберите разрешения "Access to email address" и "Access to username, first name and surname, gender".

2.4. При желании введите email (магазина или личный).

На данный email будут отправляться уведомления от Яндекса о изменениях сервиса. 

3. После нажатия кнопки "Create app" откроется страница настроек приложения.

Скопируйте значения полей "ClientID" и "Client secret" (они находятся в правом столбце).

4. Скопированные данные введите в панели администратора магазина. Впишите ClientID в поле "ID приложения" панели администратора, а Client secret в поле "API токен приложения".

Нажмите кнопку "Создать".

Mail.ru

1. Перейдите по ссылке (необходимо быть авторизованным в Mail.ru);

2. Нажмите "Создать приложение" и заполните анкету:

В поле "Все redirect_uri" необходимо вставить адрес https://домен/auth/mailru/callback, где слово "домен" необходимо заменить доменом магазина, например myshop.ru

Важно: если домен включает "www", то данный адрес тоже должен содержать "www".

3. После создания приложения можно увидеть его ID и пароль (Client Secret):

4. Впишите идентификатор в поле "ID приложения" панели администратора, а пароль в поле "API токен приложения":

Оставить оценку

Оценка успешно отправлена.
Она будет проверена администратором перед публикацией.
Перед публикацией все оценки проходят модерацию

Оценки: 10

Комментарий
Документация устарела, для тех у кого не получается подключить авторизацию через ВК, не вписывайте адрес сайта (Доверенный Redirect URL), тогда будет работать.
Ответ разработчика:
Здравствуйте! Спасибо за обратную связь.
Обновим статью в ближайшее время.
Комментарий
Здравствуйте, делал по данной инструкции все для Яндекса Но при попытке авторизации, пишет "Запрещено получать токены с данными правами для данного приложения (unauthorized_client)"
Ответ разработчика:
Здравствуйте.
По данному вопросу рекомендуем обратиться в техническую поддержку inSales,
Комментарий
Спасибо огромное! Все получилось, кроме Фейсбука и Гугла. Описание не соответствует действительности
Ответ разработчика:
Спасибо за обратную связь, проверим актуальность инструкции.
Комментарий
Отличная статья! Шаг за шагом подключил все авторизации без каких либо проблем. Спасибо вам, команда Insales!
Комментарий
Не работает!
Ответ разработчика:
Напишите, пожалуйста, обращение в нашу техническую поддержку с подробным описанием проблемы. Разберемся. Подробнее о том, как создать обращение в техподдержку: https://www.insales.ru/collection/doc-reglamenty/product/kak-sozdat-obraschenie-v-tehpodderzhku-reglament-raboty
Комментарий
Всё по делу написано. Единственно стоит добавить, что при регистрации в Google название и проекта и самого приложения нужно писать только латиницей. Название с русскими буквами не переваривает и не выдает вменяемого сообщения об ошибке, а тупо не сохраняет и дальше не двинешься!
Комментарий
обновите пожалуйста инструкцию для Google
Ответ разработчика:
Обновили, спасибо за обратную связь.
Комментарий
Для Гугла кажется устаревшая инструкция. Там поменялся интерфейс, а также пришлось заполнять даннные в разделе "Окно запроса доступа OAuth", где я мог что-то напутать. Было бы здорово, если бы вы включили в инструкцию это
Комментарий
У меня яндекс не добавлен и его нет в списке. Есть OpenID connect, но на него нет иснтрукции(
Комментарий
Инстуркция по подключению авторизации через Google несколько устарела.
Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе inSales
Всё для продаж уже внутри!
Нажимая кнопку «Зарегистрироваться», я принимаю Пользовательское соглашение и Политику конфиденциальности
Недавно просмотренные статьи
Продолжая пользоваться сайтом,
вы соглашаетесь с использованием cookie