Dostosowywanie portalu deweloperów usługi API Management na platformie WordPress

Artykuł
07/19/2024

DOTYCZY: Developer | Podstawowa | Standardowa | Premia

W tym artykule przedstawiono sposób konfigurowania wtyczki portalu dla deweloperów typu open source (wersja zapoznawcza) w celu dostosowania portalu deweloperów usługi API Management na platformie WordPress. Za pomocą wtyczki zmień dowolną witrynę WordPress na portal dla deweloperów. Korzystaj z możliwości witryny w witrynie WordPress, aby dostosować i dodać funkcje do portalu dla deweloperów, w tym lokalizację, zwijane i rozwijane menu, niestandardowe arkusze stylów, pliki do pobrania i nie tylko.

W tym artykule utworzysz witrynę WordPress w usłudze aplikacja systemu Azure i skonfigurujesz wtyczkę portalu dla deweloperów w witrynie WordPress. Identyfikator Entra firmy Microsoft jest skonfigurowany do uwierzytelniania w witrynie WordPress i portalu dla deweloperów.

Wymagania wstępne

Wystąpienie usługi API Management. W razie potrzeby utwórz wystąpienie.

Uwaga

Obecnie wtyczka nie jest obsługiwana w warstwach usługi API Management w wersji 2.
Włącz i opublikuj portal deweloperów. Aby uzyskać instrukcje, zobacz Samouczek: dostęp i dostosowywanie portalu deweloperów.
Uprawnienia do tworzenia rejestracji aplikacji w dzierżawie usługi Microsoft Entra skojarzonej z subskrypcją platformy Azure.
Pliki instalacyjne wtyczki WordPress portalu dla deweloperów i dostosowane motywy WordPress z repozytorium wtyczek. Pobierz następujące pliki zip z folderu dist w repozytorium:
- apim-devportal.zip - Plik wtyczki
- twentytwentyfour.zip - Plik motywu

Krok 1. Tworzenie platformy WordPress w usłudze App Service

W tym scenariuszu utworzysz zarządzaną witrynę WordPress hostowaną w usłudze aplikacja systemu Azure Service. Poniżej przedstawiono krótkie kroki:

W witrynie Azure Portal przejdź do https://portal.azure.com/#create/WordPress.WordPresswitryny .
Na stronie Tworzenie platformy WordPress w usłudze App Service na karcie Podstawy wprowadź szczegóły projektu.

Zarejestruj nazwę użytkownika i hasło administratora platformy WordPress w bezpiecznym miejscu. Te poświadczenia są wymagane do zalogowania się do witryny administracyjnej WordPress i zainstalowania wtyczki w późniejszym kroku.
Na karcie Dodatki:
1. Wybierz zalecane wartości domyślne poczty e-mail z usługami Azure Communication Services, Azure CDN i Azure Blob Storage.
2. W obszarze Sieć wirtualna wybierz pozycję Nowa wartość lub istniejącą sieć wirtualną.
Na karcie Wdrożenie pozostaw pole Dodaj miejsce przejściowe niezaznaczone.
Wybierz pozycję Przejrzyj i utwórz , aby uruchomić ostateczną walidację.
Wybierz pozycję Utwórz , aby ukończyć wdrażanie usługi App Service.

Wdrożenie usługi App Service może potrwać kilka minut.

Krok 2. Tworzenie nowej rejestracji aplikacji Microsoft Entra

W tym kroku utwórz nową aplikację Microsoft Entra. W kolejnych krokach skonfigurujesz tę aplikację jako dostawcę tożsamości na potrzeby uwierzytelniania w usłudze app service i portalu dla deweloperów w wystąpieniu usługi API Management.

W witrynie Azure Portal przejdź do Rejestracje aplikacji>+ Nowa rejestracja.
Podaj nową nazwę aplikacji i w obszarze Obsługiwane typy kont wybierz pozycję Konta tylko w tym katalogu organizacyjnym. Wybierz pozycję Zarejestruj.
Na stronie Przegląd skopiuj i bezpiecznie zapisz identyfikator aplikacji (klienta) i identyfikator katalogu (dzierżawy). Te wartości są potrzebne w kolejnych krokach, aby skonfigurować uwierzytelnianie w wystąpieniu usługi API Management i usłudze App Service.
W menu po lewej stronie w obszarze Zarządzanie wybierz pozycję Uwierzytelnianie>+ Dodaj platformę.
Na stronie Konfigurowanie platform wybierz pozycję Sieć Web.
Na stronie Konfigurowanie sieci Web wprowadź następujący identyfikator URI przekierowania, podstawiając nazwę usługi aplikacji, a następnie wybierz pozycję Konfiguruj:

https://app-service-name>.azurewebsites.net/.auth/login/aad/callback
Ponownie wybierz pozycję + Dodaj platformę . Wybierz pozycję Aplikacja jednostronicowa.
Na stronie Konfigurowanie aplikacji jednostronicowej wprowadź następujący identyfikator URI przekierowania, podstawiając nazwę wystąpienia usługi API Management, a następnie wybierz pozycję Konfiguruj:

https://<apim-instance-name>.developer.azure-api.net/signin
Ponownie wybierz pozycję + Dodaj platformę . Wybierz pozycję Agaain aplikacji jednostronicowej.
Na stronie Konfigurowanie aplikacji jednostronicowej wprowadź następujący identyfikator URI przekierowania, podstawiając nazwę wystąpienia usługi API Management, a następnie wybierz pozycję Konfiguruj:

https://<apim-instance-name>.developer.azure-api.net/
W menu po lewej stronie w obszarze Zarządzanie wybierz pozycję Konfiguracja> tokenu+ Dodaj opcjonalne oświadczenie.
Na stronie Dodawanie opcjonalnego oświadczenia wybierz pozycję Identyfikator, a następnie wybierz następujące oświadczenia: adres e-mail, family_name, given_name, onprem_sid, preferred_username, upn. Wybierz Dodaj.
Po wyświetleniu monitu wybierz pozycję Włącz wiadomość e-mail programu Microsoft Graph, uprawnienie profilu. Wybierz Dodaj.
W menu po lewej stronie w obszarze Zarządzaj wybierz uprawnienia interfejsu API i upewnij się, że istnieją następujące uprawnienia programu Microsoft Graph: poczta e-mail, profil, User.Read.
W menu po lewej stronie w obszarze Zarządzaj wybierz pozycję Certyfikaty i wpisy> tajne+ Nowy klucz tajny klienta.
Skonfiguruj ustawienia wpisu tajnego i wybierz pozycję Dodaj. Skopiuj i bezpiecznie zapisz wartość wpisu tajnego natychmiast po jego wygenerowaniu. Ta wartość jest potrzebna w kolejnych krokach, aby dodać aplikację do wystąpienia usługi API Management i usługi app service na potrzeby uwierzytelniania.
W menu po lewej stronie w obszarze Zarządzanie wybierz pozycję Uwidaczniaj interfejs API. Zanotuj domyślny identyfikator URI identyfikatora aplikacji. Opcjonalnie w razie potrzeby dodaj zakresy niestandardowe.

Krok 3. Włączanie uwierzytelniania w usłudze App Service

W tym kroku dodaj rejestrację aplikacji Microsoft Entra jako dostawcę tożsamości na potrzeby uwierzytelniania w usłudze aplikacji WordPress.

W portalu przejdź do usługi aplikacji WordPress.
W menu po lewej stronie w obszarze Ustawienia wybierz pozycję Uwierzytelnianie>Dodaj dostawcę tożsamości.
Na karcie Podstawowe w obszarze Dostawca tożsamości wybierz pozycję Microsoft.
W obszarze Rejestracja aplikacji wybierz pozycję Podaj szczegóły istniejącej rejestracji aplikacji.
1. Wprowadź identyfikator aplikacji (klienta) i klucz tajny klienta z rejestracji aplikacji utworzonej w poprzednim kroku.
2. W polu Adres URL wystawcy wprowadź jedną z następujących wartości dla punktu końcowego uwierzytelniania: https://login.microsoftonline.com/<tenant-id> lub https://sts.windows.net/<tenantid>. Zastąp <tenant-id> ciąg identyfikatorem katalogu (dzierżawy) z rejestracji aplikacji.
  
  Ważne
  
  Nie używaj punktu końcowego w wersji 2.0 dla adresu URL wystawcy (adres URL kończący się na )./v2.0
W polu Dozwolone grupy odbiorców tokenów wprowadź identyfikator URI identyfikatora aplikacji z rejestracji aplikacji. Przykład: api://<app-id>.
W obszarze Dodatkowe testy wybierz wartości odpowiednie dla danego środowiska lub użyj wartości domyślnych.
Skonfiguruj żądane wartości dla pozostałych ustawień lub użyj wartości domyślnych. Wybierz Dodaj.

