Настройка портала разработчика Управление API в WordPress

Статья
07/19/2024

ОБЛАСТЬ ПРИМЕНЕНИЯ: Разработчик | Базовый | Стандартный | Премия

В этой статье показано, как настроить подключаемый модуль портала разработчика с открытым исходным кодом (предварительная версия) для настройки портала разработчика Управление API в WordPress. С помощью подключаемого модуля преобразуйте любой сайт WordPress на портал разработчика. Воспользуйтесь преимуществами возможностей сайта в WordPress для настройки и добавления функций на портал разработчика, включая локализацию, свертывание и расширяемые меню, настраиваемые таблицы стилей, скачивание файлов и многое другое.

В этой статье вы создадите сайт WordPress в службе приложение Azure и настроите подключаемый модуль портала разработчика на сайте WordPress. Идентификатор Microsoft Entra настроен для проверки подлинности на сайте WordPress и портале разработчика.

Необходимые компоненты

Экземпляр управления API. При необходимости создайте экземпляр.

Примечание.

В настоящее время подключаемый модуль не поддерживается на уровнях Управление API версии 2.
Включите и опубликуйте портал разработчика. Инструкции см. в руководстве по доступу и настройке портала разработчика.
Разрешения на создание регистрации приложения в клиенте Microsoft Entra, связанном с подпиской Azure.
Файлы установки для подключаемого модуля WordPress портала разработчика и настраиваемой темы WordPress из репозитория подключаемого модуля. Скачайте следующие ZIP-файлы из папки dist в репозитории:
- apim-devportal.zip - Файл подключаемого модуля
- twentytwentyfour.zip - Файл темы

Шаг 1. Создание WordPress на Служба приложений

В этом сценарии создается управляемый сайт WordPress, размещенный в службе приложение Azure. Ниже приведены краткие действия.

В портал Azure перейдите к https://portal.azure.com/#create/WordPress.WordPress.
На странице "Создание WordPress на Служба приложений" на вкладке "Основные сведения" введите сведения о проекте.

Запишите имя пользователя и пароль администратора WordPress в безопасном месте. Эти учетные данные необходимы для входа на сайт администратора WordPress и установки подключаемого модуля на следующем шаге.
На вкладке надстроек :
1. Выберите рекомендуемые значения по умолчанию для электронной почты с Службы коммуникации Azure, Azure CDN и Хранилище BLOB-объектов Azure.
2. В виртуальной сети выберите значение "Создать " или существующую виртуальную сеть.
На вкладке "Развертывание" оставьте промежуточный слот без выбора.
Выберите "Проверка и создание ", чтобы выполнить окончательную проверку.
Выберите "Создать ", чтобы завершить развертывание службы приложений.

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

Шаг 2. Создание новой регистрации приложения Microsoft Entra

На этом шаге создайте новое приложение Microsoft Entra. В последующих шагах вы настроите это приложение в качестве поставщика удостоверений для проверки подлинности в службе приложений и на портале разработчика в Управление API экземпляре.

В портал Azure перейдите к Регистрация приложений>+ Новая регистрация.
Укажите новое имя приложения и в поддерживаемых типах учетных записей выберите учетные записи только в этом каталоге организации. Выберите Зарегистрировать.
На странице обзора скопируйте и безопасно сохраните идентификатор приложения (клиента) и идентификатор каталога (клиента). Эти значения потребуются в последующих шагах для настройки проверки подлинности в Управление API экземпляре и службе приложений.
В меню слева в разделе "Управление" выберите "Проверка подлинности> и добавление платформы".
На странице "Настройка платформ" выберите "Интернет".
На веб-странице "Настройка" введите следующий URI перенаправления, подставив имя службы приложений и нажмите кнопку "Настроить".

https://app-service-name>.azurewebsites.net/.auth/login/aad/callback
Нажмите кнопку + Добавить платформу еще раз. Выберите одностраничные приложения.
На странице "Настройка одностраничного приложения" введите следующий URI перенаправления, подставив имя экземпляра Управление API и нажмите кнопку "Настроить".

https://<apim-instance-name>.developer.azure-api.net/signin
Нажмите кнопку + Добавить платформу еще раз. Снова выберите одностраничные приложения .
На странице "Настройка одностраничного приложения" введите следующий URI перенаправления, подставив имя экземпляра Управление API и нажмите кнопку "Настроить".

