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

Описание

Модуль «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 покупателя. В данной ситуации возможно два варианта: Покупателю будет предложено ввести адрес электронной почты, перед авторизацией. Покупатель будет сразу авторизован, email будет сгенерирован автоматически

3. Создайте необходимых провайдеров на специальной странице «Social Login»

   Примечание

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

   

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

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

   

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

   

Для каждого провайдера (сервиса) необходимо получить 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

   Создать!

   

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

   • Id приложения
   • Пароль приложения
   

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

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

   

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

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

   

6. Вам будет создано приложение и кличи для настроек авторизации.

   • App ID — ID
   • App Secret — Секретный ключ
   

7. Пройдите в раздел Settings (Настройки).

   

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

   • App Domains — домены.
   • Contact Email — email.
   

9. Нажмите «+Add Platform». Выберите «Website». Заполните URL интернет-магазина.

   

   Нажмите «Save Changes»

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

    

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

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

   

Финиш!