Единый вход (SSO) Auth0 | Вход в WordPress с помощью Auth0

Обзор

Плагин OAuth SSO для WordPress обеспечивает безопасный вход в WordPress с использованием Auth0 в качестве поставщика OAuth и OpenID Connect. Вы также можете настроить плагин, используя различные пользовательские поставщики и стандартные IDP. Он поддерживает расширенные функции единого входа (SSO), такие как сопоставление атрибутов профиля пользователя, сопоставление ролей и т. д. В этом руководстве мы рассмотрим настройку SSO между WordPress и Auth0. К концу этого руководства... Пользователи должны иметь возможность входить в систему Auth0 с помощью единого входа OAuth в WordPress. нажмите здесь..

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

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

Шаги настройки

Шаг 1: Настройка Auth0 в качестве поставщика OAuth.

• Перейдите на https://auth0.com/auth/login и зарегистрироваться или войти в систему.
• Перейдите на Области применения вкладка в левой панели, а затем нажмите на Области применения.

• нажмите Создать приложение создать новое приложение.

• Выбрать Обычные веб-приложения и нажмите на Создавай .

• Теперь перейдите в настройки меню.

• Прокрутите вниз до URI приложений раздел и войдите в URL обратного вызова который вы получите из плагина. Затем прокрутите вниз и нажмите «Сохранить изменения».

• Скопируйте идентификатор клиента и Секрет клиента Выберите основные данные на вкладке «Настройки» и сохраните их в конфигурации плагина miniOrange OAuth Client.

• Теперь перейдите в Пользователи вкладка в разделе управления пользователями на левой панели.

• Нажмите на Создать пользователя для создания нового пользователя.

• Введите все необходимые данные и нажмите кнопку. Создавай.




Вы успешно настроили Авторизация0 в качестве поставщика OAuth для обеспечения единого входа Auth0 на ваш сайт WordPress.

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

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

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

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

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

Примечание: После создания учетной записи Auth0 вы найдете следующее: URL домена И вам потребуется добавить то же самое в указанные ниже конечные точки.




Объем:	электронная почта профиля OpenID
Авторизовать конечную точку:	https://<Auth0-app-domain>/authorize
Конечная точка токена доступа:	https://<Auth0-app-domain>/oauth/token
Конечная точка для получения информации о пользователе:	https://<Auth0-app-domain>/userinfo



• Нажмите на Следующая.
• После проверки всех данных на странице сводки нажмите кнопку «Готово», чтобы сохранить конфигурацию и проверить подключение SSO.




Вы успешно настроили WordPress как клиент OAuth для обеспечения авторизации через Auth0 на вашем сайте WordPress.

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

• Настроить Имя приложения, идентификатор клиента, секрет клиента из приложения Auth0 SSO.

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

  Примечание: После создания учетной записи Auth0 вы найдете следующее: URL домена И вам потребуется добавить то же самое в указанные ниже конечные точки.

  
  

  Объем:	профиль OpenID
  Авторизовать конечную точку:	https://{your-auth0-domain}/authorize
  Конечная точка токена доступа:	https://{your-auth0-domain}/oauth/token

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




Вы успешно настроили WordPress как клиент OAuth для обеспечения авторизации через Auth0 на вашем сайте WordPress.

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

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

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

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

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

Шаг 4: Сопоставление ролей [Премиум]

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

• Включить сопоставление ролей: Для включения сопоставления ролей необходимо сопоставить атрибут «Имя группы». Выберите имя атрибута из списка атрибутов, который возвращает роли из вашего приложения-провайдера.
  Например: Роль


• Назначьте роль WordPress роли Provider: В зависимости от используемого вами приложения, вы можете назначить роль WordPress соответствующим ролям. Это может быть студент, преподаватель, администратор или любая другая роль, в зависимости от вашего приложения. Добавьте роли поставщиков в поле «Значение атрибута группы» и назначьте необходимую роль WordPress в поле «Роль WordPress».
  
  НапримерНа изображении ниже учителю назначена роль Администратора, а ученику — роль Подписчика.

• После сохранения сопоставления роли поставщика будет назначена функция единого входа (SSO) для WordPress.
  Пример: Согласно приведенному примеру, пользователи с ролью «учитель» будут добавлены в WordPress в качестве администраторов, а «студент» — в качестве подписчиков.

