Megosztás a következőn keresztül:

Az API Management fejlesztői portál testreszabása a WordPressen

  • Cikk

A KÖVETKEZŐKRE VONATKOZIK: Fejlesztő | Alapszintű | Standard | Prémium

Ez a cikk bemutatja, hogyan konfigurálhat egy nyílt forráskódú fejlesztői portál beépülő modult (előzetes verzió) a WordPress API Management fejlesztői portáljának testreszabásához. A beépülő modul segítségével bármely WordPress-webhelyet fejlesztői portállá alakíthat. A WordPress webhelyfunkcióinak kihasználásával testre szabhatja és hozzáadhatja a fejlesztői portál funkcióit, beleértve a honosítást, az összecsukható és bővíthető menüket, az egyéni stíluslapokat, a fájlletöltéseket és egyebeket.

Ebben a cikkben egy WordPress-webhelyet hoz létre Azure-alkalmazás szolgáltatásban, és konfigurálja a fejlesztői portál beépülő modult a WordPress webhelyen. A Microsoft Entra ID a WordPress webhely és a fejlesztői portál hitelesítésére van konfigurálva.

Előfeltételek

  • EGY API Management-példány. Szükség esetén hozzon létre egy példányt.

    Feljegyzés

    A beépülő modul jelenleg nem támogatott az API Management 2-es verziós szintjeiben.

  • Engedélyezze és tegye közzé a fejlesztői portált. A lépésekért tekintse meg az oktatóanyagot: A fejlesztői portál elérése és testreszabása.
  • Az Azure-előfizetéshez társított Microsoft Entra-bérlőben történő alkalmazásregisztráció létrehozásához szükséges engedélyek.
  • Telepítési fájlok a fejlesztői portál WordPress beépülő moduljához és testreszabott WordPress-témához a beépülő modul adattárából. Töltse le a következő zip-fájlokat az adattár dist mappájából:
    • apim-devportal.zip - Beépülő modulfájl
    • twentytwentyfour.zip - Témafájl

1. lépés: WordPress létrehozása az App Service-ben

Ebben a forgatókönyvben egy felügyelt WordPress-webhelyet hoz létre Azure-alkalmazás szolgáltatásban. A következők rövid lépések:

  1. Az Azure Portalon lépjen a következőre https://portal.azure.com/#create/WordPress.WordPress: .

  2. Az App Service WordPress létrehozása lapján, az Alapok lapon adja meg a projekt részleteit.

    Rögzítse a WordPress rendszergazdai felhasználónevét és jelszavát biztonságos helyen. Ezek a hitelesítő adatok szükségesek a WordPress felügyeleti webhelyre való bejelentkezéshez és a beépülő modul egy későbbi lépésben való telepítéséhez.

  3. A Bővítmények lapon:

    1. Válassza ki az Ajánlott alapértelmezett értékeket az Azure Communication Services, az Azure CDN és az Azure Blob Storage levelezéséhez.
    2. A Virtuális hálózatban válassza az Új értéket vagy egy meglévő virtuális hálózatot.

  4. Az Üzembe helyezés lapon hagyja bejelöletlenül az Előkészítési pont hozzáadása lehetőséget.

  5. A végső ellenőrzés futtatásához válassza a Véleményezés + létrehozás lehetőséget .

  6. Válassza a Létrehozás lehetőséget az App Service üzembe helyezésének befejezéséhez.

Az app service üzembe helyezése több percet is igénybe vehet.

2. lépés: Új Microsoft Entra-alkalmazásregisztráció létrehozása

