Přizpůsobení vývojářského portálu služby API Management ve WordPressu

Článek
07/19/2024

PLATÍ PRO: Vývojář | Základní | Standardní | Prémie

Tento článek ukazuje, jak nakonfigurovat opensourcový modul plug-in vývojářského portálu (Preview) pro přizpůsobení portálu pro vývojáře SLUŽBY API Management ve WordPressu. S modulem plug-in přepněte libovolný web WordPress na portál pro vývojáře. Využijte možnosti webu ve WordPressu k přizpůsobení a přidání funkcí na portál pro vývojáře, včetně lokalizace, sbalitelné a rozbalitelné nabídky, vlastních šablon stylů, stahování souborů a dalších možností.

V tomto článku vytvoříte web WordPress na Aplikace Azure Service a nakonfigurujete modul plug-in portálu pro vývojáře na webu WordPress. ID Microsoft Entra je nakonfigurováno pro ověřování na webu WordPress a na portálu pro vývojáře.

Požadavky

Instance služby API Management. V případě potřeby vytvořte instanci.

Poznámka:

V současné době se modul plug-in nepodporuje ve vrstvách API Management verze 2.
Povolte a publikujte portál pro vývojáře. Postup najdete v tématu Kurz: Přístup k portálu pro vývojáře a jeho přizpůsobení.
Oprávnění k vytvoření registrace aplikace v tenantovi Microsoft Entra přidruženém k vašemu předplatnému Azure
Instalační soubory pro vývojářský portál WordPress plugin a přizpůsobené téma WordPress z úložiště plug-in. Stáhněte si následující soubory ZIP ze složky dist v úložišti:
- apim-devportal.zip - Soubor modulu plug-in
- twentytwentyfour.zip - Soubor motivu

Krok 1: Vytvoření WordPressu ve službě App Service

Pro tento scénář vytvoříte spravovaný web WordPress hostovaný ve službě Aplikace Azure Service. Toto jsou stručné kroky:

Na webu Azure Portal přejděte na https://portal.azure.com/#create/WordPress.WordPress.
Na stránce Vytvořit WordPress na app Service na kartě Základy zadejte podrobnosti o projektu.

Poznamenejte si uživatelské jméno a heslo správce WordPressu na bezpečném místě. Tyto přihlašovací údaje se vyžadují pro přihlášení k webu pro správu WordPress a instalaci modulu plug-in v pozdějším kroku.
Na kartě Doplňky:
1. Vyberte doporučené výchozí hodnoty pro e-mail s Azure Communication Services, Azure CDN a Azure Blob Storage.
2. Ve virtuální síti vyberte buď novou hodnotu, nebo existující virtuální síť.
Na kartě Nasazení ponechte nevybraný možnost Přidat přípravný slot.
Výběrem možnosti Zkontrolovat a vytvořit spusťte konečné ověření.
Výběrem možnosti Vytvořit dokončete nasazení služby App Service.

Nasazení služby App Service může trvat několik minut.

Krok 2: Vytvoření nové registrace aplikace Microsoft Entra

V tomto kroku vytvořte novou aplikaci Microsoft Entra. V pozdějších krocích nakonfigurujete tuto aplikaci jako zprostředkovatele identity pro ověřování ve službě App Service a na portál pro vývojáře ve vaší instanci služby API Management.

Na webu Azure Portal přejděte na Registrace aplikací>+ Nová registrace.
Zadejte nový název aplikace a v podporovaných typech účtů vyberte Pouze účty v tomto organizačním adresáři. Vyberte Zaregistrovat.
Na stránce Přehled zkopírujte a bezpečně uložte ID aplikace (klienta) a ID adresáře (tenanta). Tyto hodnoty budete potřebovat v pozdějších krocích ke konfiguraci ověřování pro instanci služby API Management a službu App Service.
V nabídce vlevo v části Spravovat vyberte Ověřování> + Přidat platformu.
Na stránce Konfigurovat platformy vyberte Web.
Na stránce Konfigurovat webovou stránku zadejte následující identifikátor URI přesměrování, nahraďte název služby App Service a vyberte Konfigurovat:

https://app-service-name>.azurewebsites.net/.auth/login/aad/callback
Znovu vyberte + Přidat platformu . Vyberte jednostrákovou aplikaci.
Na stránce Konfigurovat jednostrákovou aplikaci zadejte následující identifikátor URI přesměrování, nahraďte název vaší instance služby API Management a vyberte Konfigurovat:

https://<apim-instance-name>.developer.azure-api.net/signin
Znovu vyberte + Přidat platformu . Znovu vyberte jednostrákovou aplikaci .
Na stránce Konfigurovat jednostrákovou aplikaci zadejte následující identifikátor URI přesměrování, nahraďte název vaší instance služby API Management a vyberte Konfigurovat:

https://<apim-instance-name>.developer.azure-api.net/
V nabídce vlevo v části Spravovat vyberte Konfigurace> tokenu + Přidat volitelnou deklaraci identity.
Na stránce Přidat volitelnou deklaraci identity vyberte ID a pak vyberte následující deklarace identity: e-mail, family_name, given_name, onprem_sid, preferred_username, upn. Vyberte Přidat.
Po zobrazení výzvy vyberte Zapnout e-mail Microsoft Graphu, oprávnění k profilu. Vyberte Přidat.
V nabídce vlevo v části Spravovat vyberte oprávnění rozhraní API a ověřte, že jsou k dispozici následující oprávnění Microsoft Graphu: e-mail, profil, User.Read.
V nabídce vlevo v části Spravovat vyberte Certifikáty a tajné kódy> + Nový tajný klíč klienta.
Nakonfigurujte nastavení tajného kódu a vyberte Přidat. Zkopírujte a bezpečně uložte hodnotu tajného kódu hned po vygenerování. Tuto hodnotu budete potřebovat v pozdějších krocích k přidání aplikace do instance služby API Management a aplikační služby pro ověřování.
V nabídce vlevo v části Spravovat vyberte Zveřejnit rozhraní API. Poznamenejte si výchozí identifikátor URI ID aplikace. Volitelně můžete v případě potřeby přidat vlastní obory.

Krok 3: Povolení ověřování ve službě App Service

V tomto kroku přidejte registraci aplikace Microsoft Entra jako zprostředkovatele identity pro ověřování do aplikační služby WordPress.

Na portálu přejděte do aplikační služby WordPress.
V nabídce vlevo v části Nastavení vyberte zprostředkovatele identity Přidat ověřování>.
Na kartě Základy ve zprostředkovateli identity vyberte Microsoft.
V části Registrace aplikace vyberte Zadat podrobnosti o existující registraci aplikace.
1. Zadejte ID aplikace (klienta) a tajný klíč klienta z registrace aplikace, kterou jste vytvořili v předchozím kroku.
2. V adrese URL vystavitele zadejte pro koncový bod ověřování jednu z následujících hodnot: https://login.microsoftonline.com/<tenant-id> nebo https://sts.windows.net/<tenantid>. Nahraďte <tenant-id> ID adresáře (tenanta) z registrace aplikace.
  
  Důležité
  
  Nepoužívejte koncový bod verze 2.0 pro adresu URL vystavitele (adresa URL končící /v2.0).
V části Povolené cílové skupiny tokenů zadejte identifikátor URI ID aplikace z registrace aplikace. Příklad: api://<app-id>.
V části Další kontroly vyberte hodnoty vhodné pro vaše prostředí nebo použijte výchozí hodnoty.
Nakonfigurujte požadované hodnoty pro zbývající nastavení nebo použijte výchozí hodnoty. Vyberte Přidat.

Poznámka:

Pokud chcete povolit uživatelům typu host a přihlášeným uživatelům přístup k portálu pro vývojáře ve WordPressu, můžete povolit neověřený přístup. V možnosti Omezit přístup vyberte Povolit neověřený přístup. Další informace

Zprostředkovatel identity se přidá do služby App Service.

Krok 4: Povolení ověřování na portálu pro vývojáře služby API Management

Nakonfigurujte stejnou registraci aplikace Microsoft Entra jako zprostředkovatele identity pro portál pro vývojáře služby API Management.

Na portálu přejděte do vaší instance služby API Management.
V nabídce vlevo v části Portál pro vývojáře vyberte Identity>+ Přidat.
Na stránce Přidat zprostředkovatele identity vyberte Azure Active Directory (Microsoft Entra ID).
Zadejte ID klienta, tajný klíč klienta a hodnoty přihlašovacího tenanta z registrace aplikace, kterou jste vytvořili v předchozím kroku. Přihlašovací tenant je ID adresáře (tenanta) z registrace aplikace.
V klientské knihovně vyberte MSAL.
Přijměte výchozí hodnoty pro zbývající nastavení a vyberte Přidat.
Znovu publikujte portál pro vývojáře, aby se změny použily.
Otestujte ověřování tak, že se přihlásíte k portálu pro vývojáře na následující adrese URL a nahraďte název vaší instance služby API Management: https://<apim-instance-name>.developer.azure-api.net/signin Výběrem tlačítka Azure Active Directory (Microsoft Entra ID) v dolní části se přihlaste.

Když ho poprvé otevřete, může se zobrazit výzva k vyjádření souhlasu s konkrétními oprávněními.

Krok 5: Konfigurace nastavení portálu pro vývojáře ve službě API Management

Aktualizujte nastavení portálu pro vývojáře v instanci služby API Management, abyste povolili CORS a zahrnuli web služby App Service jako původ portálu.