Шаг 5: Создайте пользовательские атрибуты в Auth0.

• Добавьте пользовательские атрибуты с общим значением атрибута.
• Добавьте пользовательские атрибуты с различными значениями.

• Перейдите на https://auth0.com/auth/login для входа в вашу учетную запись разработчика Auth.
• В левой панели перейдите в Действие -> Потоки -> Вход.

• Нажмите на Добавить действие -> Создать пользовательское действие.

• Введите желаемое имя, остальные настройки оставьте без изменений. Нажмите на Создавай .

• Вставьте приведенный ниже код в редактор кода. После написания кода нажмите на кнопку. Развертывание.

      
                
                Code:
                  exports.onExecutePostLogin = async (event, api) => {
                  const attr_name = "favorite_color";
                  api.idToken.setCustomClaim( attr_name , 'Purple');
                          
                  // ... additional code
                  };
                          
                Code Description:
                          
                  attr_name: This will be the attribute name which will you want to create (favorite_color in my case)
                          
                  The function api.idToken.setCustomClaim(), expects the key and its value. Here, the key is attr_name, and its value is “Purple”
                
                


• После нажатия кнопки «Развернуть» вернитесь назад. Действие -> Потоки -> Вход -> Пользовательский Перетащите созданное нами действие (Добавить пользовательские атрибуты) между кнопками «Начало» и «Завершение», как показано ниже:

• После этого нажмите на Применить .
• Наконец, выполните проверку конфигурации в плагине miniOrange OAuth Single Sign-On, чтобы увидеть пользовательские атрибуты пользователя, как показано ниже:

• Перейдите на https://auth0.com/auth/login для входа в вашу учетную запись разработчика Auth.
• В левой панели перейдите в Управление пользователями -> Пользователи.
• Выберите пользователя, которому вы хотите присвоить пользовательский атрибут.

• После выбора пользователя прокрутите вниз и перейдите в раздел «Метаданные». пользовательские_метаданныеВам потребуется добавить пользовательские атрибуты в виде пар ключ-значение, как показано ниже:

• В левой панели перейдите в Действие -> Потоки -> Вход.

• Нажмите на Добавить действие -> Создать пользовательское действие.

• Введите желаемое имя, остальные настройки оставьте без изменений. Нажмите на Создавай .

• Вставьте приведенный ниже код в редактор кода. После написания кода нажмите на кнопку. Развертывание.

              

              Code:
                exports.onExecutePostLogin = async (event, api) => {
                          
                const { favorite_color, preferred_contact } = event.user.user_metadata;
                        
                if (event.authorization) {
                // Set claims 
                api.idToken.setCustomClaim('fav_color', favorite_color);
                api.idToken.setCustomClaim('preferred_contact', preferred_contact);
                }
                };
                        
                        
              Code Description:
                We’ll add the keys (created in user_metadata) in the const as the parameters.
                        
                When using the "api.idToken.setCustomClaim() function, you will need to include two parameters. The first parameter is used to specify the desired attribute name, while in the second parameter you will add the key which you want set the attribute value.
              
              


• После нажатия кнопки «Развернуть» вернитесь назад. Действие -> Потоки -> Вход -> Пользовательский & Перетащите Действие, которое мы создали ранее (Добавить пользовательские атрибуты) между этапами «Начало» и «Завершение», показано ниже:

• После этого нажмите на Применить .
• Наконец, выполните проверку конфигурации в плагине miniOrange, чтобы увидеть пользовательские атрибуты пользователя, как показано ниже:

Шаг 6: Настройки входа

• Настройки входа в WordPress 5.7 и более ранних версий
• Настройки входа в WordPress 5.8
• Настройки входа в WordPress 5.9

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

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

• Откройте Auth0 SSO для единого входа Auth0 для WordPress (SSO) - Auth0 OAuth прямо сейчас.

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

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

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

• Структура авторизации OAuth 2.0
• Что такое OAuth 2.0?
• OAuth / OpenID Connect / JWT SSO для WordPress
• Что такое OAuth 2.0 и как он работает?
• Чем мы разные