Ebben a lépésben hozzon létre egy új Microsoft Entra-alkalmazást. A későbbi lépésekben identitásszolgáltatóként konfigurálja ezt az alkalmazást az app service-hez és az API Management-példány fejlesztői portáljához való hitelesítéshez.

  1. Az Azure Portalon keresse meg a Alkalmazásregisztrációk>+ Új regisztrációt.

  2. Adja meg az új alkalmazásnevet, és a támogatott fióktípusokban csak ebben a szervezeti címtárban válassza a Fiókok lehetőséget. Válassza ki a pénztárgépet.

  3. Az Áttekintés lapon másolja és biztonságosan tárolja az alkalmazás (ügyfél) azonosítóját és a címtár (bérlő) azonosítóját. Ezekre az értékekre a későbbi lépésekben szüksége lesz az API Management-példány és az App Service hitelesítésének konfigurálásához. Képernyőkép az alkalmazásregisztráció áttekintési oldaláról a portálon.

  4. A bal oldali menü Kezelés területén válassza a Hitelesítés>+ Platform hozzáadása lehetőséget.

  5. A Platformok konfigurálása lapon válassza a Web lehetőséget.

  6. A Web konfigurálása lapon adja meg a következő átirányítási URI-t, helyettesítse az app service nevét, és válassza a Konfigurálás lehetőséget:

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

  7. Válassza újra a + Platform hozzáadása lehetőséget. Válassza az egyoldalas alkalmazást.

  8. Az egyoldalas alkalmazás konfigurálása lapon adja meg a következő átirányítási URI-t, helyettesítse az API Management-példány nevét, és válassza a Konfigurálás lehetőséget:

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

  9. A Hitelesítés lapon, az Egyoldalas alkalmazás területen válassza az URI hozzáadása lehetőséget, és írja be a következő URI-t az API Management-példány nevének helyettesítésével:

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

  10. Az Implicit engedélyezési és hibrid folyamatok területen válassza ki az azonosító jogkivonatokat, és válassza a Mentés lehetőséget.

  11. A bal oldali menü Kezelés területén válassza a Jogkivonat konfigurációja>+ Opcionális jogcím hozzáadása lehetőséget.

  12. Az Opcionális jogcím hozzáadása lapon válassza az azonosítót, majd válassza ki a következő jogcímeket: e-mail, family_name, given_name, onprem_sid, preferred_username, upn. Válassza a Hozzáadás lehetőséget.

  13. Amikor a rendszer kéri, válassza a Microsoft Graph-e-mailek és profilengedélyek bekapcsolása lehetőséget. Válassza a Hozzáadás lehetőséget.

  14. A bal oldali menüBen válassza ki az API-engedélyeket, és győződjön meg arról, hogy a következő Microsoft Graph-engedélyek vannak jelen: e-mail, profil, User.Read.

    Képernyőkép az API-engedélyekről a portálon.

  15. A bal oldali menü Kezelés területén válassza a Tanúsítványok > titkos kódok>+ Új ügyfélkód lehetőséget.

  16. Konfigurálja a titkos kód beállításait, és válassza a Hozzáadás lehetőséget. Másolja és biztonságosan tárolja a titkos kód értékét közvetlenül a létrehozása után. A későbbi lépésekben szüksége lesz erre az értékre, hogy hozzáadja az alkalmazást az API Management-példányhoz és az App Service-hez hitelesítés céljából.

  17. A bal oldali menü Kezelés területén válassza az API-k felfedése lehetőséget. Jegyezze fel az alapértelmezett alkalmazásazonosító URI-ját. Igény szerint egyéni hatóköröket is hozzáadhat.

3. lépés: Hitelesítés engedélyezése az app service-ben

