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

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

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

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

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

Описание

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

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

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

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

  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, это не сложно.

  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».

Финиш!