Обсудить проект
Max
Директор
Константин
PR менеджер
Работаем
пн-пт
с 9:00 до 19:00
Украина
0 800 211 593
Звонки бесплатные
Харьков
+380 67 258 45 54
+380 99 602 55 44
Россия
8 800 551 30 41
Звонки бесплатные
Москва
7 499 348 10 20

тут много полозного и интересного
Discuss a project

Настройка авторизации через соцсети на Shop Script 5

13 Сентября 2014

Как настроить авторизацию через социальные сети в Shop Script 5? Что необходимо сделать для этого?

Об этом и будет идти речь в данной статье.

Разработчики WebAsyst в этот раз потрудились на славу. Теперь Вам не нужно докупать дополнительные приложения или модули для настройки авторизации через соцсети для Вашего интернет-магазина. Стандартная сборка нового приложения магазина - Shop Scrip 5. уже включает в себя возможность настройки авторизации через такие соцсети как: Google+, Я.ру (Яндекс), Twitter, Вконтакте, Мой Мир (mail.ru), Facebook.

Рассмотрим подробнее как настроить авторизацию через ту или иную соцсеть в Вашем интернет-магазине.

Чтобы включить возможность авторизации через соцсети, необходимо:

  1. Зайти в администраторскую панель сайта.
  2. Зайти в приложение “Сайт”, далее в раздел “Настройки”.
  3. В самом низу страницы ставим галочку напротив “Включить формы регистрации и входа для этого сайта”, далее выбираем приложение, для которого нужна авторизация, после чего ставим галочку напротив “Авторизация через внешние сервисы” (на фото внизу показан пример включения авторизации в “Магазине”).

Обновление с 2 сентября 2014 года

После обновления фреймворка авторизация в магазине настраивается следующим образом:

  1. Заходите в администраторскую панель сайта.
  2. Заходите в приложение “Сайт”, далее в раздел “Личный кабинет” и переходите в “Настройки авторизации”.
  3. Включаете авторизацию на Вашем проекте.
  4. Нажимаете на “Настроить” (возле текста “Регистрация пользователей, авторизация…”) и выбираете приложение, через которое будет доступна авторизация на Вашем проекте.
  5. Ниже на этой странице ставим галочку напротив “Авторизация через внешние сервисы”.

Настройка авторизации через Яндекс

Шаг 1

Включение возможности авторизации через Яндекс

Для этого Вам необходимо зайти в приложение “Сайт”, далее в “Настройки” (после обновления фреймворка 02.09.2014 - в разделе “Сайт” - “Личный кабинет” - “Настройки авторизации”) и внизу поставить галочку напротив Яндекс. После этого появится два поля для ввода значений – Id приложения и Пароль приложения (см. фото внизу)

Шаг 2

Регистрация аккаунта в Яндекс

Вам необходимо зарегистрироваться в системе Яндекс – завести почтовый ящик.

Шаг 3

Создание нового приложения в Яндекс.Авторизация

Чтобы создать новое приложение в Яндекс.Авторизация Вам необходимо пройти по ссылке Яндекс OAuth и на открывшейся странице нажать “Регистрация клиентских приложений”:

  1. Вводите название приложения на латинице в поле “Название”
  2. В разделе “Права” выбираете “Яндекс.Логин” и проставляете галочки напротив 3-х открывшихся пунктов – “Адрес электронной почты”, “Дата рождения”, “Имя пользователя, ФИО, пол”
  3. В поле “Callback URI” указываете http://адрес_интернет_магазина/oauth.php?provider=yandex и нажимаете “Создать”
  4. На открывшейся странице необходимые значения (показано на фото внизу) из Id приложения и Пароль приложения и вставляете их в соответствующие поля в админ. панели Вашего сайта, после чего нажимаете “Сохранить”.

Настройка авторизации через ВКонтакте

Шаг 1

Включение возможности авторизации через ВКонтакте

Для этого Вам необходимо зайти в приложение “Сайт”, далее в “Настройки” (после обновления фреймворка 02.09.2014 - в разделе “Сайт” - “Личный кабинет” - “Настройки авторизации”) и внизу поставить галочку напротив ВКонтакте. После этого появится два поля для ввода значений - ID приложения, Защищенный ключ (см. фото внизу)

Шаг 2

Регистрация аккаунта в ВКонтакте

