Anpassen des API Management-Entwicklerportals in WordPress

GILT FÜR: Developer | Basic | Standard | Premium

In diesem Artikel wird gezeigt, wie Sie ein Open-Source-Plug-In für das Entwicklerportal (Vorschau) konfigurieren, um das API Management-Entwicklerportal in WordPress anzupassen. Verwandeln Sie mit dem Plug-In jede WordPress-Website in ein Entwicklerportal. Nutzen Sie die Websitefunktionen in WordPress zum Anpassen von Features und zum Hinzufügen dieser Features zu Ihrem Entwicklerportal, u. a. Lokalisierung, reduzierbare und erweiterbare Menüs, benutzerdefinierte Stylesheets, Dateidownloads und vieles mehr.

In diesem Artikel erstellen Sie eine WordPress-Website in Azure App Service und konfigurieren das Entwicklerportal-Plug-In auf der WordPress-Website. Microsoft Entra ID ist für die Authentifizierung bei der WordPress-Website und beim Entwicklerportal konfiguriert.

Voraussetzungen

• Eine API Management-Instanz. Bei Bedarf können Sie eine Instanz erstellen.

  Hinweis

  Derzeit wird das Plug-In in den API Management v2-Ebenen nicht unterstützt.

• Aktivieren und Veröffentlichen des Entwicklerportals. Informationen zu den erforderlichen Schritten finden Sie unter Tutorial: Zugreifen auf das Entwicklerportal und Anpassen des Entwicklerportals.
• Berechtigungen zum Erstellen einer App-Registrierung in einem Microsoft Entra-Mandanten, der Ihrem Abonnement zugeordnet ist
• Installationsdateien für das WordPress-Plug-In des Entwicklerportals und ein angepasstes WordPress-Design aus dem Plug-In-Repository. Laden Sie die folgenden ZIP-Dateien aus dem Ordner dist im Repository herunter:
  • apim-devportal.zip: Plug-In-Datei
  • twentytwentyfour.zip: Designdatei

Schritt 1: Erstellen einer WordPress-Website in App Service

Für dieses Szenario erstellen Sie eine verwaltete WordPress-Website, die in Azure App Service gehostet wird. Im Folgenden werden die einzelnen Schritte kurz beschrieben:

1. Navigieren Sie im Azure-Portal zu https://portal.azure.com/#create/WordPress.WordPress.

2. Geben Sie auf der Seite WordPress auf App Service erstellen auf der Registerkarte Grundlagen Ihre Projektdetails ein.

   Notieren Sie den Benutzernamen und das Kennwort des WordPress-Administrators an einem sicheren Ort. Diese Anmeldeinformationen sind erforderlich, um sich später bei der WordPress-Administratorwebsite anzumelden und das Plug-In zu installieren.

3. Auf der Registerkarte Add-Ins:

   1. Wählen Sie die empfohlenen Standardwerte für E-Mail mit Azure Communication Services, Azure CDN und Azure Blob Storage aus.
   2. Wählen Sie unter Virtuelles Netzwerk entweder den Wert Neu oder ein vorhandenes virtuelles Netzwerk aus.

4. Lassen Sie auf der Registerkarte Bereitstellung die Option Stagingslot hinzufügen deaktiviert.

5. Wählen Sie zum Ausführen der endgültigen Validierung Bewerten + erstellen aus.

6. Wählen Sie Erstellen aus, um die Bereitstellung des App-Diensts abzuschließen.

Die Bereitstellung des App-Diensts kann einige Minuten in Anspruch nehmen.

Schritt 2: Erstellen einer neuen Microsoft Entra-App-Registrierung

In diesem Schritt erstellen Sie eine neue Microsoft Entra-App. In späteren Schritten konfigurieren Sie diese App als Identitätsanbieter für die Authentifizierung bei Ihrem App-Dienst und beim Entwicklerportal in Ihrer API Management-Instanz.

1. Navigieren Sie im Azure-Portal zu App-Registrierungen>+ Neue Registrierung.

