Top.Mail.Ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сбер ID

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

1. После выбора "Сбер ID" из выпадающего списка нажмите "Добавить" и в появившемся окне "Создать":

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

Вконтакте

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

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

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

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

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

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

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

Facebook

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

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

3. Выберите тип приложения:

В данном случае для примера необходимо выбрать "Потребительское".

4. В появившейся форме укажите название приложения и ваш email для связи:

Создание приложения ФБ

5. После проверки безопасности откроется страница настроек приложения, найдите на ней карточку "Вход через Facebook" и нажмите "Настроить":

6. Укажите "Веб" в качестве платформы:

7. В открывшемся окне укажите адрес своего магазина, нажмите кнопку "Save" и "Продолжить":

8. Перейдите в основные настройки приложения на боковой панели, добавьте домен сайта и URL-адрес политики конфиденциальности:

В пункте "Удаление данных пользователей" выберите "URL инструкций для удаления данных" и укажите URL страницы вашего сайта, на которой расположено описание действий для удаления данных пользователя или форма для отправки заявки на удаление данных пользователя:

Сохраните изменения.

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

10. В этом же разделе отображается идентификатор приложения и токен доступа ("секрет приложения)":

11. Внесите эту информацию в бэк-офисе вашего магазина:

12. В настройках приложения "Вход через Facebook" необходимо заполнить "Действительные URI перенаправления для OAuth":

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

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

13. В разделе Проверка приложения → Разрешения и функции включите расширенный доступ:

 

14. Пройдите проверку использования данных для приложения:

15. В верхней панели переключите "Режим приложения" в статус "рабочий режим":

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

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

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

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

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

Оценки: 7

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