Ebben a lépésben adja hozzá a Microsoft Entra alkalmazásregisztrációt identitásszolgáltatóként a Hitelesítéshez a WordPress alkalmazásszolgáltatáshoz.

  1. A portálon lépjen a WordPress app service-be.
  2. A bal oldali menü Beállítások területén válassza az Identitásszolgáltató hitelesítése>lehetőséget.
  3. Az Alapszintű beállítások lap Identitásszolgáltató területén válassza a Microsoftot.
  4. Az Alkalmazásregisztráció csoportban válassza a Meglévő alkalmazásregisztráció adatainak megadása lehetőséget.
    1. Az előző lépésben létrehozott alkalmazásregisztrációból adja meg az alkalmazás (ügyfél) azonosítóját és titkos kódját.
    2. A Kiállító URL-címében adja meg a hitelesítési végpont alábbi értékeit: https://login.microsoftonline.com/<tenant-id> vagy https://sts.windows.net/<tenantid>. Cserélje le <tenant-id> az alkalmazásregisztráció címtár-(bérlői) azonosítóját .

      Fontos

      Ne használja a 2.0-s verziójú végpontot a kiállító URL-címéhez (URL-cím vége /v2.0).

  5. Az Engedélyezett jogkivonat-célközönségekben adja meg az alkalmazásazonosító URI-ját az alkalmazásregisztrációból. Példa: api://<app-id>
  6. A További ellenőrzések csoportban válassza ki a környezetének megfelelő értékeket, vagy használja az alapértelmezett értékeket.
  7. Konfigurálja a kívánt értékeket a fennmaradó beállításokhoz, vagy használja az alapértelmezett értékeket. Válassza a Hozzáadás lehetőséget.

    Feljegyzés

    Ha engedélyezni szeretné a vendégfelhasználók és a bejelentkezett felhasználók számára a fejlesztői portál elérését a WordPressen, engedélyezheti a hitelesítés nélküli hozzáférést. A Hozzáférés korlátozása területen válassza a Hitelesítés nélküli hozzáférés engedélyezése lehetőséget. További információ

Az identitásszolgáltató hozzá lesz adva az app service-hez.

4. lépés: Hitelesítés engedélyezése az API Management fejlesztői portálon

Konfigurálja ugyanazt a Microsoft Entra-alkalmazásregisztrációt, mint az API Management fejlesztői portál identitásszolgáltatóját.

  1. A portálon keresse meg az API Management-példányt.

  2. A bal oldali menü Fejlesztői portál területén válassza az Identityes>+ Add lehetőséget.

  3. Az Identitásszolgáltató hozzáadása lapon válassza az Azure Active Directory (Microsoft Entra ID) lehetőséget.

  4. Adja meg az ügyfélazonosítót, az ügyfél titkos kódját és a Signin-bérlő értékét az előző lépésben létrehozott alkalmazásregisztrációból. A Signin-bérlő az alkalmazásregisztráció címtár-(bérlői) azonosítója .

  5. Az Ügyfélkódtárban válassza az MSAL lehetőséget.

  6. Fogadja el a fennmaradó beállítások alapértelmezett értékeit, és válassza a Hozzáadás lehetőséget.

  7. A módosítások alkalmazásához tegye közzé újra a fejlesztői portált .

  8. A hitelesítés teszteléséhez jelentkezzen be a fejlesztői portálra a következő URL-címen, és helyettesítse az API Management-példány nevét: https://<apim-instance-name>.developer.azure-api.net/signin. A bejelentkezéshez kattintson alul az Azure Active Directory (Microsoft Entra ID) gombra.

    Amikor első alkalommal nyitja meg, előfordulhat, hogy a rendszer kérni fogja, hogy hagyja jóvá a megadott engedélyeket.

5. lépés: Fejlesztői portál beállításainak konfigurálása az API Managementben

Frissítse a fejlesztői portál beállításait az API Management-példányban a CORS engedélyezéséhez és az App Service-webhely portál-forrásként való hozzáadásához.

  1. Az Azure Portalon keresse meg az API Management-példányt.
  2. A bal oldali menü Fejlesztői portál területén válassza a Portál áttekintése lehetőséget.
  3. A Portál áttekintése lapon válassza a CORS engedélyezése lehetőséget.
  4. A bal oldali menü Fejlesztői portál területén válassza a Portál beállításai lehetőséget.
  5. A saját üzemeltetésű portál konfigurációs lapján adja meg a WordPress gazdanevét az App Service-webhelyen portál forrásként, és helyettesítse az app service nevét a következő URL-címmel:https://<yourapp-service-name>.azurewebsites.net
  6. A módosítások alkalmazásához tegye közzé újra a fejlesztői portált .

