Top.Mail.Ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вконтакте

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

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

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

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

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

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

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

Facebook

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

Нажмите на кнопку "Add a New App", в появившейся форме укажите название приложения и ваш email для связи:

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

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

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

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

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

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

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

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

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

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

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

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

10. В верхней панели располагается переключатель и текст "Статус: в разработке". Необходимо его активировать, чтобы статус сменился на "Опубликовано":

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

Google

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

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

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

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

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

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

7. После подключения вернитесь в "API и сервисы" и настройте "Окно запроса доступа OAuth":

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

8. Перейдите во вкладку "Учетные данные", нажмите кнопку "Создать учетные данные" и создайте индентификатор клиента QAuth:

9. Выберите тип "веб-приложение" и добавьте "Разрешенные URI перенаправления" :

Необходимо вставить адрес: 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 токен приложения":

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

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

Оценки: 4

Комментарий
обновите пожалуйста инструкцию для Google
Ответ разработчика:
Обновили, спасибо за обратную связь.
Комментарий
Для Гугла кажется устаревшая инструкция. Там поменялся интерфейс, а также пришлось заполнять даннные в разделе "Окно запроса доступа OAuth", где я мог что-то напутать. Было бы здорово, если бы вы включили в инструкцию это
Комментарий
У меня яндекс не добавлен и его нет в списке. Есть OpenID connect, но на него нет иснтрукции(
Комментарий
Инстуркция по подключению авторизации через Google несколько устарела.
Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе InSales
Всё для продаж уже внутри!
Недавно просмотренные статьи