2. Geben Sie den neuen App-Namen ein, und wählen Sie unter Unterstützte Kontotypen die Option Nur Konten in diesem Organisationsverzeichnis aus. Wählen Sie Registrieren aus.

3. Kopieren Sie auf der Seite Übersicht die Werte für Anwendungs-ID (Client) und Verzeichnis-ID (Mandant), und speichern Sie sie an einem sicheren Ort. Sie benötigen diese Werte später, um die Authentifizierung für Ihre API Management-Instanz und den App-Dienst zu konfigurieren.

4. Wählen Sie im linken Menü unter Verwalten die Optionen Authentifizierung>+ Plattform hinzufügen aus.

5. Wählen Sie auf der Seite Plattformen konfigurieren die Option Web aus.

6. Geben Sie auf der Seite Web konfigurieren den folgenden Umleitungs-URI ein. Fügen Sie dabei den Namen Ihres App-Diensts ein, und wählen Sie Konfigurieren aus:

   https://app-service-name>.azurewebsites.net/.auth/login/aad/callback

7. Wählen Sie noch einmal + Plattform hinzufügen aus. Wählen Sie Single-Page-Webanwendung aus.

8. Geben Sie auf der Seite Single-Page-Anwendung konfigurieren den folgenden Umleitungs-URI ein. Fügen Sie dabei den Namen Ihrer API Management-Instanz ein, und wählen Sie Konfigurieren aus:

   https://<apim-instance-name>.developer.azure-api.net/signin

9. Wählen Sie auf der Seite Authentifizierung unter Single-Page-Webanwendung die Option URI hinzufügen aus, geben Sie den folgenden URI ein, und fügen Sie den Namen Ihrer API Management-Instanz ein:

   https://<apim-instance-name>.developer.azure-api.net/

10. Wählen Sie im linken Menü unter Verwalten die Optionen Tokenkonfiguration>+ Optionalen Anspruch hinzufügen aus.

11. Wählen Sie auf der Seite Optionalen Anspruch hinzufügen die Option ID und dann die folgenden Ansprüche aus: email, family_name, given_name, onprem_sid, preferred_username, upn. Wählen Sie Hinzufügen.

12. Wählen Sie bei entsprechender Aufforderung E-Mail, Profilberechtigung von Microsoft Graph aktivieren aus. Wählen Sie Hinzufügen.

13. Wählen Sie im linken Menü unter Verwalten die Option API-Berechtigungen aus, und vergewissern Sie sich, dass die folgenden Microsoft Graph-Berechtigungen vorhanden sind: email, profile, User.Read.

    

14. Wählen Sie im linken Menü unter Verwalten die Optionen Zertifikate und Geheimnisse>+ Neuer geheimer Clientschlüssel aus.

15. Konfigurieren Sie Einstellungen für das Geheimnis, und wählen Sie Hinzufügen aus. Kopieren Sie den Wert des Geheimnisses unmittelbar nach dem Generieren, und speichern Sie ihn an einem sicheren Ort. Sie benötigen diese Werte später, um die Anwendung für die Authentifizierung zu Ihrer API Management-Instanz und zum App-Dienst hinzuzufügen.

16. Wählen Sie im Menü auf der linken Seite unter Verwalten die Option Eine API verfügbar machen aus. Notieren Sie den Standardwert für Anwendungs-ID-URI. Fügen Sie bei Bedarf optional benutzerdefinierte Bereiche hinzu.

Schritt 3: Aktivieren der Authentifizierung beim App-Dienst

Fügen Sie in diesem Schritt die Microsoft Entra-App-Registrierung als Identitätsanbieter für die Authentifizierung beim WordPress-App-Dienst hinzu.

