Интеграция с WordPress

Это руководство проведет вас через процесс интеграции Logto с WordPress, используя плагин OIDC. Но сначала давайте посмотрим на пользовательский опыт после завершения интеграции.

Процесс входа с интеграцией Logto#

1. Пользователь заходит на страницу входа на сайт WordPress, которая по умолчанию находится по адресу [SITE URL]/wp-login.php, и видит кнопку входа через OIDC.
2. Пользователь нажимает кнопку и перенаправляется на страницу входа Logto с вашим настроенным интерфейсом входа.
3. Пользователь выбирает метод входа, и Logto аутентифицирует пользователя.
4. Как только пользователь аутентифицирован, Logto перенаправляет его обратно на сайт WordPress.
5. WordPress создаст новую учетную запись пользователя или войдет в существующую учетную запись и перенаправит пользователя на предыдущую страницу.

Теперь, когда мы увидели конечный результат интеграции Logto с WordPress, давайте приступим к процессу интеграции.

Предварительные требования#

Прежде чем мы начнем, убедитесь, что у вас есть следующее:

1. Сайт на WordPress: Требуется полностью функционирующий сайт на WordPress. Обеспечьте административный доступ для управления плагинами и настройки параметров.
2. Экземпляр Logto: Создайте новый экземпляр Logto, посетив Logto Console, или разверните свой собственный экземпляр, следуя руководству по установке.

Шаги интеграции#

Шаг 1: Создание приложения Logto#

1. Перейдите на Logto Console.
2. Перейдите в "Applications" и нажмите "Create application".
3. Нажмите "Create app without framework".
4. Выберите "Traditional Web" как тип приложения.
5. Назовите своё приложение и нажмите "Create application".

Шаг 2: Установка плагина#

1. Войдите в свой сайт на WordPress.
2. Перейдите в раздел "Plugins" и нажмите "Add New".
3. Найдите "OpenID Connect Generic" и установите плагин от daggerhart.
4. Активируйте плагин.

Шаг 3: Настройка плагина#

1. Откройте настройки плагина, перейдя в "Settings" > "OpenID Connect Generic".
2. Заполните следующие поля:
   • Client ID: ID вашего приложения Logto.
   • Client Secret: Секрет вашего приложения Logto.
   • OpenID Scope: Введите email profile openid offline_access.
   • Login Endpoint URL: URL точки авторизации вашего приложения Logto, это https://[tenant-id].logto.app/oidc/auth. Вы можете нажать "show endpoint details" на странице приложения Logto, чтобы получить URL.
   • Userinfo Endpoint URL: URL точки userinfo вашего приложения Logto, это https://[tenant-id].logto.app/oidc/me.
   • Token Validation Endpoint URL: URL точки проверки токена вашего приложения Logto, это https://[tenant-id].logto.app/oidc/token.
   • End Session Endpoint URL: URL точки завершения сеанса вашего приложения Logto, это https://[tenant-id].logto.app/oidc/session/end.
   • Identity Key: Уникальный ключ в ID-токене, который содержит идентификатор пользователя. Это может быть email или sub, в зависимости от вашей конфигурации.
   • Nickname Key: Ключ в ID-токене, который содержит никнейм пользователя, можно установить на sub и изменить позже.

Шаг 4: Настройка приложения#

1. В настройках плагина прокрутите вниз до раздела "Notes" и скопируйте значение "Redirect URI".
2. В Logto Console перейдите к настройкам вашего приложения.
3. Добавьте скопированное значение "Redirect URI" в поле "Redirect URIs".

Шаг 5: Тестирование интеграции#

1. Выйдите из своего сайта на WordPress.
2. Перейдите на страницу входа WordPress и нажмите кнопку "Sign in with Logto".
3. Вы будете перенаправлены на страницу входа Logto.
4. Войдите в свою учетную запись Logto.
5. Вы будете перенаправлены обратно на сайт WordPress и автоматически войдете в систему.

Последние шаги#

Поздравляем! Вы успешно интегрировали Logto с WordPress.

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