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

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

«Русская версия CS-Cart» и «Русская версия Multi-Vendor» включает два модуля для авторизации покупателей с помощью социальных сетей и почтовых сервисов:

Loginza Требуется регистрация на сервисе loginza.ru . В настоящий момент регистрация новых пользователей закрыта. Модуль работает для зарегистрированных ранее пользователей. Рекомендуем использовать модуль «Social Login»
Social Login

Добавляет авторизацию покупателей с помощью Вконтакте, Яндекс, Mail.ru, Одноклассники и др.

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

Social Login

Описание

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

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

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

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

  1. Установите модуль «Social Login» в панели администратора

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

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

    Иконки

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

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

    Примечание

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

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

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

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

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

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

    Примечание

    Панель администратора → Веб сайт → Social Login

    Данная страница позволяет создавать и редактировать настройки провайдеров.

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

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

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

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

Yandex

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

  2. Пройдите на страницу API OAuth-авторизация: api.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, это не сложно.

  1. Создайте новый проект в Google по ссылке: https://console.developers.google.com/project

    Нажмите «Create Project»

  2. Введите название и ID проекта.

    Проект будет создан

  3. Пройдите в раздел «Projects»

  4. Пройдите в настройки созданного проекта, кликнув по его названию.

  5. Откройте раздел «APIS & AUTH» → «Credentials»

  6. Нажмите «Create new Client ID»

  7. Выполните настройку.

    Web aplication Да
    AUTHORIZED JAVASCRIPT ORIGINS

    Адрес вашего интернет-магазина.

    Например: http://ваш_домен/

    AUTHORIZED REDIRECT URI http://ваш_домен/index.php?dispatch=auth.process&hauth_done=Google
  8. Будет создано приложение и вы увидите данные настроек провайдера в интернет-магазине:

    • CLIENT ID — ID
    • CLIENT SECRET — Секретный ключ
  9. Для того чтобы заработала авторизация Google, необходимо добавить Contacts API и Google+ API в секцию Enabled APIs. Добавить данные API вы можете, выбрав статус ON у Contacts API и Google+ API из списка Browse APIs.

  10. Создайте нового провайдера «Google» в панели администратора интернет-магазина, используя данные созданного приложения.

Финиш!

Дополнительные настройки вашего Google приложения вы можете настроить в разделе «Consent screen»

Вконтакте

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

  1. Откройте сайт vk.com и пройдите в раздел «Приложения» → «Управление» : http://vk.com/apps?act=manage

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

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

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

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

    • ID приложения
    • Защищенный ключ
  5. Создайте нового провайдера «Vkontakte» на странице «Social Login».

Успех!

Facebook

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

  2. Пройдите в раздел «Разработчикам» по ссылке в нижней части настроек аккаунта.

    Прямая ссылка на раздел «Разработчикам»: https://developers.facebook.com

  1. Нажмите «Create New App»

  2. Выполните настройку:

    Display name Название приложения
    Namespace Любой идентификатор, только строчные буквы, тире и подчёркивание.
    Категория Выберите из списка.
  3. Вам будет создано приложение и кличи для настроек авторизации.

    • App ID — ID
    • App Secret — Секретный ключ
  4. Пройдите в раздел Settings (Настройки).

  5. Заполните настройки:

    • App Domains — домены.
    • Contact Email — email.
  6. Нажмите «+Add Platform». Выберите «Website». Заполните URL интернет-магазина.

    Нажмите «Save Changes»

  7. Включите приложение на вкладке «Status & Review»

  8. Пройдите на страницу создания провайдеров в панели администратора интернет-магазина.

    Создайте нового провайдера с сервисом «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 в основном каталоге интернет-магазина.

    Можно скачать и разместить, а можно пропустить.

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

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

Финиш!