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

Введение

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

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

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

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

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


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

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

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

Сначала вам необходимо перейти в необходимый раздел БО:


Переход в раздел "Авторизация"

Нажав кнопку "Добавить" вы увидите форму добавления данных о приложении:


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

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

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

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

Вконтакте

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

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

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


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

    Вас попросят подтвердить свою личность:

    Подтверждение создания приложения ВК

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

    Данные приложения ВК


  3. Укажите их в БО вашего магазина:
    Данные приложения ВК в БО

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



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

Facebook

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

  2. Нажмите на кнопку "Add a New App", в появившейся форме укажите название приложения и ваш email для связи:
    Создание приложения ФБ
    Обратите внимание: перевод этого раздела на русский язык на момент написания этой статьи хоть и является читабельным, но не до конца корректен. Возможно, вы захотите работать с Facebook на английском языке, для этого просто смените язык в настройках своего аккаунта.

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

  4. Наведите мышкой и нажмите появившуюся кнопку настроек:



  5. Укажите WWW в качестве платформы, в открывшемся окошке укажите адрес своего магазина и нажмите кнопку сохранить:

  6. Перейдите в основные настройки приложения на боковой панели:

  7. Добавьте домен (хост сайта):


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


  9. В этом же разделе вы увидите идентификатор приложения и, после ввода своего пароля, его токен доступа ("секрет приложения)".
    Внесите эту информацию в свой БО:


  10. В настройках приложения Facebook Login необходимо заполнить Valid OAuth Redirect URIs:
    photo_2018-06-04_16-29-25.jpg
    Туда необходимо вставить адрес: https://домен/auth/facebook/callback, где слово "домен" необходимо заменить доменом вашего магазина, например myshop.ru

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

Google

  1. Заходим по ссылке, принимаем условия пользования;
  2. Включаем API и сервисы:


  3. В библиотеке подключаем "Google+ Api":


  4. После подключения необходимо заполнить данные аккаунта:




  5. Добавить учетные данные:

  6. Добавляем URI перенаправления:

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

  7. На 3 шаге можно увидеть ClientID, который понадобиться в будущем. Но сейчас нужно нажать "готово".

  8. Cоздаем новый проект. Если при этом ничего не произошло, можно нажать кнопку "Выберите проект" рядом с логотипом и попробовать создать проект через кнопку в диалоговом окне:


  9. В созданном проекте настройте учетные данные для окна запроса доступа OAuth:



  10. Перейдите в учетные данные проекта и в секции идентификаторы клиентов OAuth 2.0 зайдите в созданное ранее приложение:




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

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

 

Yandex

  1. Переходим по ссылке (необходимо быть авторизованным в Яндексе);
  2. Заполняем анкету, выбираем "Веб приложение" (Web Services) и указываем Callback:

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


  3. Указываем разрешения:



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

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

Остались вопросы? Отправьте тикет в техподдержку!

Создать запрос!

Недавно просмотренные статьи

Еще нет магазина на InSales? Создайте интернет-магазин бесплатно