Uwaga

Jeśli chcesz zezwolić użytkownikom-gościom, a także zalogowanym użytkownikom na dostęp do portalu deweloperów na platformie WordPress, możesz włączyć nieuwierzytelniony dostęp. W obszarze Ogranicz dostęp wybierz pozycję Zezwalaj na nieuwierzytelniony dostęp. Dowiedz się więcej

Dostawca tożsamości jest dodawany do usługi app service.

Krok 4. Włączanie uwierzytelniania w portalu deweloperów usługi API Management

Skonfiguruj tę samą rejestrację aplikacji Microsoft Entra jako dostawcę tożsamości dla portalu deweloperów usługi API Management.

W portalu przejdź do wystąpienia usługi API Management.
W menu po lewej stronie w obszarze Portal deweloperów wybierz pozycję Tożsamości>+ Dodaj.
Na stronie Dodawanie dostawcy tożsamości wybierz pozycję Azure Active Directory (Microsoft Entra ID).
Wprowadź wartości Identyfikator klienta, Klucz tajny klienta i Signin dzierżawy z rejestracji aplikacji utworzonej w poprzednim kroku. Dzierżawa signin to identyfikator katalogu (dzierżawy) z rejestracji aplikacji.
W obszarze Biblioteka klienta wybierz pozycję MSAL.
Zaakceptuj wartości domyślne pozostałych ustawień i wybierz pozycję Dodaj.
Opublikuj ponownie portal deweloperów, aby zastosować zmiany.
Przetestuj uwierzytelnianie, logując się do portalu dla deweloperów pod następującym adresem URL, zastępując nazwę wystąpienia usługi API Management: https://<apim-instance-name>.developer.azure-api.net/signin. Wybierz przycisk Azure Active Directory (Microsoft Entra ID) u dołu, aby się zalogować.

Po pierwszym otwarciu może zostać wyświetlony monit o wyrażenie zgody na określone uprawnienia.

Krok 5. Konfigurowanie ustawień portalu dla deweloperów w usłudze API Management

Zaktualizuj ustawienia portalu dla deweloperów w wystąpieniu usługi API Management, aby włączyć mechanizm CORS i uwzględnić witrynę usługi App Service jako źródło portalu.

W witrynie Azure Portal przejdź do wystąpienia usługi API Management.
W menu po lewej stronie w obszarze Portal deweloperów wybierz pozycję Przegląd portalu.
Na karcie Przegląd portalu wybierz pozycję Włącz mechanizm CORS.
W menu po lewej stronie w obszarze Portal deweloperów wybierz pozycję Ustawienia portalu.
Na karcie Konfiguracja portalu self-hosted wprowadź nazwę hosta witryny WordPress w witrynie usługi App Service jako źródło portalu, zastępując nazwę usługi aplikacji następującym adresem URL:https://<yourapp-service-name>.azurewebsites.net
Opublikuj ponownie portal deweloperów, aby zastosować zmiany.

Ponadto zaktualizuj konfigurację cors zasad w wystąpieniu usługi API Management, aby dodać witrynę usługi App Service jako dozwolone źródło. Ta wartość jest wymagana, aby zezwolić na wywołania z konsoli testowej portalu deweloperów w witrynie WordPress.

Dodaj następującą origin wartość w cors konfiguracji zasad:

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

Dowiedz się więcej na temat ustawiania lub edytowania zasad.

Krok 6. Przejdź do witryny administracyjnej platformy WordPress i przekaż dostosowany motyw

W tym kroku przekażesz dostosowany motyw portalu deweloperów usługi API Management do witryny administracyjnej WordPress.

Ważne

Zalecamy przekazanie motywu udostępnionego w repozytorium wtyczki. Motyw jest oparty na motywie Twenty Twenty Four i jest dostosowany do obsługi funkcji portalu dla deweloperów w witrynie WordPress. Jeśli zdecydujesz się użyć innego motywu, niektóre funkcje mogą nie działać zgodnie z oczekiwaniami lub wymagać dodatkowego dostosowania.

Otwórz witrynę internetową administratora platformy WordPress pod następującym adresem URL, zastępując nazwę usługi app service: http://<app-service-name>.azurewebsites.net/wp-admin

