Top.Mail.Ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вконтакте

1. Авторизуйтесь ВКонтакте и перейдите по ссылке. В открывшейся форме дайте название вашему приложению и заполните необходимые поля:

Обратите внимание: в качестве платформы вы должны указать веб-сайт. Также, скорее всего вашим клиентам будет комфортнее, если вы назовете ваше приложение так же, как и свой магазин, но формально это необязательно.

Важно: укажите настоящий адрес вашего сайта и базовый домен!

2. После успешного создания приложения перейдите в настройки приложения и скопируйте необходимую информацию:

3. Укажите ее в бэк-офисе вашего магазина:

Этого будет достаточно для работы вашего приложения. Если у вас несколько доменов вам следует указать их в настройках приложения:

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

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 токен приложения":

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

Yandex

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

2. Заполните название магазина, выберите "Веб приложение" (Web Services) и укажите Callback адрес:

В "Callback URI #1" необходимо вставить адрес: https://домен/auth/yandex/callback, где слово "домен" необходимо заменить доменом вашего магазина, например myshop.ru

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

3. Укажите разрешения:

4. После добавления можно увидеть ID приложения и пароль (password):

5. Впишите идентификатор в поле "ID приложения" бэк-офиса, а пароль в поле ">API токен приложения":

Mail.ru

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

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

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

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

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

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

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

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

Оценки: 8

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