https://<apim-instance-name>.developer.azure-api.net/
В меню слева в разделе "Управление" выберите "Конфигурация> маркера" и "Добавить необязательное утверждение".
На странице добавления необязательных утверждений выберите идентификатор и выберите следующие утверждения: электронная почта, family_name, given_name, onprem_sid, preferred_username, upn. Выберите Добавить.
При появлении запроса выберите "Включить электронную почту Microsoft Graph", разрешение профиля. Выберите Добавить.
В меню слева в разделе "Управление разрешениями API" и убедитесь, что существуют следующие разрешения Microsoft Graph: электронная почта, профиль, User.Read.
В меню слева в разделе "Управление" выберите "Сертификаты" и "Секреты>" и "Создать секрет клиента".
Настройте параметры секрета и нажмите кнопку "Добавить". Скопируйте и безопасно сохраните значение секрета сразу после его создания. Это значение необходимо в последующих шагах, чтобы добавить приложение в экземпляр Управление API и службу приложений для проверки подлинности.
В меню слева в разделе Управление выберите Предоставление API. Обратите внимание на URI идентификатора приложения по умолчанию. При необходимости добавьте настраиваемые области.

Шаг 3. Включение проверки подлинности в службе приложений

На этом шаге добавьте регистрацию приложения Microsoft Entra в качестве поставщика удостоверений для проверки подлинности в службе приложений WordPress.

На портале перейдите в службу приложений WordPress.
В меню слева в разделе "Параметры" выберите "Добавить поставщик удостоверений проверки подлинности>".
На вкладке "Основные сведения" в поставщике удостоверений выберите Майкрософт.
В разделе "Регистрация приложений" выберите "Указать сведения о существующей регистрации приложения".
1. Введите идентификатор приложения (клиента) и секрет клиента из регистрации приложения, созданной на предыдущем шаге.
2. В URL-адресе издателя введите одно из следующих значений для конечной точки проверки подлинности: https://login.microsoftonline.com/<tenant-id> или https://sts.windows.net/<tenantid>. Замените <tenant-id> идентификатор каталога (клиента) из регистрации приложения.
  
  Внимание
  
  Не используйте конечную точку версии 2.0 для URL-адреса издателя (URL-адрес, заканчивающийся /v2.0).
В аудитории разрешенных маркеров введите URI идентификатора приложения из регистрации приложения. Пример: api://<app-id>.
В разделе "Дополнительные проверки" выберите значения, соответствующие вашей среде, или используйте значения по умолчанию.
Настройте нужные значения для остальных параметров или используйте значения по умолчанию. Выберите Добавить.

Примечание.

Если вы хотите разрешить гостевым пользователям, а также пользователям, вошедшего в систему, доступ к порталу разработчика в WordPress можно включить без проверки подлинности. В разделе "Ограничить доступ" выберите "Разрешить доступ без проверки подлинности". Подробнее

Поставщик удостоверений добавляется в службу приложений.

Шаг 4. Включение проверки подлинности на портале разработчика Управление API

Настройте ту же регистрацию приложения Microsoft Entra, что и поставщик удостоверений для портала разработчика Управление API.

На портале, перейдите к вашему экземпляру службы "Управление API".
В меню слева на портале разработчика выберите "Удостоверения>+ Добавить".
На странице "Добавление поставщика удостоверений" выберите Azure Active Directory (идентификатор Microsoft Entra).
Введите идентификатор клиента, секрет клиента и значения клиента signin из регистрации приложения, созданной на предыдущем шаге. Клиент Signin — это идентификатор каталога (клиента) из регистрации приложения.
В клиентской библиотеке выберите MSAL.
Примите значения по умолчанию для оставшихся параметров и нажмите кнопку "Добавить".
Повторно опубликуйте портал разработчика, чтобы применить изменения.
Проверьте проверку подлинности, войдите на портал разработчика по следующему URL-адресу, подставив имя Управление API экземпляра: https://<apim-instance-name>.developer.azure-api.net/signin Нажмите кнопку Azure Active Directory (Идентификатор Microsoft Entra) внизу, чтобы войти.

При первом открытии может появиться запрос на согласие на определенные разрешения.

Шаг 5. Настройка параметров портала разработчика в Управление API

Обновите параметры портала разработчика в экземпляре Управление API, чтобы включить CORS и включить сайт службы приложений в качестве источника портала.

Перейдите к экземпляру Управления API на портале Azure.
В меню слева в разделе Портал разработчика щелкните Обзор портала.
На вкладке "Обзор портала" выберите "Включить CORS".
В меню слева на портале разработчика выберите параметры портала.
На вкладке конфигурации локального портала введите имя узла WordPress на сайте Служба приложений в качестве источника портала, подставив имя службы приложений в следующем URL-адресе:https://<yourapp-service-name>.azurewebsites.net
Повторно опубликуйте портал разработчика, чтобы применить изменения.

