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

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

473202441_9303_636a0d18c61d5.png

Шаг 4

Настройте соответствия полей пользователей с полями передаваемыми со стороны социальной сети.

473202441_9299_636a0477d7022.png

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

473202441_9302_636a0b7759f0d.png

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

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

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

Шаг 4.1. Яндекс ID

Яндекс ID — это единый аккаунт для входа во все сервисы Яндекса, а также на сайты и в приложения, которые поддерживают такую авторизацию. Вы можете упростить процесс регистрации и авторизации посетителей на сайте, если активируете в настройках эту опцию.

Для работы авторизации через Яндекс ID отметьте её галочкой в настройках, и сохраните изменения.

473202441_9309_636a16e8c0f3f.png

Шаг 4.2. Google

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

  1. Перейдите по ссылке (вы должны быть авторизованы в Google).

  2. Создайте проект (Create project), если еще не создан, или выберите нужный из тех, что есть.

473202441_8552_6166f76b2e6f5.png

  1. Заполните название проекта (Project name), локацию (Location) и нажмите кнопку Create.

    473202441_9305_636a0d9e7a6e8.png

  1. Перейдите к настройкам созданного проекта.

473202441_8554_6166f76b6040e.png

  1. Откройте раздел “API и сервисы” (APIs & Services), затем “Окно запроса доступа OAuth” (OAuth consent screen).

473202441_8556_6166f76b78fc2.png

  1. Выберите тип пользователя (User type) и нажмите “Create”.

    473202441_9304_636a0d79a4af3.png

  1. На вкладке "Окно запроса доступа QAuth" заполните все необходимые параметры и нажмите кнопку “Save and continue”

  2. Откройте раздел “API и сервисы” (APIs & Services), затем "Учетные данные" (Credentials).

473202441_8555_6166f76b6b3cc.png

  1. Нажмите «Создать учётные данные» (Create credentials) и выберите «Идентификатор клиента OAuth» (OAuth» client ID).

473202441_8557_6166f76b88c41.png

  1. Выберите тип приложения - "Веб-приложение" (Web application).

  2. Укажите название (Name).

  3. В поле "Разрешенные источники JavaScript" (Authorized JavaScript origins) добавьте адрес вашего сайта.

  4. В поле "Разрешенные URI перенаправления" (Authorized redirect URIs)  - http://ваш_сайт/users/hauth/done/google (если на вашем сайте подключен SSL-сертификат - https://ваш_сайт/users/hauth/done/google; если в SEO-панели у вас настроена только работа с www - www://ваш_сайт/users/hauth/done/google).

  5. Нажмите "Create".

473202441_8558_6166f76b940d3.png

473202441_8559_6166f76b9e817.png

  1. Откроется окно, в котором вам будет необходимо скопировать "Ваш идентификатор клиента" (Your client ID) и "Ваш секрет клиента"  (Your client secret).

    473202441_9306_636a0e8a49562.png

  1. Вставьте скопированные ключи в системе управления в поля "Ключ приложения Client ID" и "Секретный ключ Client SECRET" соответственно.

  2. Сохраните изменения.

Шаг 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. Вконтакте

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

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

1. Перейти по ссылке 
2. Шаг "Регистрация приложения"

Зарегистрировать приложение (указать: Название, тип — "Web")

473202441_9948_66220ccba83d6.png


3. Шаг "Данные для регистрации" 
Заполнить поля (указать: Базовый домен — адрес сайта, Доверенный Redirect URL — адрес вида https://ваш_сайт/users/hauth/done/vkontakte , где "ваш_сайт" нужно заменить на доменное имя Вашего сайта)

473202441_9950_66220ccbc9b27.png

После прохождения 3 шага возможно потребуется подтверждение аккаунта (двухфакторная аутентификация).

После прохождения вышеописанных шагов и подтверждения аккаунта произойдёт переход на страницу "Приложение".
Здесь будут доступны необходимые для связи с системой управления сайтом данные.

473202441_9949_66220ccbbb89d.png

4. Разместить скопированные со страницы "Приложение" ключи в системе управления: ID приложения в поле "Application ID" и "Защищённый ключ" в поле "Секретный ключ приложения" соответственно.

5. Сохранить изменения.

Шаг 4.5. 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.6. Одноклассники

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

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

1. Получите права разработчика (вы должны быть авторизованы).
2. Создать приложение - нажать "Добавить приложение".
3. Заполнить все необходимые поля.

  • Название, Имя в ссылке и Описание - на ваше усмотрение,
  • Указать тип приложения - Игра,
  • Права доступа - в поле “Доступ к личной информации через OAuth (VALUABLE_ACCESS)” выберете “обязательно”,
  • Нажмите кнопку “Добавить платформу”.

473202441_8661_61cd95389db54.png

4. Выберите “OAuth”.

473202441_8662_61cd9538d18e1.png

После нажатия на "Добавить платформу" появится раздел "Настройки внешнего приложения". В нём нужно заполнить следующее:

5. Заполните все необходимые поля и сохраните приложение.

  • Ссылка на страницу - ссылку на ваш сайт
  • Список разрешённых redirect_uri - "https://ваш_домен/users/hauth/done/odnoklassniki" где “ваш_домен” - домен вашего сайта,
  • Разрешить клиентскую OAuth авторизацию - поставьте галочку,
  • Аватарка и обложка - необязательные поля, можно не заполнять или заполнить на ваше усмотрение.

473202441_8663_61cd9538d8758.png

6. После сохранения, на почту привязанную к аккаунту в письме придут данные, которые необходимо указать на стороне системы управления.

473202441_8664_61cd9538e49af.png

Шаг 4.7. 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 и перейти к вкладке "Проверка приложения", где перевести настройку "Сделать приложение доступным для всех" в статус "Да".

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

Шаг 5

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

473202441_9308_636a1603a9bac.png

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

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