Техническая поддержка 8 800 555 6342
Положение об оказании услуг технической поддержки
CMS.S3

Регистрация через соц. сети #2802

Обратите внимание!
Авторизация через соц.сети доступна для страницы Регистрации и Логин с шаблоном "Страница регистрации".

 

 

 

 

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

phpCRzgPB

Рассмотрим, как настроить авторизацию социальных сетей на сайте.

Шаг 1

Откройте систему управления сайтом и перейдите в раздел "Данные сайта" > "Пользователи"

phpyNRv6f

Шаг 2

В разделе "Пользователи" нажмите на кнопку "Настройки".

phpYd3Avk

Шаг 3

Перейдите к вкладке "Регистрация через соц. сети".

phppH67xA

Шаг 4

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

После укажите все необходимые ключи.

phpJJLCIO

Кратко опишем, как получить ключи для настройки каждой из сетей.

Обратите внимание!

  • В случае возникновения трудностей рекомендуем обращаться в техническую поддержку необходимой социальной сети.

Шаг 4.1. Facebook

(доступно только для сайтов c подключенным SSL-сертификатом, то есть для сайтов, работающих через https)

Чтобы получить ключи для настройки авторизации через Facebook, Вам необходимо:

  1. Зарегистрироваться как разработчик по ссылке (предварительно Вам необходимо быть авторизованным в Facebook).
    • Нажать "Зарегистрироваться",
    • Подтвердить правила платформы и политику конфиденциальности,
    • Указать свой номер телефона, отправить на него код подтверждения, указать его в окне регистрации,
    • Завершить регистрацию.
  2. Создать приложение, нажав "Добавьте новое приложение".
    • Указать название (например, адрес сайта),
    • Указать электронный адрес для связи,
    • Нажать "Создайте ID приложения".
  3. Перейти в "Настройки" созданного приложения - подраздел "Основное".
  4. Указать в основных настройках "Эл. адрес для связи" (если не указан) и ввести адрес сайта в поле "Домены приложений". Также при необходимости заполните прочие параметры.
  5. Далее в настройках (внизу "Основных" настроек):.
    • Нажать "Добавить платформу",
    • В открывшемся окне выбрать "Веб-сайт",
    • Указать в появившемся поле URL-адрес Вашего сайта.
  6. Затем в меню слева нажмите на "+" в блоке "Продукты".
    • Выберите пункт "Вход через Facebook" и нажмите "Настроить".
    • В меню слева в блоке "Продукты" в разделе "Вход через Facebook" перейдите к подразделу "Настройки".
    • Переведите параметр "Использовать строгий режим для URI перенаправления" в неактивное состояние (Обратите внимание! В случае если данный параметр заблокирован, и у Вас нет возможности отключить его, Вы можете в поле "Действительные URL-адреса для перенаправления OAuth" ввести не только адрес сайта, но также адрес вида https://ваш_сайт/users/hauth/done/facebook),
    • Ввести в поле "Действительные URL-адреса для перенаправления OAuth" адрес Вашего сайта.
  7. Вернуться в раздел "Настройки" - "Основное".
  8. Скопировать значения "Идентификатор приложения" и "Секрет приложения".
  9. Вставить скопированные ключи в системе управления в поля "Ключ приложения Client ID" и "Секретный ключ Client SECRET" соответственно.
  10. Вставить в поле "URL-адрес политики конфиденциальности" ссылку на страницу с информацией о политике конфиденциальности на Вашем сайте.
  11. Сохранить изменения.
  12. Вернуться в панель разработчика facebook и перейти к вкладке "Проверка приложения", где перевести настройку "Сделать приложение доступным для всех" в статус "Да".

Подробнее...

Шаг 4.2. Google+

Чтобы получить ключи для настройки авторизации через Google+, Вам необходимо:

  1. Перейти по ссылке (Вы должны быть авторизованы в Google).
  2. Создать проект (если еще не создан) или выберите нужный из тех, что есть.
  3. В списке категорий выберите пункт "Social".
  4. В открывшемся списке выберите "Google+ API".
  5. Включите в библиотеке "Google+ API".
  6. Перейдите к вкладке "Учетные данные" (при необходимости, нажмите на ссылку "здесь" в окне слева, если вкладка отсутствует).
  7. На вкладке "Окно запроса доступа QAuth" заполнить все необходимые параметры и нажать "Сохранить".
  8. Затем на вкладке "Учетные данные" раскрыть список "Создать учетные данные" и выбрать пункт "Идентификатор клиента QAuth".
  9. Выбрать тип приложения - "Веб-приложение".
  10. Указать название.
  11. В поле "Разрешенные источники JavaScript" - адрес Вашего сайта.
  12. В поле "Разрешенные URI перенаправления" - http://ваш_сайт/users/hauth/done/google (если на Вашем сайте подключен SSL-сертификат - https://ваш_сайт/users/hauth/done/google; если в SEO-панели у Вас настроена только работа с www - www://ваш_сайт/users/hauth/done/google).
  13. Нажать "Создать".
  14. Откроется окно, в котором Вам будет необходимо скопировать "Ваш идентификатор клиента" и "Ваш секрет клиента".
  15. Вставить скопированные ключи в системе управления в поля "Ключ приложения Client ID" и "Секретный ключ Client SECRET" соответственно.
  16. Сохранить изменения.

Шаг 4.3. Twitter

Чтобы получить ключи для настройки авторизации через Twitter,:

  1. Перейдите по ссылке.
  2. Если Вы еще не зарегистрированы как разработчик, Twitter предложит Вам это сделать. Нажмите "Apply for a developer account".
  3. При необходимости верифицируйте аккаунт (если Twitter запросит номер телефона для привязки к аккаунту) и после нажмите "Continue".
  4. В открывшемся окне отметьте "I am requesting access for my organization" и далее заполните анкету по шагам (Вам будет необходимо указать информацию о компании, а также изложить цель получения прав).
  5. После заполнения Twitter отправит Вам на почту письмо для подтверждения аккаунта. Пройдите по ссылке из письма.
  6. Twitter отправит Вашу заявку на рассмотрение.
  7. Как только Ваша заявка будет одобрена, снова пройдите по ссылке.
  8. Создайте новое приложение, заполнив все поля (в поле "Callback URL" укажите http://ваш_сайт/users/hauth/done/twitter).
  9. Сохраните приложение.
  10. Скопируйте Consumer key и Consumer secret (доступны на вкладке "Keys and Access Tokens").
  11. Вставьте скопированные ключи в системе управления в поля "Ключ приложения Client ID" и "Секретный ключ Client SECRET" соответственно.
  12. Сохраните изменения.

Шаг 4.4. Instagram

Чтобы получить ключи для настройки авторизации через Instagram, Вам необходимо:

  1. Зарегистрироваться как разработчик (по ссылке).
  2. После регистрации нажать "Register Your Application" и на открывшейся странице "Register a New Client".
  3. Заполнить все поля в открывшемся окне (в поле "Valid redirect URIs" укажите  http://ваш_сайт/users/hauth/done/instagram или https://ваш_сайт/users/hauth/done/instagram - в зависимости от того, какой протокол действует на Вашем сайте).
  4. Создать и сохранить новое приложение.
  5. Скопировать CLIENT ID и CLIENT SECRET.
  6. Вставить скопированные ключи в системе управления в поля "Ключ приложения Client ID" и "Секретный ключ Client SECRET" соответственно.
  7. Сохранить изменения.

Обратите внимание! По умолчанию все приложения добавляются в так называемом режиме Sandbox, то есть с ограниченными возможностями. Соответственно, авторизация по умолчанию будет работать в демо-режиме и может не позволять пользователям заходить на Ваш сайт через данную соц. сеть. Чтобы снять ограничение, Вам необходимо:

  1. Снова перейти по ссылке.
  2. Нажать "Manage" в строке с Вашим приложением.
  3. Перейти к вкладке "Permissions" (будет корректно работать, если в приложении Вы заполнили все необходимые поля - "Company Name", "Privacy Policy URL" и "Contact email").
  4. Нажать "Start a submission".
  5. Следовать инструкциям (в первом вопросе рекомендуем ответить "My app allows people to login with Instagram and share their own content.", в третьем описать на английском, для чего, как и кем будет использоваться приложение, а также предоставить ссылку на видео, демонстрирующее использование приложения на сайте).
  6. Нажать в конце "Submit" - Вас известят, если Ваш аккаунт будет подтвержден.

Подробнее о том, как получить подтверждение...

Подробнее об API...

Шаг 4.5. Вконтакте

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

  1. Перейти по ссылке и создать приложение вида "Веб-сайт".
  2. Заполнить все необходимые поля и сохранить приложение (Вам придется подтвердить аккаунт).
  3. На открывшейся странице перейти к вкладке "Настройки" и скопировать "ID приложения" и "Защищенный ключ".
    • При необходимости на этой же вкладке Вы можете указать "Доверенный redirect URI" - http://ваш_сайт/users/hauth/done/vkontakte или https://ваш_сайт/users/hauth/done/vkontakte - в зависимости от того, какой протокол на Вашем сайте (если в SEO-панели у Вас настроена только работа с www - www://ваш_сайт/users/hauth/done/vkontakte).
  4. Вставить скопированные ключи в системе управления: "ID приложения" в поле "Ключ приложения Client ID" и "Защищенный ключ" в поле "Секретный ключ Client SECRET" соответственно.
  5. Сохранить изменения.

Шаг 4.6. Mail.ru

(рекомендуем воспользоваться официальной инструкцией api.mail.ru)

Чтобы получить ключи для настройки авторизации через Mail.ru, Вам необходимо:

  1. Перейти по ссылке и, согласившись с правилами использования, создать новое приложение.
  2. Заполнить все необходимые поля и сохранить изменения.
  3. Скачать предложенный файл.
  4. Открыть скачанный файл с помощью блокнота и скопировать содержимое.
  5. Создать в системе файл верификации вида "Верификация html-файлом", указав в названии - название скачанного файла (например, receiver.html), а в содержимом - скопированный из файла текст.
  6. После этого вернуться к подключению на стороне mail и нажмите "Продолжить".
  7. Скопировать ID и Секретный ключ.
  8. Вставить скопированные ключи в системе управления в поля "Ключ приложения Client ID" и "Секретный ключ Client SECRET" соответственно.
  9. Сохранить изменения.

Шаг 4.7. Одноклассники

(доступно только для сайтов c подключенным SSL-сертификатом, то есть для сайтов, работающих через https)

Чтобы получить ключи для настройки авторизации через Одноклассники, Вам необходимо:

  1. Зарегистрироваться как разработчик (Вы должны быть авторизованы).
  2. Создать приложение - нажать "Добавить платформу".
  3. Заполнить все необходимые поля.
    • Название, Короткое имя, Описание - на Ваше усмотрение,
    • Указать тип приложения - External (все прочие галочки снять),
    • Ссылки на аватарки и иконки - обязательно укажите ссылки на изображения нужного размера,
    • В поле "Ссылка на приложение" - адрес сайта (по https),
    • В поле "Список разрешенных redirect_uri" - https://ваш_сайт/users/hauth/done/odnoklassniki (если в SEO-панели у Вас настроена только работа с www - www://ваш_сайт/users/hauth/done/odnoklassniki).
    • Галочку "Клиентская OAuth авторизация" - отметить.
    • В поле "Эл. почта для уведомлений" - указать Ваш электронный адрес.
  4. Сохранить приложение.
  5. На почту придут данные: Application ID, Публичный ключ приложения и Секретный ключ приложения. Их необходимо скопировать.
  6. Вставить скопированные ключи в системе управления в поля "Ключ приложения Client ID", "Публичный ключ Client KEY" и  "Секретный ключ Client SECRET" соответственно.
  7. Сохранить изменения.

Шаг 4.8. Яндекс

(корректная работа доступна только для сайтов c подключенным SSL-сертификатом, то есть для сайтов, работающих через https)

Чтобы получить ключи для настройки авторизации через Yandex, Вам необходимо:

  1. Перейти по ссылке.
  2. Заполнить все необходимые поля, в списке "Доступы" отметить "API Яндекс.Паспорта" и в далее "Доступ к дате рождения", "Доступ к логину, имени и фамилии, полу".
  3. В списке платформ отметить "Веб-сервисы".
  4. В поле "Callback URL" прописать https://ваш_сайт/users/hauth/done/yandex
  5. Нажать "Создать".
  6. Скопировать Id приложения и Пароль приложения.
  7. Вставить скопированные ключи в системе управления в поля "Ключ приложения Client ID" и "Секретный ключ Client SECRET" соответственно.
  8. Сохранить изменения.

Шаг 5

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

phpcAItA8

Обратите внимание!

  • В случае если Вы подключили авторизацию через какую-либо социальную сеть и уже после этого подключили или отключили SSL на своем сайте, необходимо в настройках всех подключенных социальных сетей изменить адрес (с http на https или наоборот - в зависимости от операции с SSL).
  • Чтобы отключить авторизацию через сеть - просто снимите галочку рядом с ее настройками.
  • Если пользователь авторизуется через аккаунт социальной сети, привязанный к Email'у, пользователь с которым уже существует в системе управления, его аккаунт социальной сети просто привяжется к уже существующему аккаунту на сайте.
  • Если пользователь авторизовался через одну социальную сеть (и социальная сеть передала его email на сайт), пользовался аккаунтом, и через некоторое время авторизовался уже через другую социальную сеть (на этот раз социальная сеть не передала email), после чего ввел адрес электронной почты (тот же, что передала первая социальная сеть), пользователю будет предложено объединить оба аккаунта - созданный при авторизации через одну социальную сеть и созданный при авторизации через другую - в один аккаунт.
  • Пользователь, авторизовавшийся через социальную сеть, в случае, если социальная сеть не передала данные о его Email'е, сможет в дальнейшем указать свой адрес в кабинете.