Кроме того, обновите cors конфигурацию политики в экземпляре Управление API, чтобы добавить сайт службы приложений в качестве разрешенного источника. Это значение необходимо, чтобы разрешить вызовы с тестовой консоли портала разработчика на сайте WordPress.

Добавьте следующее origin значение в cors конфигурацию политики:

<cors ...>
    <allowed-origins>
        [...]
        <origin>https://<yourapp-service-name>.azurewebsites.net</origin>
    </allowed-origins>
</cors>

Узнайте больше о том, как задать или изменить политики.

Шаг 6. Перейдите на сайт администратора WordPress и отправьте настраиваемую тему

На этом шаге вы отправите настраиваемую тему для портала разработчика Управление API на сайт администрирования WordPress.

Внимание

Рекомендуется отправить тему, указанную в репозитории подключаемого модуля. Тема основана на теме Двадцать Четыре и настраивается для поддержки функций портала разработчика в WordPress. Если вы решили использовать другую тему, некоторые функции могут не работать должным образом или требовать дополнительной настройки.

Откройте веб-сайт администратора WordPress по следующему URL-адресу, подставив имя службы приложений: http://<app-service-name>.azurewebsites.net/wp-admin

При первом открытии может появиться запрос на согласие на определенные разрешения.
Войдите на сайт администратора WordPress с помощью имени пользователя и пароля, введенных при создании WordPress на Служба приложений.
В меню слева выберите темы внешнего вида>и добавьте новую тему.
Выберите " Отправить тему". Выберите "Выбрать файл", чтобы отправить zip-файл темы портала разработчика Управление API, скачанный ранее. Выберите "Установить сейчас".
На следующем экране выберите "Заменить активный" отправленным.
Если появится запрос, нажмите кнопку "Активировать".

Примечание.

Если сайт WordPress включает подключаемый модуль кэширования, снимите кэш после активации темы, чтобы убедиться, что изменения вступили в силу.

Шаг 7. Установка подключаемого модуля портала разработчика

На сайте администратора WordPress в меню слева выберите "Подключаемые модули>" "Добавить новый подключаемый модуль".
Выберите " Отправить подключаемый модуль". Выберите "Выбрать файл", чтобы отправить zip-файл подключаемого модуля портала разработчика Управление API ,apim-devportal.zip скачанный ранее. Выберите "Установить сейчас".
После успешной установки выберите "Активировать подключаемый модуль".
В меню слева выберите портал разработчика Azure Управление API.
На странице параметров APIM введите следующие параметры и нажмите кнопку "Сохранить изменения".
- Имя службы APIM — имя экземпляра Управление API
- Включение создания страниц по умолчанию и меню "Создание навигации"

Шаг 8. Добавление пользовательской таблицы стилей

Добавьте настраиваемую таблицу стилей для портала разработчика Управление API.

На сайте администратора WordPress в меню слева выберите "Темы внешнего вида>".
Выберите "Настроить", а затем выберите "Стили".
Щелкните значок карандаша (изменить стили).
В области "Стили" выберите дополнительно (три точки) >Дополнительные CSS.

В поле "Дополнительные CSS" введите следующий КОД CSS:

.apim-table {
  width: 100%;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  border-spacing: 0;
}

.apim-table th {
  background: #E6E6E6;
  font-weight: bold;
  text-align: left;
}

.apim-table th,
.apim-table td {
  padding: .7em 1em;
}

.apim-table td {
  border-top: #E6E6E6 solid 1px;
}

.apim-input,
.apim-button,
.apim-nav-link-btn {
    border-radius: .33rem;
    padding: 0.6rem 1rem;
}

.apim-button,
.apim-nav-link-btn {
    background-color: var(--wp--preset--color--contrast);
    border-color: var(--wp--preset--color--contrast);
    border-width: 0;
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all .25s ease;
}

.apim-nav-link-btn:hover {
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
}

.apim-button:hover {
    background: var(--wp--preset--color--vivid-cyan-blue);
}

.apim-button:disabled {
    background: var(--wp--preset--color--contrast-2);
    cursor: not-allowed;
}

.apim-label {
    display: block;
    margin-bottom: 0.5rem;
}

.apim-input {
    border: solid 1px var(--wp--preset--color--contrast);
}

.apim-grid {
    display: grid;
    grid-template-columns: 11em max-content;
}

.apim-link,
.apim-nav-link {
    text-align: inherit;
    font-size: inherit;
    padding: 0;
    background: none;
    border: none;
    font-weight: inherit;
    cursor: pointer;
    text-decoration: none;
    color: var(--wp--preset--color--vivid-cyan-blue);
}

.apim-nav-link {
    font-weight: 500;
}