Na webu Azure Portal přejděte k vaší instanci služby API Management.
V nabídce vlevo v části Portál pro vývojáře vyberte Přehled portálu.
Na kartě Přehled portálu vyberte Povolit CORS.
V nabídce vlevo v části Portál pro vývojáře vyberte nastavení portálu.
Na kartě Konfigurace místního portálu zadejte název hostitele webu WordPress na webu služby App Service jako původ portálu a nahraďte název vaší služby App Service na následující adrese URL:https://<yourapp-service-name>.azurewebsites.net
Znovu publikujte portál pro vývojáře, aby se změny použily.

Aktualizujte cors také konfiguraci zásad v instanci služby API Management, aby se web služby App Service přidal jako povolený zdroj. Tato hodnota je nutná k povolení volání z testovací konzoly portálu pro vývojáře na webu WordPress.

Do konfigurace zásad přidejte následující origin hodnotu cors :

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

Přečtěte si další informace o tom, jak nastavit nebo upravit zásady.

Krok 6: Přejděte na web pro správu WordPressu a nahrajte přizpůsobený motiv.

V tomto kroku nahrajete přizpůsobený motiv portálu pro vývojáře služby API Management na web pro správu WordPressu.

Důležité

Doporučujeme nahrát motiv uvedený v úložišti modulu plug-in. Motiv je založený na motivu Dvaceti čtyři a je přizpůsobený tak, aby podporoval funkce portálu pro vývojáře ve WordPressu. Pokud se rozhodnete použít jiný motiv, některé funkce nemusí fungovat podle očekávání nebo vyžadují další přizpůsobení.

Otevřete web pro správu WordPressu na následující adrese URL a nahraďte název vaší služby App Service: http://<app-service-name>.azurewebsites.net/wp-admin

Když ho poprvé otevřete, může se zobrazit výzva k vyjádření souhlasu s konkrétními oprávněními.
Přihlaste se k webu pro správu WordPress pomocí uživatelského jména a hesla, které jste zadali při vytváření WordPressu ve službě App Service.
V nabídce vlevo vyberte Motivy vzhledu>a pak přidejte nový motiv.
Vyberte Nahrát motiv. Výběrem možnosti Zvolit soubor nahrajete soubor ZIP s motivem vývojářského portálu SLUŽBY API Management, který jste stáhli dříve. Vyberte Nainstalovat.
Na další obrazovce vyberte Nahradit aktivní odesláním.
Pokud se zobrazí výzva, vyberte Aktivovat.

Poznámka:

Pokud váš web WordPress obsahuje modul plug-in pro ukládání do mezipaměti, vymažte mezipaměť po aktivaci motivu, aby se změny projevily.

Krok 7: Instalace modulu plug-in vývojářského portálu

Na webu pro správu WordPress v nabídce vlevo vyberte Plugins Add New Plugins>.
Vyberte Nahrát modul plug-in. Vyberte Zvolit soubor a nahrajte soubor ZIP modulu plug-in vývojářského portálu SLUŽBY API Management (apim-devportal.zip), který jste si stáhli dříve. Vyberte Nainstalovat.
Po úspěšné instalaci vyberte Aktivovat modul plug-in.
V nabídce vlevo vyberte Portál pro vývojáře služby Azure API Management.
Na stránce Nastavení SLUŽBY APIM zadejte následující nastavení a vyberte Uložit změny:
- Název služby APIM – název instance služby API Management
- Povolit vytvoření výchozích stránek a vytvořit navigační nabídku

Krok 8: Přidání vlastní šablony stylů

Přidejte vlastní šablonu stylů pro portál pro vývojáře služby API Management.

Na webu pro správu WordPressu v nabídce vlevo vyberte Motivy vzhledu>.
Vyberte Přizpůsobit a přejděte na Styly.
Vyberte ikonu tužky (Upravit styly).
V podokně Styly vyberte Další (tři tečky) >Další šablony stylů CSS.

V části Další šablony stylů CSS zadejte následující šablony stylů 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;
}

Uložte změny. Výběrem možnosti Uložit znovu uložte změny motivu.
Odhlaste se z webu pro správu WordPressu.

Krok 9: Přihlášení k portálu pro vývojáře služby API Management nasazeného ve WordPressu

Přejděte na web WordPress a podívejte se na nový vývojářský portál SLUŽBY API Management nasazený ve WordPressu a hostovaný ve službě App Service.

V novém okně prohlížeče přejděte na web WordPress a nahraďte název vaší služby App Service v následující adrese URL: https://<yourapp-service-name>.azurewebsites.net.
Po zobrazení výzvy se přihlaste pomocí přihlašovacích údajů Microsoft Entra ID pro vývojářský účet. Pokud je povolený neověřený přístup k portálu pro vývojáře, na domovské stránce portálu pro vývojáře vyberte Přihlásit se.