Emellett frissítse az cors API Management-példány házirendkonfigurációját az App Service-webhely engedélyezett forrásként való hozzáadásához. Ez az érték szükséges ahhoz, hogy a fejlesztői portál tesztkonzoljáról érkező hívásokat engedélyezhesse a WordPress webhelyen.

Adja hozzá a következő origin értéket a cors szabályzatkonfigurációhoz:

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

További információ a szabályzatok beállításáról és szerkesztéséről.

6. lépés: Lépjen a WordPress felügyeleti webhelyére, és töltse fel a testre szabott témát

Ebben a lépésben feltölti az API Management fejlesztői portáljának testreszabott témáját a WordPress felügyeleti webhelyére.

Fontos

Javasoljuk, hogy töltse fel a beépülő modul adattárában megadott témát. A téma a Huszonnégy huszonnégy témán alapul, és testre van szabva, hogy támogassa a Fejlesztői portál funkcióit a WordPressben. Ha másik témát használ, előfordulhat, hogy egyes funkciók nem a várt módon működnek, vagy további testreszabást igényelnek.

  1. Nyissa meg a WordPress felügyeleti webhelyét az alábbi URL-címen, az app service nevének helyettesítésével: http://<app-service-name>.azurewebsites.net/wp-admin

    Amikor első alkalommal nyitja meg, előfordulhat, hogy a rendszer kérni fogja, hogy hagyja jóvá a megadott engedélyeket.

  2. Jelentkezzen be a WordPress felügyeleti webhelyére a WordPress App Service-ben való létrehozása során megadott felhasználónévvel és jelszóval.

  3. A bal oldali menüben válassza a Megjelenési>témák, majd az Új téma hozzáadása lehetőséget.

  4. Válassza a Téma feltöltése lehetőséget. Válassza a Fájl kiválasztása lehetőséget az API Management fejlesztői portál korábban letöltött zip-fájljának feltöltéséhez. Válassza a Telepítés most lehetőséget.

  5. A következő képernyőn válassza az Aktív lecserélése feltöltéssel lehetőséget.

  6. Ha a rendszer kéri, válassza az Aktiválás lehetőséget.

Feljegyzés

Ha a WordPress-webhely gyorsítótárazási beépülő modult tartalmaz, a téma aktiválása után törölje a gyorsítótárat, hogy a módosítások érvénybe lépjenek.

7. lépés: A fejlesztői portál beépülő modul telepítése

  1. A WordPress felügyeleti webhely bal oldali menüjében válassza a Beépülő modulok>új beépülő modul hozzáadása lehetőséget.
  2. Válassza a Feltöltés beépülő modult. Válassza a Fájl kiválasztása lehetőséget a korábban letöltött API Management fejlesztői portál beépülő modul zip-fájljának (apim-devportal.zip) feltöltéséhez. Válassza a Telepítés most lehetőséget.
  3. A sikeres telepítés után válassza a Beépülő modul aktiválása lehetőséget.
  4. A bal oldali menüben válassza az Azure API Management fejlesztői portált.
  5. Az APIM-beállítások lapon adja meg a következő beállításokat, és válassza a Módosítások mentése lehetőséget:
    • APIM-szolgáltatás neve – Az API Management-példány neve
    • Alapértelmezett lapok létrehozása és a Navigációs menü létrehozása

8. lépés: Egyéni stíluslap hozzáadása

Egyéni stíluslap hozzáadása az API Management fejlesztői portálhoz.

  1. A WordPress felügyeleti webhely bal oldali menüjében válassza a Megjelenési>témák lehetőséget.

  2. Válassza a Testreszabás lehetőséget, majd lépjen a Stílusok elemre.

  3. Válassza a ceruza ikont (Stílusok szerkesztése).

  4. A Stílusok panelen válassza az Egyebek (három pont) >További CSS lehetőséget.

  5. A További CSS-ben adja meg a következő CSS-t:

    .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. Mentse a módosításokat. Kattintson ismét a Mentés gombra a téma módosításainak mentéséhez.

  7. Jelentkezzen ki a WordPress felügyeleti webhelyről.

