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

Главная   →   Справка   →   Личный кабинет пользователя

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

  1. зарегистрировать свой интернет-магазин как соответствующее приложение в каждой из доступных социальных сетей и получить код доступа к нему;
  2. в режиме администрирования интернет-магазина внести полученные коды доступа в настройки виджета «Авторизация через социальные сети»;
  3. при желании подключения «аватаров» пользователей из социальных сетей – в режиме администрирования интернет-магазина соответственно настроить виджет «Регистрация».

Создание приложений в социальных сетях

Ниже Вы найдете описание регистрации интернет-магазина в наиболее часто используемых социальных сетях.

Регистрация интернет-магазина как приложения в «Facebook»

Зарегистрируйтесь и авторизуйтесь на сайте https://facebook.com, после чего перейдите по адресу https://developers.facebook.com/apps.
На открывшейся странице нажмите на кнопку «Create a New App»:

Откроется диалоговое окно «Create a New App ID»:

В качестве названия укажите наименование приложения (оно может совпадать с названием Вашего интернет-магазина).

Из выпадающего списка «Category» выберите, к какой категории относится приложение, например, «Business», после чего нажмите на кнопку «Create App ID»:

Далее выберите команду меню «Settings» в левой части открывшейся страницы, на закладке «Basic» в поле «Contact Email» введите свой адрес электронной почты, в поле «App Domains» введите адрес своего сайта после чего нажмите на кнопку «Save Changes»:

Скопируйте идентификатор приложения из поля «App ID» и секретный код – из поля «App Secret» (перед этим нажмите на кнопку «Show/Показать» справа от поля).

Не забудьте перевести ваше приложение в рабочее состояние.

Описание дальнейшей настройки авторизации пользователей через «Facebook» см. в части «Настройка виджета «Авторизация через социальные сети».

Регистрация интернет-магазина как приложения в «ВКонтакте»

Чтобы включить аутентификацию пользователей в интернет-магазине через социальную сеть «ВКонтакте»:

Зарегистрируйтесь и авторизуйтесь на сайте http://vk.com, после этого перейдите на страницу http://vk.com/dev.

Нажмите на кнопку «Создать приложение»:

Введите наименование создаваемого приложения в поле «Название» и нажмите на кнопку «Подключить приложение»:

Нажмите на кнопку «Получить код» в открывшемся диалоговом окне «Подтверждение действия»:

Введите в поле «Код подтверждения» пятизначный код, который придет на Ваш мобильный телефон и нажмите на кнопку «Отправить код»:

Далее выберите команду меню «Настройки» в левой части открывшейся страницы:

Далее на странице «Настройки» щелкните в поле «Open API» по гиперссылке «Выключен» и из выпадающего списка выберите значение «Включен»:

В открывшиеся поля введите: «Адрес сайта» – http:// [ваш-домен].ru/cabinet/ и «Базовый домен» – http://[ваш-домен].ru/:

Скопируйте идентификатор (ID) приложения и защищенный ключ из соответствующих полей в верхней части страницы «Настройки»:

Описание дальнейшей настройки авторизации пользователей через сеть «ВКонтакте» см. в части «Настройка виджета «Авторизация через социальные сети».

Регистрация интернет-магазина в системе «Mail.Ru»

Чтобы включить аутентификацию пользователей в интернет-магазине через почтовую систему «Mail.Ru» (социальную сеть «Мой Мир»):

Зарегистрируйтесь и авторизуйтесь на сайте http://my.mail.ru/, после этого перейдите на страницу http://api.mail.ru/sites/.

На открывшейся странице нажмите на кнопку «Подключить сайт»:

Пожалуйста, внимательно прочитайте «Правила использования», после чего установите флажок в поле «Я принимаю правила использования Платформы@Mail.Ru» и нажмите на кнопку «Продолжить»:

Далее заполните соответствующей информацией о Вашем интернет-магазине поля «Название» и «Адрес главной страницы» (http:// [ваш-домен].ru/cabinet/), после чего нажмите на кнопку «Продолжить»:

На следующей странице вновь нажмите на кнопку «Продолжить» (ничего скачивать не нужно):

Далее перейдите по гиперссылке «Пропустить»:

Скопируйте идентификатор (ID) интернет-магазина в системе «Mail.Ru», приватный и секретный ключи из соответствующих полей:

Регистрация интернет-магазина как приложения в системе «Яндекс»

Для подключения возможности аутентификации пользователей в интернет-магазине через почтовую систему «Яндекс»:

Зарегистрируйтесь и авторизуйтесь на сайте https://mail.yandex.ru/, после этого перейдите на страницу https://oauth.yandex.ru/client/new.

На открывшейся странице введите наименование создаваемого приложения в поле «Название», определите права доступа, укажите адрес интернет-магазина в поле «Callback URL» (http://[ваш-домен].ru/cabinet/?hauth.done=Yandex), после чего нажмите на кнопку «Сохранить»:

Скопируйте идентификатор (ID) приложения в системе «Яндекс» и пароль из соответствующих полей: 

Описание дальнейшей настройки авторизации пользователей через систему «Яндекс» см. на странице «Настройка виджета «Авторизация через социальные сети».

Регистрация интернет-магазина как приложения в сервисе «Twitter»

Для подключения возможности аутентификации пользователей в интернет-магазине через сервис публичного обмена короткими сообщениями «Twitter»:

Зарегистрируйтесь и авторизуйтесь на сайте https://twitter.com/, после этого перейдите на страницу https://apps.twitter.com/app/new.

На открывшейся странице введите наименование создаваемого приложения в поле «Name», описание приложения – в поле «Description», укажите адрес интернет-магазина в поле «Website» и адрес личного кабинета администратора сайта – в поле «Callback URL» (http://[ваш-домен].ru/cabinet/?hauth.done=Twitter). Ознакомьтесь с соглашением, изложенным в поле «Developer Agreement», после чего установите флажок в поле «Yes. I agree» в нижней части страницы и нажмите на кнопку «Create your Twitter application»:

На открывшейся странице перейдите на закладку «Keys and Access Tokens», где скопируйте ключ и секретный код из полей «Consumer Key (API Key)» и «Consumer Secret (API Secret)» соответственно:

Регистрация интернет-магазина как приложения в системе «Google»

Чтобы включить аутентификацию пользователей в интернет-магазине через систему «Google»:

Зарегистрируйтесь и авторизуйтесь на сайте http://google.com/, после этого перейдите на страницу https://console.developers.google.com/project.

На открывшейся странице нажмите на кнопку «Create project…»:

В поле «Project name» введите наименование приложения, перейдите по гиперссылке «Terms of Service» и ознакомьтесь с условиями использования сервиса, после чего установите флажок в поле «I have read and agree to all Terms of Service for the Google Cloud Platform products» и нажмите на кнопку «Create»:

На открывшейся странице «Project Dashboard» выберите команду «APIs & auth» –> «Credentials» в меню, расположенном слева, затем на открывшейся странице нажмите на кнопку «Create new Client ID»:

 

Откроется диалоговое окно «Create Client ID», в котором убедитесь, что радиокнопка установлена в положении «Web application», после чего нажмите на кнопку «Configure consert screen»:

Далее в поле «Email Address» выберите из выпадающего списка электронный адрес для обратной связи, укажите в полях «Product name» и «Homepage URL» наименование Вашего интернет-магазина и адрес главной страницы магазина соответственно, после чего нажмите на кнопку «Save»:

В открывшемся диалоговом окне введите в поле «Authorized JavaScrpit Origins» адрес вида http:// [ваш-домен].ru/cabinet/ и в поле «Authorized Redirect URIS» – адрес http://[ваш-домен].ru/cabinet/?hauth.done=Google, после чего нажмите на кнопку «Create Client ID»:

На открывшейся странице скопируйте идентификатор («Client ID») интернет-магазина в системе «Google» и секретный ключ («Client Secret») из соответствующих полей:

Подключите Google+ API в вашем аккаунте разработчика:

Snimok_ekrana_2015-07-07_v_153137.png

Snimok_ekrana_2015-07-07_v_153154.png

 

Настройка виджета «Авторизация через социальные сети»

После того, как Вы зарегистрировали интернет-магазин как приложение в социальных сетях, необходимо подключить и настроить специальный виджет.

Для этого:

Перейдите в режим администрирования интернет-магазина.

Выберите в «Проводнике» раздел «Кабинет», после чего на открывшейся в рабочей области окна закладке перейдите на вкладку «Виджеты»:

Среди пиктограмм в верхней области вкладки найдите пиктограмму виджета «Авторизация через социальные сети»: .

Щелкните по пиктограмме и, не отпуская правой клавиши мыши, «перетащите» пиктограмму виджета в нижнюю область вкладки «Виджеты»:

В нижней области вкладки «Виджеты» появятся поля настроек добавленного виджета. «Перетащите» при помощи мыши из «Проводника» название группы с зарегистрированными пользователями в поле «Группа пользователей» в рабочей области окна:

Введите сохраненные при регистрации интернет-магазина в социальных сетях данные (идентификаторы приложений, секретные ключи и т.п.) в соответствующие поля настроек виджета.

По завершении нажмите на кнопку «Сохранить данные».

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

Если пользователь, желающий пройти авторизацию через социальную сеть, еще не зарегистрирован в интернет-магазине, то он будет автоматически зарегистрирован и авторизован.

В «Личном кабинете» в интернет-магазине пользователь получит возможность привязать к своему аккаунту все социальные сети, которые были настроены, чтобы использовать их для быстрой авторизации на сайте.

Использование для пользователей магазина «аватаров» из социальных сетей

В Системе существует возможность использования изображений пользователя из социальных сетей (т.н. «аватаров») при, например, комментировании статей, товаров и т.п.:

Чтобы включить эту возможность:

Перейдите в режим администрирования интернет-магазина.

Выберите в «Проводнике» раздел «Кабинет», после чего на открывшейся в рабочей области окна закладке перейдите на вкладку «Виджеты»:

В списке виджетов найдите настройки виджета «Регистрация».

Добавьте новое поле с идентификатором «userpic», названием – «Аватарка», типом – «Скрытое поле», флажок в поле «Заполнение обязательно» устанавливать не нужно:


Теперь, вы знаете, что делать


— или посмотреть пример магазина

Создание интернет-магазина