Вам необходимо зарегистрироваться в социальной сети ВКонтакте и подтвердить регистрацию через Ваш e-mail, после чего обязательно привязать к аккаунту свой номер мобильного телефона.

Шаг 3

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

Чтобы создать новое приложение в ВКонтакте Вам необходимо сначала авторизоваться и затем ройти по ссылке Вход ВКонтакте:

  1. На странице “Создание приложения” вводите Название приложения, а “Тип приложения” выбираете “Веб-сайт”, после чего вводите “Адрес сайта” и “Базовый домен”.
  2. Подтверждаете действие путем получения кода на Ваш номер телефона.
  3. Во вкладке “Настройки” копируете необходимые значения (показано на фото внизу) из “ID приложения” и “Защищенный ключ” и вставляете их в соответствующие поля в админ. панели Вашего сайта, после чего нажимаете “Сохранить”.

Настройка авторизации через Google

Шаг 1

Включение возможности авторизации через Google

Для этого Вам необходимо зайти в приложение “Сайт”, далее в “Настройки” (после обновления фреймворка 02.09.2014 - в разделе “Сайт” - “Личный кабинет” - “Настройки авторизации”) и внизу поставить галочку напротив Google. После этого появится два поля для ввода значений - Client ID и Client secret (см. фото внизу)

Шаг 2

Регистрация аккаунта в Google

Вам необходимо зарегистрироваться в системе Google – завести почтовый ящик.

Шаг 3

Создание нового проекта в Google APIs

Чтобы создать новый проект в Google APIs Вам необходимо пройти по ссылке Google Accounts и на открывшейся странице нажать “Create project…”.

  1. Далее заходите в раздел “APIs & auth” - “Credentials” и нажимаете на “Create new client ID”:
  2. В открывшемся окне в разделе “Application type” выбираем пункт “Web application”.
  3. В поле Authorized Javascript origins указываете адрес http://адрес_интернет_магазина.
  4. В поле Authorized redirect URI указываете адрес http://адрес_интернет_магазина/oauth.php?provider=google. И нажимаете “Create client ID”.
  5. Далее заходите в раздел “APIs & auth” - “Consent screen” и указываете “E-mail Adress” и “Product Name”. Нажимаете “Save”.
  6. Переходите в раздел “APIs & auth” - “Credentials” и копируете необходимые значения (показано на фото внизу) из Client ID и Client secret, затем вставляете их в соответствующие поля в админ. панели Вашего сайта, после чего нажимаете “Сохранить”.

Настройка авторизации через Mail.Ru

Шаг 1

Включение возможности авторизации через Mail.Ru

Для этого Вам необходимо зайти в приложение “Сайт”, далее в “Настройки” (после обновления фреймворка 02.09.2014 - в разделе “Сайт” - “Личный кабинет” - “Настройки авторизации”) и внизу поставить галочку напротив Mail.Ru. После этого появится три поля для ввода значений – ID, Секретный ключ, Приватный ключ (см. фото внизу)

Шаг 2

Регистрация аккаунта в Mail.ru

Вам необходимо зарегистрироваться в системе Mail.ru – завести почтовый ящик (привязать номер телефона к почте). После этого необходимо завести личный аккаунт в “Мой мир”.

Шаг 3

Создание нового проекта в Mail.Ru API

Чтобы создать новый проект в Mail.Ru API Вам необходимо пройти по ссылке @api и на открывшейся странице нажать “Создать приложение”:

  1. Подтверждаете ознакомление с правилами размещения приложений и нажимаете “Продолжить”.
  2. На странице “Разработка приложений” вводите название приложения, а в “Тип приложения” выбираете “iFRAME” и нажимаете “Создать приложение.
  3. После того как Вас перебросит на страницу “Мои приложения” нажимаете на “Управление” напротив Вашего приложения.
  4. Открываете вкладку “Базовые настройки”, копируете необходимые значения (показано на фото внизу) из ID, Секретный ключ, Приватный ключ и вставляете их в соответствующие поля в админ. панели Вашего сайта, после чего нажимаете “Сохранить”.

Настройка авторизации через Facebook

Шаг 1

Включение возможности авторизации через Facebook

Для этого Вам необходимо зайти в приложение “Сайт”, далее в “Настройки” (после обновления фреймворка 02.09.2014 - в разделе “Сайт” - “Личный кабинет” - “Настройки авторизации”) и внизу поставить галочку напротив Facebook. После этого появится два поля для ввода значений – App ID, App Secret (см. фото внизу)