Po pierwszym otwarciu może zostać wyświetlony monit o wyrażenie zgody na określone uprawnienia.
Zaloguj się do witryny administracyjnej platformy WordPress przy użyciu nazwy użytkownika i hasła wprowadzonego podczas tworzenia platformy WordPress w usłudze App Service.
W menu po lewej stronie wybierz pozycję Motywy wyglądu>, a następnie pozycję Dodaj nowy motyw.
Wybierz pozycję Przekaż motyw. Wybierz pozycję Wybierz plik , aby przekazać pobrany wcześniej plik zip motywu portalu dewelopera usługi API Management. Wybierz pozycję Zainstaluj teraz.
Na następnym ekranie wybierz pozycję Zamień aktywne na przekazane.
Jeśli zostanie wyświetlony monit, wybierz pozycję Aktywuj.

Uwaga

Jeśli witryna WordPress zawiera wtyczkę buforowania, wyczyść pamięć podręczną po aktywowaniu motywu, aby upewnić się, że zmiany zostaną wprowadzone.

Krok 7. Instalowanie wtyczki portalu dla deweloperów

W witrynie administracyjnej platformy WordPress w menu po lewej stronie wybierz pozycję Wtyczki>Dodaj nową wtyczkę.
Wybierz pozycję Przekaż wtyczkę. Wybierz pozycję Wybierz plik , aby przekazać pobrany wcześniej plik zip wtyczki portalu deweloperów usługi API Management (apim-devportal.zip). Wybierz pozycję Zainstaluj teraz.
Po pomyślnym zakończeniu instalacji wybierz pozycję Aktywuj wtyczkę.
W menu po lewej stronie wybierz pozycję Portal deweloperów usługi Azure API Management.
Na stronie Ustawienia usługi APIM wprowadź następujące ustawienia i wybierz pozycję Zapisz zmiany:
- Nazwa usługi APIM — nazwa wystąpienia usługi API Management
- Włącz tworzenie stron domyślnych i menu nawigacji Utwórz

Krok 8. Dodawanie niestandardowego arkusza stylów

Dodaj niestandardowy arkusz stylów dla portalu deweloperów usługi API Management.

W witrynie administracyjnej platformy WordPress w menu po lewej stronie wybierz pozycję Motywy wyglądu>.
Wybierz pozycję Dostosuj , a następnie przejdź do pozycji Style.
Wybierz ikonę ołówka (Edytuj style).
W okienku Style wybierz pozycję Więcej (trzy kropki) >Dodatkowe arkusze CSS.

W obszarze Dodatkowe arkusze CSS wprowadź następujący kod 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;
}

Zapisz zmiany. Wybierz ponownie pozycję Zapisz , aby zapisać zmiany w motywie.
Wyloguj się z witryny administracyjnej WordPress.

Krok 9. Logowanie się do portalu deweloperów usługi API Management wdrożonego na platformie WordPress

Uzyskaj dostęp do witryny WordPress, aby wyświetlić nowy portal deweloperów usługi API Management wdrożony na platformie WordPress i hostowany w usłudze App Service.

W nowym oknie przeglądarki przejdź do witryny WordPress, zastępując nazwę usługi app service następującym adresem URL: https://<yourapp-service-name>.azurewebsites.net.
Po wyświetleniu monitu zaloguj się przy użyciu poświadczeń identyfikatora Entra firmy Microsoft dla konta dewelopera. Jeśli nieuwierzytelniony dostęp do portalu deweloperów jest włączony, wybierz pozycję Zaloguj się na stronie głównej portalu deweloperów.

Uwaga

Możesz zalogować się tylko do portalu dla deweloperów w witrynie WordPress przy użyciu poświadczeń identyfikatora Entra firmy Microsoft. Uwierzytelnianie podstawowe nie jest obsługiwane.

Teraz możesz użyć następujących funkcji portalu deweloperów usługi API Management:

Zaloguj się do portalu
Zobacz listę interfejsów API
Przejdź do strony szczegółów interfejsu API i zobacz listę operacji
Testowanie interfejsu API przy użyciu prawidłowych kluczy interfejsu API
Zobacz listę produktów
Subskrybowanie produktu i generowanie kluczy subskrypcji
Przejdź do karty Profil ze szczegółami konta i subskrypcji
Wyloguj się z portalu