1. Navigieren Sie im Portal zum WordPress-App-Dienst.
2. Wählen Sie im linken Menü unter Einstellungen die Optionen Authentifizierung>Identitätsanbieter hinzufügen aus.
3. Wählen Sie auf der Registerkarte Grundlagen unter Identitätsanbieter die Option Microsoft aus.
4. Wählen Sie unter App-Registrierung die Option Details einer vorhandenen App-Registrierung angeben aus.
   1. Geben Sie die Werte für Anwendungs-ID (Client) und Geheimer Clientschlüssel aus der App-Registrierung ein, die Sie im vorherigen Schritt erstellt haben.
   2. Geben Sie unter Aussteller-URL einen der folgenden Werte für den Authentifizierungsendpunkt ein: https://login.microsoftonline.com/<tenant-id> oder https://sts.windows.net/<tenantid>. Ersetzen Sie <tenant-id> durch den Wert für Verzeichnis-ID (Mandant) aus der App-Registrierung.

      Wichtig

      Verwenden Sie den Endpunkt der Version 2.0 nicht für die Aussteller-URL (URL, die auf /v2.0 endet).

5. Geben Sie unter Zugelassene Tokenzielgruppen den Wert für Anwendungs-ID-URI aus der App-Registrierung ein. Beispiel: api://<app-id>.
6. Wählen Sie unter Zusätzliche Überprüfungen Werte aus, die für Ihre Umgebung geeignet sind, oder verwenden Sie die Standardwerte.
7. Konfigurieren Sie die gewünschten Werte für die verbleibenden Einstellungen, oder verwenden Sie die Standardwerte. Wählen Sie Hinzufügen.

   Hinweis

   Wenn Sie Gastbenutzern sowie angemeldeten Benutzern den Zugriff auf das Entwicklerportal in WordPress gestatten möchten, können Sie den nicht authentifizierten Zugriff aktivieren. Wählen Sie unter Zugriffsbeschränkung die Option Nicht authentifizierten Zugriff zulassen aus. Weitere Informationen

Der Identitätsanbieter wird dem App-Dienst hinzugefügt.

Schritt 4: Aktivieren der Authentifizierung beim API Management-Entwicklerportal

Konfigurieren Sie dieselbe Microsoft Entra-App-Registrierung als Identitätsanbieter für das API Management-Entwicklerportal.

1. Navigieren Sie im Portal zu Ihrer API Management-Instanz.

2. Wählen Sie im Menü auf der linken Seite unter Entwicklerportal die Optionen Identitäten>+ Hinzufügen aus.

3. Wählen Sie auf der Seite Identitätsanbieter hinzufügen die Option Azure Active Directory (Microsoft Entra ID) aus.

4. Geben Sie die Werte für Client-ID, Geheimer Clientschlüssel und Anmeldemandant aus der App-Registrierung ein, die Sie im vorherigen Schritt erstellt haben. Der Anmeldemandant ist die Verzeichnis-ID (Mandant) aus der App-Registrierung

5. Wählen Sie unter Clientbibliothek die Option MSAL aus.

6. Übernehmen Sie für die übrigen Einstellungen die Standardwerte, und wählen Sie Hinzufügen aus.

7. Veröffentlichen Sie das Entwicklerportal erneut, um die Änderungen anzuwenden.

8. Testen Sie die Authentifizierung, indem Sie sich unter der folgenden URL beim Entwicklerportal anmelden. Ersetzen Sie dabei den entsprechenden Wert durch den Namen Ihrer API Management-Instanz: https://<apim-instance-name>.developer.azure-api.net/signin. Wählen Sie unten die Schaltfläche Azure Active Directory (Microsoft Entra ID) aus, um sich anzumelden.

   Beim ersten Öffnen werden Sie möglicherweise aufgefordert, bestimmten Berechtigungen zuzustimmen.

Schritt 5: Konfigurieren von Entwicklerportaleinstellungen in API Management

Aktualisieren Sie die Einstellungen des Entwicklerportals in der API Management-Instanz, um CORS zu aktivieren und die App-Dienstwebsite als Portalursprung aufzunehmen.

