Настройка единого входа (SSO) Facebook с использованием OAuth для WordPress

Обзор

Настройка входа через социальную сеть Facebook в WordPress (единый вход через Facebook) с использованием OAuth2 проста благодаря плагину OAuth / OpenID Connect Single Sign-On (SSO) для WordPress. Вы можете настроить плагин, используя различные другие поставщики социальных сетей / пользовательские поставщики OAuth и OIDC. Он поддерживает расширенные функции единого входа (SSO), такие как сопоставление атрибутов профиля пользователя, сопоставление ролей и т. д. В этом руководстве мы рассмотрим, как настроить SSO между WordPress и Facebook. К концу этого руководства пользователи смогут входить в WordPress через Facebook. Чтобы узнать больше о других функциях, которые мы предоставляем в плагине OAuth Single Sign-On (клиент OAuth & OpenID Connect) для WordPress, вы можете перейти по этой ссылке.

Скачать плагин Тарифный план Попробуйте!

Предварительные условия: загрузка и установка

• Войдите в свою учетную запись WordPress как администратор.
• Перейти на вордпресс Панель управления -> Плагины и нажмите на Добавить новый.
• Поиск для Плагин единого входа (SSO) OAuth для WordPress и нажмите на установить сейчас.
• После установки нажмите на активировать.

Шаги по настройке единого входа (SSO) Facebook для входа в WordPress

1. Настройте Facebook в качестве поставщика OAuth.

• Для начала перейдите в консоль разработчиков Facebook, нажмите здесь и зарегистрируйтесь/войдите в систему, используя свою учетную запись разработчика Facebook.

• Перейдите на страницу приложений для разработчиков Facebook и нажмите на Создать приложение кнопка для добавления нового приложения.

• Затем выберите Разрешите пользователям входить в систему с помощью своей учетной записи Facebook. вариант использования и нажмите Следующая.

• Введите Имя приложения и Добавить контактный адрес электронной почты для вашего приложения Facebook, затем нажмите на Создать приложение кнопку, чтобы сохранить настройки.

• Перейдите на Настройки приложения -> Основные Чтобы просмотреть свой идентификатор приложения (App ID) и секретный ключ приложения (App Secret). App ID Ваш идентификатор клиента и Секрет приложения Ваш Секрет клиентаСохраните эти значения, так как они понадобятся вам позже для настройки плагина miniOrange OAuth Single Sign-On SSO (см. изображения ниже).
• Домен приложения: Укажите там доменное имя вашего сайта.
• URL политики конфиденциальности: В этом поле укажите URL-адрес страницы с политикой конфиденциальности вашего сайта.
• Условия предоставления услуг: В этом поле укажите URL-адрес страницы с условиями использования вашего сайта.
• Удаление пользовательских данных: В выпадающем списке выберите URL-адрес страницы с инструкциями по удалению данных (Введите URL-адрес вашей страницы с инструкциями о том, как пользователи могут удалить свои учетные записи на вашем сайте).
• Выбрать Каталог Выберите из выпадающего списка в поле «Категория» следующее: Назначение приложения Выберите вариант, который лучше всего описывает ваше приложение, затем нажмите Сохранить изменения чтобы сохранить ваши настройки.

• Теперь прокрутите вниз и нажмите на Добавить платформу кнопка. Выберите Вебсайт Это вариант, если вы пытаетесь интегрировать вход через Facebook с веб-сайтом. Нажмите на него. Следующая.

• Затем введите адрес сайта (из вашей системы единого входа miniOrange OAuth) и нажмите Сохранено, Затем нажмите Продолжить.

• Нажмите на Use cases вкладка слева, а затем нажмите на Настроить кнопка, которая появляется рядом с Аутентификация и создание учетной записи пункт.

• Ниже Разрешения... раздел, найдите e-mail разрешение и нажмите на Добавить .


По умолчанию вашему приложению предоставлен только стандартный доступ к разрешениям "public_profile" и "email", что означает, что войти в систему можете только вы. Для получения расширенного доступа вам потребуется пройти проверку бизнес-статуса, которую можно начать на вкладке "Проверка" в левой части экрана.

• Под Вход через Facebook >> настройки разделом нажмите на Перейдите в настройки кнопка для добавления URL-адреса переадресации/обратного вызова.

• В Допустимые URI перенаправления OAuth добавить поле URL перенаправления/обратного вызова который вы получите из плагина miniOrange OAuth Single Sign-On (SSO). Нажмите на Сохраните изменения .

• В настоящее время ваше приложение находится в режиме разработки, а это значит, что люди за пределами вашей компании не могут им пользоваться. После завершения проверки нажмите на кнопку. Перейти в прямом эфире Перейдите на вкладку и опубликуйте свое приложение, нажав на кнопку. Перейти в прямом эфире Кнопка находится в правом нижнем углу. Перед тем как нажать ее, рекомендуется проверить, правильно ли вы все настроили, следуя инструкциям на странице «Запуск».

Вы успешно настроили Facebook в качестве социальной авторизации (поставщика OAuth) на своем сайте WordPress.