Шаг 2

Регистрация аккаунта в Facebook

Вам необходимо зарегистрироваться в социальной сети Facebook и подтвердить регистрацию через Ваш e-mail. Также обязательно следует привязать к аккаунту свой номер мобильного телефона.

Шаг 3

Создание нового приложения в Facebook

Чтобы создать новое приложение в Facebook Вам необходимо пройти по ссылке Facebook Developers. Если Вы впервые заходите в раздел “Разработчикам”, то Вам нужно будет пройти процедуру регистрации как разработчика:

  1. Нажимаете на “Register Now”.
  2. В появившемся окне подтвержадаете условия пользования и нажимаете “Зарегистрироваться”.

Зайдя в раздел “Разработчикам” (Facebook Developers) нажимаете на “Apps” и затем на “Add a New App”:

  1. В открывшемся окне “Add a New App” выбираете “Веб-сайт”.
  2. На открывшейся страницы “Quick Start for Website” вводите название приложения и нажимаете “Create New Facebook App ID”.
  3. В открывшемся окне “Create App” выбираете категорию приложения и нажимаете на “Подтвердить”, в новом окне вводите капчу и нажимаете “Отправить”.
  4. После этого нажимаете “Skip Quickstart”.
  5. Затем переходите в раздел приложения “Settings”, в поле “App Domains” вводите основной домен Вашего сайта.
  6. Нажимаете на “Add Platform” и выбираете “Website”.
  7. В поле “Site URL” вводите адрес Вашего сайта http://адрес_интернет_магазина/oauth.php. В поле “Contact Email” вносите свой контактый e-mail и нажимаете “Сохранить изменения”.
  8. Переходите в раздел “Status & Review” и опубликовуете приложение.
  9. Переходите в раздел “Dashboard” копируете необходимые значения из “App ID” и “App Secret” и вставляете их в соответствующие поля в админ. панели Вашего сайта, после чего нажимаете “Сохранить”.

Настройка авторизации через Twitter

Шаг 1

Включение возможности авторизации через Twitter

Для этого Вам необходимо зайти в приложение “Сайт”, далее в “Настройки” (после обновления фреймворка 02.09.2014 - в разделе “Сайт” - “Личный кабинет” - “Настройки авторизации”) и внизу поставить галочку напротив Twitter. После этого появится два поля для ввода значений - Consumer key и Consumer secret (см. фото внизу)

Шаг 2

Регистрация аккаунта в Twitter

Вам необходимо зарегистрироваться в социальной сети Twitter и подтвердить регистрацию через Ваш e-mail.

Шаг 3

Создание нового приложения в Twitter

Чтобы создать новое приложение в Twitter Вам необходимо зайти в раздел “Разработчикам” (Developer), зайти в раздел “Manage Your Apps” (ссылка внизу страницы) и нажать на “Create New App”:

  1. На странице “Application Details” вводите Название (Name), Описание (Description) приложения, Адрес сайта (Website).
  2. В поле Callback URL указываете http://адрес_интернет_магазина/oauth.php?provider=twitter
  3. Подтверждаете ознакомление с правилами для Разработчиков приложений, вводите captcha и нажимаете “Create your Twitter application”.
  4. Заходите в свое приложение во вкладку “Api Keys” копируете необходимые значения (показано на фото внизу) из “API key” (ранее это было “Consumer key”) и “API secret” (ранее это было “Consumer secret”) и вставляете их в соответствующие поля в админ. панели Вашего сайта, после чего нажимаете “Сохранить”.

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

Желаем Вам прибыльной работы Вашего интернет-магазина!

Автор: Константин Сизоненко

Еще много полезного


Google опубликовал FAQ по изменениям в обработке разметки для отзывов
Google опубликовал FAQ по изменениям в обработке разметки для отзывов
23 Сентября 2019
Обновление Shop-Script 8.4.8 + плагин доставки Boxberry
Обновление Shop-Script 8.4.8 + плагин доставки Boxberry
17 Сентября 2019
Google изменил подход к обработке nofollow
Google изменил подход к обработке nofollow
17 Сентября 2019
Наше кредо

Совершенствуем себя
Делаем лучше мир

Гордость