Poznámka:

K portálu pro vývojáře ve WordPressu se můžete přihlásit jenom pomocí přihlašovacích údajů Microsoft Entra ID. Základní ověřování se nepodporuje.

Teď můžete použít následující funkce portálu pro vývojáře služby API Management:

Přihlásit se na portál
Zobrazit seznam rozhraní API
Přechod na stránku podrobností rozhraní API a zobrazení seznamu operací
Testování rozhraní API pomocí platných klíčů rozhraní API
Zobrazit seznam produktů
Přihlášení k odběru produktu a generování klíčů předplatného
Přejděte na kartu Profil s podrobnostmi o účtu a předplatném.
Odhlášení z portálu

Následující snímek obrazovky ukazuje ukázkovou stránku portálu pro vývojáře služby API Management hostovaného ve WordPressu.

Snímek obrazovky portálu pro vývojáře hostovaného ve WordPressu

Řešení problému

Na webu WordPress se nezobrazují nejnovější stránky portálu pro vývojáře

Pokud při návštěvě webu WordPress nevidíte nejnovější stránky portálu pro vývojáře, zkontrolujte, jestli je nainstalovaný, aktivovaný a nakonfigurovaný modul plug-in vývojářského portálu na webu pro správu WordPressu. Postup najdete v tématu Instalace modulu plug-in vývojářského portálu .

Pokud je nakonfigurovaná, možná budete muset vymazat mezipaměť na webu WordPress nebo v SÍTI CDN. Případně možná budete muset vymazat mezipaměť v prohlížeči.

Mám problémy s přihlášením nebo odhlášením z portálu pro vývojáře

Pokud máte problémy s přihlášením nebo odhlášením z portálu pro vývojáře, vymažte mezipaměť prohlížeče nebo zobrazte web portálu pro vývojáře v samostatné relaci prohlížeče (pomocí anonymního nebo privátního režimu procházení).

Pokud používáte vlastní motiv, který se liší od motivu, který je v úložišti modulu plug-in, budete možná muset do navigačního panelu přidat funkci přihlášení ručně. Na domovské stránce přidejte následující blok krátkého kódu: [SignInButton]. Další informace najdete v dokumentaci k WordPressu.

Můžete se také přihlásit nebo odhlásit ručně zadáním následujících adres URL v prohlížeči:

Přihlásit se: https://<app-service-name>.azurewebsites.net/.auth/login/aad
Odhlásit se: https://<app-service-name>.azurewebsites.net/.auth/logout

Sdílet prostřednictvím

Přizpůsobení vývojářského portálu služby API Management ve WordPressu

Požadavky

Krok 1: Vytvoření WordPressu ve službě App Service

Krok 2: Vytvoření nové registrace aplikace Microsoft Entra

Krok 3: Povolení ověřování ve službě App Service

Krok 4: Povolení ověřování na portálu pro vývojáře služby API Management

Krok 5: Konfigurace nastavení portálu pro vývojáře ve službě API Management

Krok 6: Přejděte na web pro správu WordPressu a nahrajte přizpůsobený motiv.

Krok 7: Instalace modulu plug-in vývojářského portálu

Krok 8: Přidání vlastní šablony stylů

Krok 9: Přihlášení k portálu pro vývojáře služby API Management nasazeného ve WordPressu

Řešení problému

Na webu WordPress se nezobrazují nejnovější stránky portálu pro vývojáře

Mám problémy s přihlášením nebo odhlášením z portálu pro vývojáře

Váš názor

Další materiály

Sdílet prostřednictvím

Přizpůsobení vývojářského portálu služby API Management ve WordPressu

Požadavky

Krok 1: Vytvoření WordPressu ve službě App Service

Krok 2: Vytvoření nové registrace aplikace Microsoft Entra

Krok 3: Povolení ověřování ve službě App Service

Krok 4: Povolení ověřování na portálu pro vývojáře služby API Management

Krok 5: Konfigurace nastavení portálu pro vývojáře ve službě API Management

Krok 6: Přejděte na web pro správu WordPressu a nahrajte přizpůsobený motiv.

Krok 7: Instalace modulu plug-in vývojářského portálu

Krok 8: Přidání vlastní šablony stylů

Krok 9: Přihlášení k portálu pro vývojáře služby API Management nasazeného ve WordPressu

Řešení problému

Na webu WordPress se nezobrazují nejnovější stránky portálu pro vývojáře

Mám problémy s přihlášením nebo odhlášením z portálu pro vývojáře

Na navigačním panelu portálu pro vývojáře se nezobrazuje přihlašovací tlačítko

Související obsah

Váš názor

Další materiály