Шаг 2: Настройка WordPress в качестве клиента OAuth.

• Бесплатно
• Премиум

• Перейдите на Настроить OAuth вкладку и нажмите Добавить новое приложение Добавить новое клиентское приложение на ваш веб-сайт.

• Выберите свое приложение из списка поставщиков OAuth / OpenID Connect здесь. Facebook

• После выбора поставщика скопируйте URL обратного вызова который необходимо настроить в конфигурации приложения SSO поставщика OAuth.
• Введите учетные данные клиента, например: идентификатор клиента & Секрет клиента который вы получите через приложение Facebook SSO.
• Для настройки воспользуйтесь таблицей ниже. конечные точки для Facebook в плагине.

Имя приложения:	Facebook
Авторизовать конечную точку:	https://www.facebook.com/dialog/oauth
Конечная точка токена доступа:	https://graph.facebook.com/v2.8/oauth/access_token
Конечная точка для получения информации о пользователе:	https://graph.facebook.com/me/?fields=id,name,email,age_range,first_name,gender,last_name,link
Объем:	электронная почта public_profile

• Нажмите на Следующая.

• После проверки всех данных на странице сводки, нажмите на Завершить для сохранения конфигурации, а также для проверки подключения SSO.

Вы успешно настроили WordPress в качестве клиента OAuth для аутентификации пользователей с помощью единого входа (SSO) через Facebook на вашем сайте WordPress.

• Перейдите на Настроить OAuth Чтобы добавить новое клиентское приложение на свой веб-сайт, воспользуйтесь вкладкой и найдите название своего приложения. Facebook.

• Для настройки воспользуйтесь таблицей ниже. Область действия и конечные точки для Facebook в плагине.

Объем:	идентифицировать электронную почту
Авторизовать конечную точку:	https://www.facebook.com/dialog/oauth
Конечная точка токена доступа:	https://graph.facebook.com/v2.8/oauth/access_token
Конечная точка для получения информации о пользователе:	https://graph.facebook.com/me/?fields=id,name,email,age_range,first_name,gender,last_name,link

• Выберите Тип гранта Выберите из списка вариантов и нажмите на Сохранить настройки для сохранения конфигурации.

Вы успешно настроили WordPress в качестве клиента OAuth для аутентификации пользователей с помощью единого входа (SSO) через Facebook на вашем сайте WordPress.

Шаг 3: Сопоставление атрибутов пользователя

• Сопоставление атрибутов пользователя обязательно для обеспечения успешного входа пользователей в WordPress. Мы будем настраивать атрибуты профиля пользователя в WordPress, используя приведенные ниже параметры.

Поиск атрибутов пользователя:

• Перейдите на Настроить OAuth вкладка. Прокрутите вниз и нажмите Тестовая конфигурация.

• В таблице вы увидите все значения, возвращаемые вашим OAuth-провайдером в WordPress. Если вы не видите значения для Email, Username и т. д., внесите необходимые изменения в настройки вашего OAuth-провайдера, чтобы он возвращал эту информацию.
• После того, как вы увидите все значения в разделе «Конфигурация теста», перейдите в... Сопоставление атрибутов/ролей На вкладке вы увидите список атрибутов в выпадающих списках.

4. Настройки входа

• Настройки на вкладке «Настройки единого входа (SSO)» определяют пользовательский интерфейс единого входа (SSO). Чтобы добавить виджет входа через Facebook на страницу WordPress, необходимо выполнить следующие шаги.

• WordPress 5.7 и ниже
• WordPress 5.8
• WordPress 5.9 и выше

• Перейдите на Левая панель WordPress > Внешний вид > Виджеты.
• Выбрать miniOrange OAuthПеретащите курсор в нужное место и сохраните.

• Перейдите на Левая панель WordPress > Внешний вид > Виджеты.
• Выбрать miniOrange OAuthПеретащите курсор в нужное место и сохраните.

• Откройте свою страницу WordPress, и вы увидите там кнопку входа через единый вход Facebook (SSO). Теперь вы можете протестировать единый вход Facebook (SSO).

• Убедитесь в том, "Показать на странице входа" Эта опция включена для вашего приложения. (См. изображение ниже)

• Теперь иди к вашему Вход в WordPress стр. (Например, https://<ваш-домен-wordpress>/wp-login.php)
• Там вы увидите кнопку входа через Facebook SSO. После нажатия на эту кнопку вы сможете протестировать единый вход Facebook (SSO).

В этом руководстве вы успешно настроили единый вход (SSO) через Facebook, указав Facebook в качестве поставщика OAuth и WordPress в качестве клиента OAuth, используя наш плагин OAuth Single Sign-On (OAuth & OpenID Connect Client) для WordPress. Это решение гарантирует, что вы сможете быстро и легко обеспечить безопасный доступ к вашему сайту WordPress с использованием учетных данных Facebook.

Статьи по теме

• Что такое OAuth 2.0?
• OAut с Facebook
• Часто задаваемые вопросы (FAQ):