1. Navigieren Sie im Azure-Portal zu Ihrer API Management-Instanz.
2. Wählen Sie im Menü auf der linken Seite unter Entwicklerportal die Option Portalübersicht aus.
3. Wählen Sie auf der Registerkarte Portalübersicht die Option CORS aktivieren aus.
4. Wählen Sie im Menü auf der linken Seite unter Entwicklerportal die Option Portaleinstellungen aus.
5. Geben Sie auf der Registerkarte Konfiguration des selbstgehosteten Portals den Hostnamen Ihrer Website für WordPress in App Service als Portalursprung ein. Ersetzen Sie dabei in der folgenden URL den entsprechenden Wert durch den Namen Ihres App-Diensts: https://<yourapp-service-name>.azurewebsites.net
6. Veröffentlichen Sie das Entwicklerportal erneut, um die Änderungen anzuwenden.

Aktualisieren Sie außerdem die cors-Richtlinienkonfiguration in der API Management-Instanz, um die App-Dienstwebsite als zulässigen Ursprung hinzuzufügen. Dieser Wert ist erforderlich, um Aufrufe über die Testkonsole des Entwicklerportals auf der WordPress-Website zuzulassen.

Fügen Sie den folgenden origin-Wert in Ihrer cors-Richtlinienkonfiguration hinzu:

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

Erfahren Sie mehr darüber, wie Sie Richtlinien festlegen oder bearbeiten.

Schritt 6: Navigieren Sie zur WordPress-Administratorwebsite und Hochladen des angepassten Designs

In diesem Schritt laden Sie das angepasste Design für das API Management-Entwicklerportal auf die WordPress-Administratorwebsite hoch.

1. Öffnen Sie die WordPress-Administratorwebsite unter der folgenden URL, und ersetzen Sie den entsprechenden Wert durch den Namen Ihres App-Diensts: http://<app-service-name>.azurewebsites.net/wp-admin.

   Beim ersten Öffnen werden Sie möglicherweise aufgefordert, bestimmten Berechtigungen zuzustimmen.

2. Melden Sie sich bei der WordPress-Administratorwebsite mit dem Benutzernamen und Kennwort an, die Sie beim Erstellen der WordPress-Website in App Service eingegeben haben.

3. Wählen Sie im linken Menü Darstellung>Designs und dann Neues Design hinzufügen aus.

4. Wählen Sie die Option Design hochladen aus. Wählen Sie Datei auswählen aus, um die ZIP-Datei mit dem Design für das API Management-Entwicklerportal hochzuladen, die Sie zuvor heruntergeladen haben. Wählen Sie Jetzt installieren aus.

5. Wählen Sie auf dem nächsten Bildschirm Aktives Design durch hochgeladenes ersetzen aus.

6. Wenn Sie dazu aufgefordert werden, wählen Sie Aktivieren aus.

Schritt 7: Installieren des Entwicklerportal-Plug-Ins

1. Wählen Sie auf der WordPress-Administratorwebsite im linken Menü Plug-Ins>Neues Plug-In hinzufügen aus.
2. Wählen Sie Plug-In hochladen aus. Wählen Sie Datei auswählen aus, um die ZIP-Datei mit dem Plug-In für das API Management-Entwicklerportal (apim-devportal.zip) hochzuladen, die Sie zuvor heruntergeladen haben. Wählen Sie Jetzt installieren aus.
3. Wählen Sie nach erfolgreicher Installation Plugin aktivieren aus.
4. Wählen Sie im linken Menü Azure API Management-Entwicklerportal aus.
5. Geben Sie auf der Seite APIM-Einstellungen die folgenden Einstellungen ein, und wählen Sie Änderungen speichern aus:
   • APIM-Dienstname: Name der API Management-Instanz
   • Aktivieren Sie Standardseiten erstellen und Navigationsmenü erstellen.

Schritt 8: Hinzufügen eines benutzerdefinierten Stylesheets

Fügen Sie ein benutzerdefiniertes Stylesheet für das API Management-Entwicklerportal hinzu.

1. Wählen Sie auf der WordPress-Administratorwebsite im linken Menü Darstellung>Designs aus.

2. Wählen Sie Anpassen aus, und navigieren Sie dann zu Formatvorlagen.

3. Wählen Sie das Stiftsymbol aus (Stile bearbeiten).

4. Wählen Sie im Bereich Formatvorlagen die Option Weitere (drei Punkte) >Zusätzliche CSS aus.

