Социальные сети

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

Модуль CS-Cart “Вход через соцсети” позволяет покупателям авторизоваться с помощью социальных сетей и почтовых сервисов (ВКонтакте, Яндекс, Mail.ru, Одноклассники и др.).

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

Вход через соцсети

Описание

Модуль «Вход через соцсети» позволяет покупателям авторизоваться в вашем интернет-магазине с помощью:

  • Яндекс
  • Вконтакте
  • Одноклассники
  • Mail.ru
  • Google
  • Facebook
  • Twitter
  • OpenID
  • и других сервисов и социальных сетей.

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

Подсказка

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

Настройка модуля

  1. Установите модуль «Вход через соцсети» в панели администратора

  2. Откройте настройки модуля, кликнув по названию.

    Доступные настройки:

    Иконки

    Выберите размер иконок социальных сетей. Доступные размеры:

    • 24х24px
    • 32х32px
    • 64х64px

    Примечание

    Вы можете изменить или создать свои иконки, в том числе собственного размера. Иконки расположены в папке:

    /design/themes/[название_темы]/media/images/addons/hybrid_auth/icons/

    Просто создайте свою папку или измените существующую. Иконки будут автоматически доступны.

    Автогенерация электронной почты

    Некоторые социальные сети и сервисы не предоставляют email покупателя. В данной ситуации возможно два варианта:

    1. Покупателю будет предложено ввести адрес электронной почты, перед авторизацией.
    2. Покупатель будет сразу авторизован, email будет сгенерирован автоматически
  3. Создайте необходимых провайдеров на специальной странице Веб сайт → Вход через соцсети.

  4. Создайте нового провайдера (сервис) с помощью кнопки +.

  5. Нажмите на название сервиса, чтобы выполнить настройку.

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

Получить ключи API социальных провайдеров

Yandex

  1. Авторизуйтесь на сайте www.yandex.ru

  2. Пройдите на страницу API OAuth-авторизация: tech.yandex.ru/oauth

  3. Зарегистрируйте новое приложение на OAuth-сервере Яндекса.

  4. Выполните настройку нового приложения.

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

    Яндекс.Логин

    • Адрес электронной почты
    • Дата рождения
    • Имя пользователя, ФИО, пол
    Ссылка на иконку URL логотипа
    Ссылка на приложение URL интернет-магазина
    Callback URI http://ваш_домен/index.php?dispatch=auth.process&hauth_done=Yandex

    Создать!

  1. Будет создано приложение и вам будут доступные данные:

    • Id приложения
    • Пароль приложения
  2. Пройдите в панель администратора интернет-магазина и добавьте нового провайдера «Yandex». Используйте данные созданного приложения.

Всё!

Созданные вами приложения доступны на специальной странице: https://oauth.yandex.ru/client/my

Google

Примечание

Из-за закрытия Google+ API вам понадобится как минимум CS-Cart или Multi-Vendor 4.9.2 SP4. В этих версиях реализован вход на сайт через Gmail без Google+ API.

  1. Создайте проект в Google API Console.

  2. Перейдите на страницу Учётные данные и создайте Идентификатор клиента OAuth для веб-приложения.

    Важно

    На этом шаге скопируйте ссылку из настроек провайдера Google на стороне CS-Cart и вставьте её как Разрешённый URI перенаправления на стороне Google.

  3. После создания учётных данных вы увидите Идентификатор клиента и Секрет клиента. Скопируйте их в настройки провайдера Google на стороне CS-Cart и сохраните изменения. После этого покупатели смогут зарегистрироваться и войти в магазин через свои учётные записи Gmail.

ВКонтакте

Примечание

На стороне Вконтакте произошли изменения. Поэтому авторизация через эту социальную сеть теперь доступна только в CS-Cart 4.10.2 и более новых версиях. Если вы используете старую версию, рекомендуем обновиться – в новых версиях есть другие улучшения и исправления. Если с обновлением возникли сложности, обращайтесь в службу технической поддержки CS-Cart.

Создайте новое приложение Вконтакте.

  1. Откройте сайт Вконтакте для разработчиков и перейдите на вкладку Мои приложения.

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

  3. Необходимые настройки:

    Название Ваш интернет-магазин
    Тип Веб-сайт
    Адрес сайта http://ваш_домен/
    Базовый домен http://ваш_домен/
  4. Нажмите кнопку Подключить сайт. Ваше приложение будет создано.

  5. Откройте вкладку Настройки и получите настройки для модуля:

    • ID приложения;
    • Защищённый ключ.
  6. Перейдите на страницу Веб-сайтВход через соц.сети. Добавьте провайдера и выберите ему сервис Vkontakte.

Успех!

Facebook

  1. Зарегистрируйтесь на портале Facebook for Developers.

  2. Зайдите в раздел Мои приложения и добавьте новое приложение. Используйте для приложения такое же название, как у вашего магазина — покупатели увидят название приложения, когда попытаются войти в учётную запись в магазине через Facebook. Поэтому название магазина там будет смотреться естественно.

  3. Найдите и добавьте в своё прилжение продукт Вход через Facebook. Предложение его настроить может появиться при создании приложения или на главной панели; ещё вы можете воспользоваться для этого разделом Продукты.

  4. Откройте настройки продукта Вход через Facebook. Там нужно будет заполнить значение настройки Действительные URI перенаправления для OAuth, а затем сохранить свои изменения на стороне Facebook.

    URI должен выглядеть так:

    [STORE_URL]/index.php?dispatch=auth.process&hauth_done=Facebook
    

    Например, https://domain.com/index.php?dispatch=auth.process&hauth_done=Facebook.

  5. Перейдите в основные настройки вашего приложения на Facebook. Скопируйте Идентификатор приложения и Секрет приложения и вставьте их в соответствующие поля провайдера Facebook в CS-Cart. Сохраните свои изменения на стороне CS-Cart.

    Важно

    На этом этапе в магазин уже можно войти через вашу учётную запись Facebook. Но приложение всё ещё в разработке, поэтому покупатели пока ещё не могут войти в учётные записи через Facebook.

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

Twitter

  1. Пройдите на страницу: https://apps.twitter.com/

  2. Нажмите «Create New Apps».

  3. Выполните первоначальную настройку приложения:

    Name Название
    Description Описание
    Website URL
    Callback URL http://ваш_домен/index.php?dispatch=auth.process&hauth_done=Twitter
    Yes, I agree Соглашаемся с условиями.
  4. Вам будет создано приложение. Переходите в раздел «API Keys», где будут доступны:

    • API key — ID
    • API secret — Секретный ключ
  5. Создайте нового провайдера для сервиса «Twitter» в панели администратора.

Готово!

Одноклассники

  1. Получите права разработчика на странице: http://www.odnoklassniki.ru/devaccess

  2. Заполните необходимые настройки для нового приложения.

  3. API-ключи будут отправлены на вашу электронную почту.

  4. Создайте нового провайдера используя полученные ключи.

Mail.ru

  1. Пройдите в сервис «Сайты» от api.mail.ru: http://api.mail.ru/sites/

  2. Нажмите «Подключить сайт» и соглашайтесь с условиями.

  3. Заполните настройки на втором шаге регистрации:

    • Название
    • Адрес главной страницы
  4. Во избежание возможных ошибок, скачайте и разместите файл receiver.html в основном каталоге интернет-магазина, как это предложено mail.ru.

  5. Сайт будет добавлен, и вы получите все необходимые ключи:

    • ID
    • Приватный ключ
    • Секретный ключ
  6. Пройдите в панель администратора и создайте нового провайдера с помощью модуля «Social Login».

Финиш!