Poniższy zrzut ekranu przedstawia przykładową stronę portalu deweloperów usługi API Management hostowaną w witrynie WordPress.

Zrzut ekranu przedstawiający portal deweloperów hostowany w witrynie WordPress.

Rozwiązywanie problemów

Nie widzę najnowszych stron portalu dla deweloperów w witrynie WordPress

Jeśli podczas odwiedzania witryny WordPress nie widzisz najnowszych stron portalu dla deweloperów, sprawdź, czy wtyczka portalu deweloperów jest zainstalowana, aktywowana i skonfigurowana w witrynie administracyjnej WordPress. Aby uzyskać instrukcje, zobacz Instalowanie wtyczki portalu dla deweloperów.

Może być również konieczne wyczyszczenie pamięci podręcznej w witrynie WordPress lub w usłudze CDN, jeśli została skonfigurowana. Alternatywnie może być konieczne wyczyszczenie pamięci podręcznej w przeglądarce.

Mam problemy z logowaniem się lub wylogowaniem z portalu dla deweloperów

Jeśli masz problemy z logowaniem lub wylogowaniem się z portalu dla deweloperów, wyczyść pamięć podręczną przeglądarki lub wyświetl witrynę portalu deweloperów w oddzielnej sesji przeglądarki (przy użyciu trybu incognito lub przeglądania prywatnego).

Jeśli używasz motywu niestandardowego innego niż ten podany w repozytorium wtyczki, może być konieczne ręczne dodanie funkcji logowania do paska nawigacyjnego. Na stronie głównej dodaj następujący blok krótkiego kodu: [SignInButton]. Dowiedz się więcej w dokumentacji platformy WordPress.

Możesz również zalogować się lub wylogować ręcznie, wprowadzając następujące adresy URL w przeglądarce:

Rejestrowanie: https://<app-service-name>.azurewebsites.net/.auth/login/aad
Wyloguj się: https://<app-service-name>.azurewebsites.net/.auth/logout

Udostępnij za pośrednictwem

Dostosowywanie portalu deweloperów usługi API Management na platformie WordPress

Wymagania wstępne

Krok 1. Tworzenie platformy WordPress w usłudze App Service

Krok 2. Tworzenie nowej rejestracji aplikacji Microsoft Entra

Krok 3. Włączanie uwierzytelniania w usłudze App Service

Krok 4. Włączanie uwierzytelniania w portalu deweloperów usługi API Management

Krok 5. Konfigurowanie ustawień portalu dla deweloperów w usłudze API Management

Krok 6. Przejdź do witryny administracyjnej platformy WordPress i przekaż dostosowany motyw

Krok 7. Instalowanie wtyczki portalu dla deweloperów

Krok 8. Dodawanie niestandardowego arkusza stylów

Krok 9. Logowanie się do portalu deweloperów usługi API Management wdrożonego na platformie WordPress

Rozwiązywanie problemów

Nie widzę najnowszych stron portalu dla deweloperów w witrynie WordPress

Mam problemy z logowaniem się lub wylogowaniem z portalu dla deweloperów

Opinia

Dodatkowe zasoby

Udostępnij za pośrednictwem

Dostosowywanie portalu deweloperów usługi API Management na platformie WordPress

Wymagania wstępne

Krok 1. Tworzenie platformy WordPress w usłudze App Service

Krok 2. Tworzenie nowej rejestracji aplikacji Microsoft Entra

Krok 3. Włączanie uwierzytelniania w usłudze App Service

Krok 4. Włączanie uwierzytelniania w portalu deweloperów usługi API Management

Krok 5. Konfigurowanie ustawień portalu dla deweloperów w usłudze API Management

Krok 6. Przejdź do witryny administracyjnej platformy WordPress i przekaż dostosowany motyw

Krok 7. Instalowanie wtyczki portalu dla deweloperów

Krok 8. Dodawanie niestandardowego arkusza stylów

Krok 9. Logowanie się do portalu deweloperów usługi API Management wdrożonego na platformie WordPress

Rozwiązywanie problemów

Nie widzę najnowszych stron portalu dla deweloperów w witrynie WordPress

Mam problemy z logowaniem się lub wylogowaniem z portalu dla deweloperów

Nie widzę przycisku logowania na pasku nawigacyjnym portalu deweloperów

Powiązana zawartość

Opinia

Dodatkowe zasoby