5. Geben Sie unter Zusätzliche CSS das folgendes CSS ein:

   .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;
   }
   

6. Speichern Sie die Änderungen. Wählen Sie zum Speichern der Änderungen am Design erneut Speichern aus.

7. Sie können sich nun von der WordPress-Administratorwebsite abmelden.

Schritt 9: Anmelden beim API Management-Entwicklerportal, das in WordPress bereitgestellt wurde

Greifen Sie auf die WordPress-Website zu, um Ihr neues API Management-Entwicklerportal anzuzeigen, das in WordPress bereitgestellt wurde und in App Service gehostet wird.

1. Navigieren Sie in einem neuen Browserfenster zu Ihrer WordPress-Website, und ersetzen Sie in der folgenden URL den entsprechenden Wert durch den Namen Ihres App-Diensts: https://<yourapp-service-name>.azurewebsites.net.
2. Melden Sie sich bei entsprechender Aufforderung mit den Microsoft Entra ID-Anmeldeinformationen für ein Entwicklerkonto an. Wenn der nicht authentifizierte Zugriff auf das Entwicklerportal aktiviert ist, wählen Sie auf der Startseite des Entwicklerportals Anmelden aus.

Sie können jetzt die folgenden Features des API Management-Entwicklerportals nutzen:

• Anmelden beim Portal
• Anzeigen der API-Liste
• Navigieren zur Seite mit API-Details und Anzeigen der Liste mit Vorgängen
• Testen der API mithilfe von gültigen API-Schlüsseln
• Anzeigen einer Produktliste
• Abonnieren eines Produkts und Generieren von Abonnementschlüsseln
• Navigieren zur Registerkarte Profil mit Konto- und Abonnementdetails
• Abmelden vom Portal

Der folgende Screenshot zeigt eine Beispielseite des API Management-Entwicklerportals, das in WordPress gehostet wird:

Problembehandlung

Mir werden die neuesten Entwicklerportalseiten auf der WordPress-Website nicht angezeigt.

Wenn beim Aufrufen der WordPress-Website die neuesten Entwicklerportalseiten nicht angezeigt werden, überprüfen Sie auf der WordPress-Administratorwebsite, ob das Entwicklerportal-Plug-In installiert, aktiviert und konfiguriert ist. Die entsprechenden Schritte finden Sie unter Installieren des Entwicklerportal-Plug-Ins.

Möglicherweise müssen Sie auch den Cache auf Ihrer WordPress-Website oder im CDN leeren, wenn eins konfiguriert ist. Alternativ müssen Sie möglicherweise den Cache in Ihrem Browser leeren.

Ich habe Probleme beim Anmelden beim oder Abmelden vom Entwicklerportal

Wenn Sie Probleme beim Anmelden beim oder Abmelden vom Entwicklerportal haben, leeren Sie den Browsercache, oder zeigen Sie die Entwicklerportalwebsite in einer separaten Browsersitzung an (mithilfe des Inkognito-Browsermodus oder des Modus für privates Browsen).

Auf der Navigationsleiste des Entwicklerportals wird keine Anmeldeschaltfläche angezeigt.

Wenn Sie ein benutzerdefiniertes Design verwenden, das sich von dem Design im Plug-In-Repository unterscheidet, müssen Sie die Anmeldefunktionalität möglicherweise manuell zur Navigationsleiste hinzufügen. Fügen Sie auf der Startseite den folgenden kurzen Codeblock hinzu: [SignInButton]. Weitere Informationen finden Sie in der WordPress-Dokumentation.

Sie können sich auch manuell an- oder abmelden, indem Sie die folgenden URLs in Ihrem Browser eingeben:

• Anmelden: https://<app-service-name>.azurewebsites.net/.auth/login/aad
• Abmelden: https://<app-service-name>.azurewebsites.net/.auth/logout

Zugehöriger Inhalt

• Erstellen einer WordPress-Website in Azure App Service
• Anpassen des Entwicklerportals
• Autorisieren von Entwicklerkonten mithilfe von Microsoft Entra ID in Azure API Management