.apim-link:hover,
.apim-nav-link:hover {
    text-decoration: underline;
}

#apim-signIn {
    display: flex;
    align-items: center;
    gap: 24px;
}

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

Шаг 9. Вход на портал разработчика Управление API, развернутый в WordPress

Перейдите на сайт WordPress, чтобы просмотреть новый портал разработчика Управление API, развернутый в WordPress и размещенный на Служба приложений.

В новом окне браузера перейдите на сайт WordPress, подставив имя службы приложений в следующем URL-адресе: https://<yourapp-service-name>.azurewebsites.net
При появлении запроса войдите с помощью учетных данных идентификатора Microsoft Entra для учетной записи разработчика. Если доступ к порталу разработчика не включен, выберите "Войти " на домашней странице портала разработчика.

Примечание.

Вы можете войти только на портал разработчика в WordPress с помощью учетных данных идентификатора Microsoft Entra. Обычная проверка подлинности не поддерживается.

Теперь можно использовать следующие функции портала разработчика Управление API:

Вход на портал
См. список API
Перейдите на страницу сведений о API и просмотрите список операций
Тестирование API с помощью допустимых ключей API
См. список продуктов
Подписка на продукт и создание ключей подписки
Перейдите на вкладку "Профиль " с сведениями о учетной записи и подписке
Выход из портала

На следующем снимке экрана показана пример страницы портала разработчика Управление API, размещенного в WordPress.

Снимок экрана: портал разработчика, размещенный в WordPress.

Устранение неполадок

Я не вижу последние страницы портала разработчика на сайте WordPress

Если вы не видите последние страницы портала разработчика при посещении сайта WordPress, убедитесь, что подключаемый модуль портала разработчика установлен, активирован и настроен на сайте администрирования WordPress. Инструкции см. в статье "Установка подключаемого модуля портала разработчика".

При настройке кэша может потребоваться очистить кэш на сайте WordPress или в CDN. Кроме того, может потребоваться очистить кэш в браузере.

У меня возникли проблемы при входе или выходе из портала разработчика

Если у вас возникли проблемы при входе или выходе из портала разработчика, очистите кэш браузера или просмотрите сайт портала разработчика в отдельном сеансе браузера (с помощью инкогнито или режима частного просмотра).

Если вы используете пользовательскую тему, отличную от той, которая указана в репозитории подключаемого модуля, может потребоваться добавить функцию входа в панель навигации вручную. На домашней странице добавьте следующий блок shortcode: [SignInButton] Дополнительные сведения см. в документации по WordPress.

Вы также можете войти или выйти вручную, введя следующие URL-адреса в браузере:

Войти: https://<app-service-name>.azurewebsites.net/.auth/login/aad
Выход: https://<app-service-name>.azurewebsites.net/.auth/logout

Поделиться через

Настройка портала разработчика Управление API в WordPress

Необходимые компоненты

Шаг 1. Создание WordPress на Служба приложений

Шаг 2. Создание новой регистрации приложения Microsoft Entra

Шаг 3. Включение проверки подлинности в службе приложений

Шаг 4. Включение проверки подлинности на портале разработчика Управление API

Шаг 5. Настройка параметров портала разработчика в Управление API

Шаг 6. Перейдите на сайт администратора WordPress и отправьте настраиваемую тему

Шаг 7. Установка подключаемого модуля портала разработчика

Шаг 8. Добавление пользовательской таблицы стилей

Шаг 9. Вход на портал разработчика Управление API, развернутый в WordPress

Устранение неполадок

Я не вижу последние страницы портала разработчика на сайте WordPress

У меня возникли проблемы при входе или выходе из портала разработчика

Обратная связь

Дополнительные ресурсы

Поделиться через

Настройка портала разработчика Управление API в WordPress

Необходимые компоненты

Шаг 1. Создание WordPress на Служба приложений

Шаг 2. Создание новой регистрации приложения Microsoft Entra

Шаг 3. Включение проверки подлинности в службе приложений

Шаг 4. Включение проверки подлинности на портале разработчика Управление API

Шаг 5. Настройка параметров портала разработчика в Управление API

Шаг 6. Перейдите на сайт администратора WordPress и отправьте настраиваемую тему

Шаг 7. Установка подключаемого модуля портала разработчика

Шаг 8. Добавление пользовательской таблицы стилей

Шаг 9. Вход на портал разработчика Управление API, развернутый в WordPress

Устранение неполадок

Я не вижу последние страницы портала разработчика на сайте WordPress

У меня возникли проблемы при входе или выходе из портала разработчика

На панели навигации на портале разработчика нет кнопки входа

Связанный контент

Обратная связь

Дополнительные ресурсы