Вход через социальные сети и сервисы Ферма.expert
Социальные сети¶
Авторизация через социальные сети¶
Модуль CS-Cart “Вход через соцсети” позволяет покупателям авторизоваться с помощью социальных сетей и почтовых сервисов (ВКонтакте, Яндекс, Mail.ru, Одноклассники и др.).
Модуль использует библиотеку с открытым исходным кодом — HybridAuth . HybridAuth популярна, активно развивается и имеет множество провайдеров.
Вход через соцсети¶
Описание¶
Модуль «Вход через соцсети» позволяет покупателям авторизоваться в вашем интернет-магазине с помощью:
- Яндекс
- Вконтакте
- Одноклассники
- Mail.ru
- OpenID
- и других сервисов и социальных сетей.
Покупатель может привязать сразу несколько социальных сетей к одному аккаунту.
Помимо прочих способов интеграции с различными сервисами и социальными сетями, можно встроить свой магазин на страницу Facebook.
Настройка модуля¶
Установите модуль «Вход через соцсети» в панели администратора
Откройте настройки модуля, кликнув по названию.
Выберите размер иконок социальных сетей. Доступные размеры:
Вы можете изменить или создать свои иконки, в том числе собственного размера. Иконки расположены в папке:
Просто создайте свою папку или измените существующую. Иконки будут автоматически доступны.
Некоторые социальные сети и сервисы не предоставляют email покупателя. В данной ситуации возможно два варианта:
- Покупателю будет предложено ввести адрес электронной почты, перед авторизацией.
- Покупатель будет сразу авторизован, email будет сгенерирован автоматически
Создайте необходимых провайдеров на специальной странице Веб сайт → Вход через соцсети.
Создайте нового провайдера (сервис) с помощью кнопки +.
Нажмите на название сервиса, чтобы выполнить настройку.
Для каждого провайдера (сервиса) необходимо получить API ключи. Как получить API ключи, читайте в следующем разделе.
Получить ключи API социальных провайдеров¶
Yandex¶
Авторизуйтесь на сайте www.yandex.ru
Пройдите на страницу API OAuth-авторизация: tech.yandex.ru/oauth
Зарегистрируйте новое приложение на OAuth-сервере Яндекса.
Выполните настройку нового приложения.
- Адрес электронной почты
- Дата рождения
- Имя пользователя, ФИО, пол
- Id приложения
- Пароль приложения
Будет создано приложение и вам будут доступные данные:
Пройдите в панель администратора интернет-магазина и добавьте нового провайдера «Yandex». Используйте данные созданного приложения.
Созданные вами приложения доступны на специальной странице: https://oauth.yandex.ru/client/my
Google¶
Из-за закрытия Google+ API вам понадобится как минимум CS-Cart или Multi-Vendor 4.9.2 SP4. В этих версиях реализован вход на сайт через Gmail без Google+ API.
Перейдите на страницу Учётные данные и создайте Идентификатор клиента OAuth для веб-приложения.
На этом шаге скопируйте ссылку из настроек провайдера Google на стороне CS-Cart и вставьте её как Разрешённый URI перенаправления на стороне Google.
После создания учётных данных вы увидите Идентификатор клиента и Секрет клиента. Скопируйте их в настройки провайдера Google на стороне CS-Cart и сохраните изменения. После этого покупатели смогут зарегистрироваться и войти в магазин через свои учётные записи Gmail.
ВКонтакте¶
На стороне Вконтакте произошли изменения. Поэтому авторизация через эту социальную сеть теперь доступна только в CS-Cart 4.10.2 и более новых версиях. Если вы используете старую версию, рекомендуем обновиться – в новых версиях есть другие улучшения и исправления. Если с обновлением возникли сложности, обращайтесь в службу технической поддержки CS-Cart.
Создайте новое приложение Вконтакте.
Откройте сайт vk.com и пройдите в раздел «Приложения» → «Управление» : http://vk.com/apps?act=manage
Нажмите «Создать приложение».
Будет создано приложение.
Откройте вкладку «Настройки» и получите настройки для провайдера:
- ID приложения
- Защищенный ключ
Создайте нового провайдера «Vkontakte» на странице «Social Login».
Facebook¶
Зарегистрируйтесь на портале Facebook for Developers.
Зайдите в раздел Мои приложения и добавьте новое приложение. Используйте для приложения такое же название, как у вашего магазина — покупатели увидят название приложения, когда попытаются войти в учётную запись в магазине через Facebook. Поэтому название магазина там будет смотреться естественно.
Найдите и добавьте в своё прилжение продукт Вход через Facebook. Предложение его настроить может появиться при создании приложения или на главной панели; ещё вы можете воспользоваться для этого разделом Продукты.
Откройте настройки продукта Вход через Facebook. Там нужно будет заполнить значение настройки Действительные URI перенаправления для OAuth — скопируйте это значение из настроек провайдера Facebook в панели администратора CS-Cart, а затем сохраните свои изменения на стороне Facebook.
Перейдите в основные настройки вашего приложения на Facebook. Скопируйте Идентификатор приложения и Секрет приложения и вставьте их в соответствующие поля провайдера Facebook в CS-Cart. Сохраните свои изменения на стороне CS-Cart.
На этом этапе в магазин уже можно войти через вашу учётную запись Facebook. Но приложение всё ещё в разработке, поэтому покупатели пока ещё не могут войти в учётные записи через Facebook.
Чтобы покупатели могли войти через Facebook, переведите его в рабочий режим на стороне Facebook. Для этого от вас могут потребоваться дополнительные действия (например, добавить ссылку на политику конфиденциальности).
Twitter¶
Нажмите «Create New Apps».
Выполните первоначальную настройку приложения:
ferma.expert
Последние события
u00abu041fu0440u0438 u0440u0430u0441u0447u0451u0442u0435 u0418u041au0421 u043cu044b u043du0430u043cu0435u0440u0435u043du044b u0438u0441u043fu043eu043bu044cu0437u043eu0432u0430u0442u044c u0432u0441u0435u0432u043eu0437u043cu043eu0436u043du044bu0435 u0438u043cu0435u044eu0449u0438u0435u0441u044f u0443 u043du0430u0441 u0434u0430u043du043du044bu0435 u043au0430u043a u043e u0441u0430u0439u0442u0435, u0442u0430u043a u0438 u043e u0441u0442u043eu044fu0449u0435u043c u0437u0430 u043du0438u043c u0431u0438u0437u043du0435u0441u0435. u042du0442u0438 u0434u0430u043du043du044bu0435 u043cu043eu0433u0443u0442 u0431u044bu0442u044c u043fu043eu043bu0443u0447u0435u043du044b u043au0430u043a u0438u0437 u041fu043eu0438u0441u043au0430, u0442u0430u043a u0438 u0438u0437 u043bu044eu0431u044bu0445 u0434u0440u0443u0433u0438u0445 u0441u0435u0440u0432u0438u0441u043eu0432 u042fu043du0434u0435u043au0441u0430: u043du0430u043fu0440u0438u043cu0435u0440, u041cu0435u0442u0440u0438u043au0438, u041au0430u0440u0442, u0414u0437u0435u043du0430 u0438 u0442u0430u043a u0434u0430u043bu0435u0435u00bb u2014 u042fu043du0434u0435u043au0441.u0412u0435u0431u043cu0430u0441u0442u0435u0440 n
u0420u0430u0437u043cu0435u0441u0442u0438u0442u0435 u043au043eu043cu043fu0430u043du0438u044e u043du0430 u042fu043du0434u0435u043au0441.u041au0430u0440u0442u0430u0445 n
u041fu043eu0441u043bu0435 u043cu043eu0434u0435u0440u0430u0446u0438u0438 u0437u0430u043fu043eu043bu043du0438u0442u0435 u0438u043du0444u043eu0440u043cu0430u0446u0438u044e u043e u043au043eu043cu043fu0430u043du0438u0438: u0434u043eu0431u0430u0432u044cu0442u0435 u043du0430u0437u0432u0430u043du0438u0435, u0430u0434u0440u0435u0441, u043au043eu043du0442u0430u043au0442u044b, u0444u043eu0442u043eu0433u0440u0430u0444u0438u0438, u0441u0441u044bu043bu043au0438, u043eu0440u0438u0435u043du0442u0438u0440u044b. u041fu043eu0441u043bu0435 u043eu0434u043eu0431u0440u0435u043du0438u044f u0437u0430u044fu0432u043au0438 u043fu043eu044fu0432u0438u0442u0441u044f u0432u043eu0437u043cu043eu0436u043du043eu0441u0442u044c u0443u043au0430u0437u0430u0442u044c u0434u043eu043fu043eu043bu043du0438u0442u0435u043bu044cu043du044bu0435 u0434u0430u043du043du044bu0435 u0432 u0437u0430u0432u0438u0441u0438u043cu043eu0441u0442u0438 u043eu0442 u0442u0438u043fu0430 u043au043eu043cu043fu0430u043du0438u0438 u2014 u043cu0435u043du044e, u0433u0430u043bu0435u0440u0435u044e, u043fu0440u0430u0439u0441-u043bu0438u0441u0442 u0438 u043fu0440u043eu0447u0435u0435. n
u041eu0440u0433u0430u043du0438u0437u0430u0446u0438u044f u043du0430 u042fu043du0434u0435u043au0441.u041au0430u0440u0442u0430u0445 n
u0414u043eu043fu043eu043bu043du0438u0442u0435u043bu044cu043du043e u043cu043eu0436u043du043e u043fu043eu0434u043au043bu044eu0447u0438u0442u044c u0442u043eu0432u0430u0440u044b u043cu0430u0433u0430u0437u0438u043du0430 u043a u0441u0438u0441u0442u0435u043cu0435 u042fu043du0434u0435u043au0441.u041cu0430u0440u043au0435u0442 , u0432u0435u0441u0442u0438 u0431u043bu043eu0433 u0432 u042fu043du0434u0435u043au0441.u0414u0437u0435u043du0435 . n
u0420u0430u0437u043cu0435u0441u0442u0438u0442u0435 u043au043eu043cu043fu0430u043du0438u044e u043du0430 Google u041au0430u0440u0442u0430u0445 n
u041du0435u043au043eu0442u043eu0440u044bu043c u0441u0430u0439u0442u0430u043c u042fu043du0434u0435u043au0441 u0440u0430u0437u0434u0430u0435u0442 u0437u043du0430u043au0438 u043eu0442u043bu0438u0447u0438u044f , u043eu043du0438 u043du0430u0445u043eu0434u044fu0442u0441u044f u0432 u0432u044bu0434u0430u0447u0435 u043eu043au043eu043bu043e u0441u043du0438u043fu043fu0435u0442u0430. u0421u043du0438u043fu043fu0435u0442u044b u0441u043e u0437u043du0430u043au0430u043cu0438 u043fu0440u0438u0432u043bu0435u043au0430u044eu0442 u0431u043eu043bu044cu0448u0435 u0432u043du0438u043cu0430u043du0438u044f, u0441u043eu043eu0431u0449u0430u044eu0442 u043fu043eu043bu044cu0437u043eu0432u0430u0442u0435u043bu044fu043c u0434u043eu043fu043eu043bu043du0438u0442u0435u043bu044cu043du0443u044e u0438u043du0444u043eu0440u043cu0430u0446u0438u044e u043e u0441u0430u0439u0442u0435 u0438 u0441u043bu0443u0436u0430u0442 u0433u0430u0440u0430u043du0442u043eu043c u043au0430u0447u0435u0441u0442u0432u0430 u043eu0442 u043fu043eu0438u0441u043au043eu0432u0438u043au0430. n
u0421u043du0438u043fu043fu0435u0442 u0441u043e u0437u043du0430u043au043eu043c u00abu0412u044bu0431u043eu0440 u043fu043eu043bu044cu0437u043eu0432u0430u0442u0435u043bu0435u0439u00bb n
u0417u043du0430u043au0438 u043fu043eu043bu0443u0447u0430u044eu0442 u0441u0430u0439u0442u044b, u0441u043eu043eu0442u0432u0435u0442u0441u0442u0432u0443u044eu0449u0438u0435 u0437u0430u043fu0440u043eu0441u0430u043c u043fu043eu043bu044cu0437u043eu0432u0430u0442u0435u043bu0435u0439 u0431u043eu043bu044cu0448u0435 u0432u0441u0435u0433u043e. u0414u043bu044f u0440u0430u0437u043du044bu0445 u043au0430u0442u0435u0433u043eu0440u0438u0439 u043au043eu043cu043fu0430u043du0438u0439 u0435u0441u0442u044c u0440u0430u0437u043du044bu0435 u0432u0438u0434u044b u0441u043e u0441u0432u043eu0438u043cu0438 u043au0440u0438u0442u0435u0440u0438u044fu043cu0438: u043eu0444u0438u0446u0438u0430u043bu044cu043du044bu0439 u0441u0430u0439u0442, u043eu0444u0438u0446u0438u0430u043bu044cu043du044bu0439 u0434u0438u043bu0435u0440, u0441u0435u0440u0432u0438u0441 u042fu043du0434u0435u043au0441u0430, u0432u044bu0431u043eu0440 u043fu043eu043bu044cu0437u043eu0432u0430u0442u0435u043bu0435u0439, u043fu043eu043fu0443u043bu044fu0440u043du044bu0439 u0441u0430u0439u0442 u0438 u0434u0440u0443u0433u0438u0435. u0423 u0441u0430u0439u0442u0430 u043cu043eu0436u0435u0442 u0431u044bu0442u044c u043eu0434u043du043eu0432u0440u0435u043cu0435u043du043du043e u043du0435u0441u043au043eu043bu044cu043au043e u0437u043du0430u043au043eu0432. n
u0417u043du0430u043au0438 u043eu0442u043bu0438u0447u0438u044f u0441u0430u0439u0442u0430 n
u041fu0440u043eu0432u0435u0440u044cu0442u0435 u043fu0440u043eu0446u0435u0441u0441 u043fu043eu043bu0443u0447u0435u043du0438u044f u0437u043du0430u043au043eu0432 u043eu0442u043bu0438u0447u0438u044f u0434u043bu044f u0441u0432u043eu0435u0433u043e u0441u0430u0439u0442u0430 u0438 u043eu0446u0435u043du0438u0442u0435 u043au0440u0438u0442u0435u0440u0438u0438, u043du0430u0434 u043au043eu0442u043eu0440u044bu043cu0438 u043du0443u0436u043du043e u0440u0430u0431u043eu0442u0430u0442u044c. n
u0421u0430u0439u0442, u043du0430u0440u0443u0448u0430u044eu0449u0438u0439 u043fu0440u0430u0432u0438u043bu0430 u043eu043fu0442u0438u043cu0438u0437u0430u0446u0438u0438 u0438 u043fu0440u043eu0434u0432u0438u0436u0435u043du0438u044f u0432 u043fu043eu0438u0441u043au043eu0432u044bu0445 u0441u0438u0441u0442u0435u043cu0430u0445, u043fu043eu043bu0443u0447u0438u0442 u0441u0430u043du043au0446u0438u0438 u0438u043bu0438 u043fu043eu043fu0430u0434u0435u0442 u043fu043eu0434 u0444u0438u043bu044cu0442u0440 u043fu043eu0438u0441u043au043eu0432u0438u043au043eu0432 . u042du0442u043e u043eu0437u043du0430u0447u0430u0435u0442 u043fu043eu043du0438u0436u0435u043du0438u0435 u043fu043eu0437u0438u0446u0438u0439 u0432 u043fu043eu0438u0441u043au043eu0432u043eu0439 u0432u044bu0434u0430u0447u0435, u0432u044bu043fu0430u0434u0435u043du0438u0435 u0438u0437 u0438u043du0434u0435u043au0441u0430 u0438u043bu0438 u0434u0430u0436u0435 u0431u043bu043eu043au0438u0440u043eu0432u043au0443 u0440u0435u0441u0443u0440u0441u0430. u0421u0430u043du043au0446u0438u0438 u043cu043eu0436u0435u0442 u043fu043eu043bu0443u0447u0438u0442u044c u0441u0430u0439u0442 u0446u0435u043bu0438u043au043eu043c u0438u043bu0438 u043eu0442u0434u0435u043bu044cu043du044bu0435 u0441u0442u0440u0430u043du0438u0446u044b u0437u0430 u043au043eu043du043au0440u0435u0442u043du044bu0435 u043du0430u0440u0443u0448u0435u043du0438u044f. u0415u0441u043bu0438 u0440u0435u0441u0443u0440u0441 u043fu0440u043eu0434u0432u0438u0433u0430u0435u0442u0441u044f u043du0435u0447u0435u0441u0442u043du043e, u043du043e u0435u0449u0435 u043du0435 u043fu043eu043bu0443u0447u0438u043b u0441u0430u043du043au0446u0438u0438, u044du0442u043e u043du0435 u0437u043du0430u0447u0438u0442, u0447u0442u043e u043fu043eu0438u0441u043au043eu0432u0438u043a u043du0438u043au043eu0433u0434u0430 u0434u043e u043du0435u0433u043e u043du0435 u0434u043eu0431u0435u0440u0435u0442u0441u044f. n
u0420u0435u043au043eu043cu0435u043du0434u0443u0435u043c u0438u0437u0443u0447u0438u0442u044c u0434u043eu0441u0442u0443u043fu043du0443u044e u0438u043du0444u043eu0440u043cu0430u0446u0438u044e u043eu0431 u0430u043bu0433u043eu0440u0438u0442u043cu0430u0445 u0438 u043fu0440u043eu0432u0435u0440u0438u0442u044c u0441u043eu0431u0441u0442u0432u0435u043du043du044bu0439 u0440u0435u0441u0443u0440u0441, u043a u043fu0440u0438u043cu0435u0440u0443, u043du0430 u043fu0435u0440u0435u0441u043fu0430u043c u0432 u0442u0435u043au0441u0442u0430u0445, u043du0430u0432u044fu0437u0447u0438u0432u044bu0435 u0432u0441u043fu043bu044bu0432u0430u044eu0449u0438u0435 u043eu043au043du0430 u0438u043bu0438 u043du0435u043au0430u0447u0435u0441u0442u0432u0435u043du043du044bu0435 u0441u0441u044bu043bu043au0438. n
Авторизация через социальные сети в два клика!
Привет. В статье про SMO, я говорил о том, что сайт нужно сделать максимально удобным для пользователей, также я упоминал о том, что нужно облегчить людям вход на сайт, сделав возможность авторизации через социальные сети. Как и обещал, сегодня я подготовил для Вас мануал, с помощью которого Вы без труда научитесь прикручивать эту фишку к своим сайтам.
Сегодня Вы узнаете, как сделать авторизацию на сайте через такие популярные сервисы как Вконтакте, Facebook и Tweeter. Добавлять авторизацию через эти соц. сети мы будем с помощью специальных сервисов: Loginza и его аналога uLogin. Показывать буду на примере сайта wordpress, посмотреть как это выглядит Вы можете на моем тестовом блоге.
Авторизация через социальные сети с помощью uLogin
Сервис доступен и понятен даже рядовому пользователю интернета. Поддерживает все известные системы управления контентом и многие социальные сети (в том числе одноклассники, mail и Google +). Для установки авторизации переходим на сервис, выбираем нужную платформу (в данном случае wordpress) и кликаем по “ссылка на страницу плагина”:
Нам предложат скачать плагин на компьютер, выбираем папку, куда хотим сохранить архив и скачиваем. Затем распаковываем архив в любую папку на диске и с помощью любого файлового менеджера (я, например, пользуюсь Total Commander’ом) загружаем папку на сайт в директорию wp-content/plugins.
Теперь остается активировать плагин в админке. Переходим в админку, раздел плагины, напротив “uLogin” жмем «активировать». Все! Теперь на нашем вордпресс сайте появилась возможность авторизации и комментирования через самые известные социальные сети:
Если в админке зайти в раздел “плагины”, то там можно увидеть подпункт uLogin, который отвечает за настройку формы:
На странице с настройками можно изменить отображение соц. сетей на панельке формы, меню услуг, запрашиваемые поля, дополнительные поля и текст для входа:
Я здесь ничего не трогал, но как я понял все изменения нужно вносить на английском. В принципе можно поиграться с данными параметрами, однако плагин и без того прекрасно функционирует. Если Вы захотите прикрутить авторизацию к сайтам на других платформах, то в каждом архиве есть файлик Readme, в котором пошагово расписана установка плагина для конкретных CMS.
Как видим, сложного ничего нет, и вся установка займет у Вас всего пару минут.
p.s. Если форма не добавилась автоматически, то вставьте этот код в любой участок Вашего шаблона:
<?php echo ulogin_panel(); ?>
Установка авторизации через социальные сети с помощью сервиса Loginza
Данный сервис также интегрирован с самыми популярными соц. сетями, а также имеет гибкую настройку окна авторизации. Для начала переходим на сервис и авторизуемся. Сделать это можно с помощью любой социальной сети. После входа Вы попадете на страницу своего аккаунта, где и будет проводиться настройка формы:
Переходим в раздел “мой виджет Loginza” и добавляем нужный сайт:
Для работы с сайтом необходимо подтвердить права на него. Кликаем по кнопке “Подтвердить права”, нас попросят вставить на главную страницу специальный тег:
После подтверждения прав мы можем спокойно настраивать окно по своему желанию:
На странице “Настройки” размещены Ваш персональный ID и Секретный ключ, они нужны для настройки виджета после установки его на сайт:
На странице “Оформление” можно настроить внешний вид окна с помощью файла style.css. Если Вы разбираетесь в данном файле, то можете поэкспериментировать, если не разбираетесь, то лучше оставьте все без изменений. На вкладке “Просмотр” можно увидеть результат своей работы:
Раздел “Статистика” показывает количество авторизованных пользователей с помощью данного виджета:
На вкладке “HTML код” размещен соответственно html код данной формы.
Теперь о том, как установить авторизацию на сайт wordpress. В самом низу сервиса расположен блок “плагины Loginza”:
Выбираем “Плагин WordPress” и скачиваем его к себе на компьютер. С помощью любого файлового менеджера закидываем плагин в директорию wp-content/plugins. Активируем плагин, и в админке у нас появится раздел “Loginza”, заходим в него:
Здесь мы можем выбрать соц. сети, через которые может авторизоваться пользователь, язык и цветовую схему формы. Чтобы все работало, в соответствующие поля необходимо ввести ID и секретный ключ сайта (о них я писал выше). После всех настроек жмем “Сохранить” и вуаля, все работает:
Вот таким простым способом мы вставили форму авторизации через социальные сети. Честно сказать сервис uLogin мне больше по душе, хотя бы потому, что возни с ним намного меньше.
А на этом у меня все, по вопросам как всегда в комментарии. Если уже что-то очень глобальное, то прямиком в обратную связь. Не будьте редиской и поделитесь статьей в соц. сетях.
Источники:
http://www.cs-cart.ru/docs/4.8.x/user_guide/addons/social_login/
http://a.pr-cy.ru/ferma.expert/
http://life-webmaster.ru/smm-i-smo/avtorizaciya-cherez-socialnye-seti-v-dva-klika.html
Загрузка...