9. lépés: Bejelentkezés a WordPressen üzembe helyezett API Management fejlesztői portálra

A WordPress webhelyre belépve megtekintheti az új API Management fejlesztői portált, amelyet a WordPressen telepítettek és az App Service-ben üzemeltetett.

  1. Egy új böngészőablakban lépjen a WordPress-webhelyre, és helyettesítse az app service nevét a következő URL-címen: https://<yourapp-service-name>.azurewebsites.net.
  2. Amikor a rendszer kéri, jelentkezzen be a Microsoft Entra id hitelesítő adataival egy fejlesztői fiókhoz. Ha engedélyezve van a fejlesztői portálhoz való hitelesítés nélküli hozzáférés, válassza a Bejelentkezés lehetőséget a fejlesztői portál kezdőlapján.

Feljegyzés

A WordPress fejlesztői portáljára csak Microsoft Entra ID hitelesítő adatokkal jelentkezhet be. Az alapszintű hitelesítés nem támogatott.

Most már használhatja az API Management fejlesztői portál alábbi funkcióit:

  • Bejelentkezés a portálra
  • Az API-k listájának megtekintése
  • Navigáljon az API-részletek lapra, és tekintse meg a műveletek listáját
  • Az API tesztelése érvényes API-kulcsokkal
  • A termékek listájának megtekintése
  • Előfizetés egy termékre és előfizetési kulcsok létrehozása
  • Lépjen a Profil lapra a fiók és az előfizetés adataival
  • Kijelentkezés a portálról

Az alábbi képernyőképen a WordPressen üzemeltetett API Management fejlesztői portál mintaoldala látható.

Képernyőkép a WordPressen üzemeltetett fejlesztői portálról.

Hibaelhárítás

Nem látom a legújabb fejlesztői portál lapokat a WordPress webhelyen

Ha a WordPress webhely felkeresésekor nem látja a legújabb fejlesztői portál lapokat, ellenőrizze, hogy a fejlesztői portál beépülő modul telepítve, aktiválva és konfigurálva van-e a WordPress felügyeleti webhelyén. A lépésekért tekintse meg a fejlesztői portál beépülő moduljának telepítését.

Szükség lehet a gyorsítótár törlésére a WordPress-webhelyen vagy a CDN-ben is, ha van konfigurálva. Másik lehetőségként előfordulhat, hogy törölnie kell a gyorsítótárat a böngészőben.

Problémákat tapasztalok a fejlesztői portálra való bejelentkezéssel vagy a ki- vagy bejelentkezéssel kapcsolatban

Ha problémákat tapasztal a fejlesztői portálra való bejelentkezéskor vagy azon kívül, törölje a böngésző gyorsítótárát, vagy tekintse meg a fejlesztői portál webhelyét egy külön böngésző munkamenetben (inkognitó vagy privát böngészési mód használatával).

Nem látok bejelentkezési gombot a fejlesztői portál navigációs sávján

Ha a beépülő modul adattárában megadotttól eltérő egyéni témát használ, előfordulhat, hogy manuálisan kell hozzáadnia a bejelentkezési funkciót a navigációs sávhoz. A kezdőlapon adja hozzá a következő rövid kódblokkot: [SignInButton]. További információ a WordPress dokumentációjában.

A böngészőben a következő URL-címek megadásával is bejelentkezhet vagy manuálisan kijelentkezhet:

  • Bejelentkezés: https://<app-service-name>.azurewebsites.net/.auth/login/aad
  • Kijelentkezés: https://<app-service-name>.azurewebsites.net/.auth/logout

Kapcsolódó tartalom