Personnaliser le portail des développeurs Gestion des API sur WordPress

Article
07/22/2024

S’APPLIQUE À : Développeur | De base | Standard | Premium

Cet article explique comment configurer un plug-in du portail des développeurs open source (préversion) pour personnaliser le portail des développeurs Gestion des API sur WordPress. Avec le plug-in, transformez n’importe quel site WordPress en portail des développeurs. Tirez parti des capacités de site dans WordPress pour personnaliser et ajouter des fonctionnalités à votre portail des développeurs, notamment la localisation, les menus réductibles et extensibles, les feuilles de style personnalisées, les téléchargements de fichiers, etc.

Dans cet article, vous allez créer un site WordPress sur Azure App Service et configurer le plug-in du portail des développeurs sur le site WordPress. Microsoft Entra ID est configuré pour l’authentification auprès du site WordPress et du portail des développeurs.

Prérequis

Une instance APIM. Si nécessaire, créez une instance.

Remarque

Actuellement, le plug-in n’est pas pris en charge dans les niveaux v2 Gestion des API.
Activez et publiez le portail des développeurs. Pour obtenir les étapes, consultez Tutoriel : Accéder et personnaliser le portail des développeurs.
Autorisations pour créer une inscription d’application dans un locataire Microsoft Entra associé à votre abonnement Azure.
Fichiers d’installation pour le plug-in WordPress du portail des développeurs et thème WordPress personnalisé à partir du dépôt du plug-in. Téléchargez les fichiers zip suivants à partir du dossier dist dans le dépôt :
- apim-devportal.zip : fichier de plug-in
- twentytwentyfour.zip : fichier de thème

Étape 1 : Créer Wordpress sur App Service

Pour ce scénario, vous créez un site WordPress managé hébergé sur Azure App Service. Voici les quelques étapes à effectuer :

Dans le portail Azure, accédez à https://portal.azure.com/#create/WordPress.WordPress.
Dans la page Créer WordPress sur App Service, sous l’onglet Informations de base, entrez les détails de votre projet.

Enregistrez le nom d’utilisateur et le mot de passe de l’administrateur WordPress dans un endroit sûr. Ces informations d’identification sont requises pour se connecter au site d’administration WordPress et installer le plug-in lors d’une étape ultérieure.
Sous l’onglet Compléments :
1. Sélectionnez les valeurs par défaut recommandées pour E-mail avec Azure Communication Services, Azure CDN et Stockage Blob Azure.
2. Dans Réseau virtuel, sélectionnez la valeur Nouveau ou un réseau virtuel existant.
Sous l’onglet Déploiement, laissez l’option Ajouter un emplacement de préproduction non sélectionnée.
Sélectionnez Vérifier + créer pour exécuter la validation finale.
Sélectionnez Créer pour terminer le déploiement du service d’application.

Le déploiement du service d’application peut prendre plusieurs minutes.

Étape 2 : Créer une inscription d’application Microsoft Entra

Lors de cette étape, vous allez créer une application Microsoft Entra. Lors des étapes ultérieures, vous configurerez cette application en tant que fournisseur d’identité pour l’authentification auprès de votre service d’application et du portail des développeurs dans votre instance Gestion des API.

Dans le portail Azure, accédez à Inscriptions d’applications>+ Nouvelle inscription.
Indiquez le nom de la nouvelle application et, dans Types de comptes pris en charge, sélectionnez Comptes dans cet annuaire organisationnel uniquement. Sélectionnez Inscrire.
Dans la page Vue d’ensemble, copiez et stockez dans un emplacement sécurisé l’ID d’application (client) et l’ID d’annuaire (locataire). Vous aurez besoin de ces valeurs lors d’étapes ultérieures pour configurer l’authentification auprès de votre instance Gestion des API et du service d’application.
Dans le menu de gauche, sous Gérer, sélectionnez Authentification>+ Ajouter une plateforme.
Dans la page Configurer les plateformes, sélectionnez Web.
Dans la page Configurer le web, entrez l’URI de redirection suivant, en indiquant le nom de votre service d’application, puis sélectionnez Configurer :

https://app-service-name>.azurewebsites.net/.auth/login/aad/callback
Sélectionnez + Ajouter une plateforme à nouveau. Sélectionnez Application monopage.
Dans la page Configurer l’application monopage, entrez l’URI de redirection suivant, en indiquant le nom de votre instance Gestion des API, puis sélectionnez Configurer :

https://<apim-instance-name>.developer.azure-api.net/signin
Sélectionnez + Ajouter une plateforme à nouveau. Sélectionnez à nouveau Application d'une seule page.
Dans la page Configurer l’application monopage, entrez l’URI de redirection suivant, en indiquant le nom de votre instance Gestion des API, puis sélectionnez Configurer :

https://<apim-instance-name>.developer.azure-api.net/
Dans le menu de gauche, sous Gérer, sélectionnez Configuration du jeton>+ Ajouter une revendication facultative.
Dans la page Ajouter une revendication facultative, sélectionnez ID, puis sélectionnez les revendications suivantes : e-mail, family_name, given_name, onprem_sid, preferred_username, upn. Sélectionnez Ajouter.
À l’invite, sélectionnez Activer l’e-mail Microsoft Graph, autorisation de profil. Sélectionnez Ajouter.
Dans le menu de gauche, sous Gérer, sélectionnez Autorisations d’API, et vérifiez que les autorisations Microsoft Graph suivantes sont présentes : e-mail, profile, User.Read.
Dans le menu de gauche, sous Gérer, sélectionnez Certificats et secrets>+ Nouveau secret client.
Configurez les paramètres du secret et sélectionnez Ajouter. Copiez et stockez dans un emplacement sécurisé la Valeur du secret immédiatement après sa génération. Vous aurez besoin de cette valeur lors d’étapes ultérieures pour ajouter l’application à votre instance Gestion des API et à votre service d’application pour l’authentification.
Dans le menu de gauche, sous Gérer, sélectionnez Exposer une API. Notez la valeur par défaut URI d’ID d’application. Ajoutez éventuellement des étendues personnalisées, si nécessaire.

Étape 3 : Activer l’authentification auprès du service d’application

Lors de cette étape, vous allez ajouter l’inscription d’application Microsoft Entra en tant que fournisseur d’identité pour l’authentification auprès du service d’application WordPress.

Dans le portail, accédez au service d’application WordPress.
Dans le menu de gauche, sous Paramètres, sélectionnez Authentification>Ajouter un fournisseur d’identité.
Sous l’onglet Informations de base, dans Fournisseur d’identité, sélectionnez Microsoft.
Sous Inscription d’application, sélectionnez Fournir les détails d’une inscription d’application existante.
1. Entrez l’ID d’application (client) et la Clé secrète client à partir de l’inscription d’application que vous avez créée à l’étape précédente.
2. Dans URL de l’émetteur, entrez l’une des valeurs suivantes pour le point de terminaison d’authentification : https://login.microsoftonline.com/<tenant-id> ou https://sts.windows.net/<tenantid>. Remplacez <tenant-id> par l’ID d’annuaire (locataire) à partir de l’inscription d’application.
  
  Important
  
  N’utilisez pas le point de terminaison version 2.0 pour l’URL de l’émetteur (URL se terminant par /v2.0).
Dans Audiences de jetons autorisées, entrez l’URI d’ID d’application à partir de l’inscription d’application. Exemple : api://<app-id>.
Sous Vérifications supplémentaires, sélectionnez les valeurs appropriées pour votre environnement ou utilisez les valeurs par défaut.
Configurez vos valeurs souhaitées pour les autres paramètres ou utilisez les valeurs par défaut. Sélectionnez Ajouter.

Remarque

Si vous souhaitez autoriser les utilisateurs hôtes, ainsi que les utilisateurs connectés, à accéder au portail des développeurs sur WordPress, vous pouvez activer l’accès non authentifié. Dans Restreindre l’accès, sélectionnez Autoriser l’accès non authentifié. En savoir plus

Le fournisseur d’identité est ajouté au service d’application.

Étape 4 : Activer l’authentification auprès du portail des développeurs Gestion des API

Configurez la même inscription d’application Microsoft Entra qu’un fournisseur d’identité pour le portail des développeurs Gestion des API.

Dans le portail, accédez à votre instance Gestion des API.
Dans le menu de gauche, sous Portail des développeurs, sélectionnez Identités>+ Ajouter.
Dans la page Ajouter le fournisseur d’identité, sélectionnez Azure Active Directory (Microsoft Entra ID).
Entrez les valeurs ID client, Clé secrète client et Locataire de connexion à partir de l’inscription d’application que vous avez créée à l’étape précédente. ID de locataire est l’ID d’annuaire (locataire) à partir de l’inscription d’application.
Dans Bibliothèque de client, sélectionnez MSAL.
Acceptez les valeurs par défaut pour les autres paramètres, puis sélectionnez Ajouter.
Republiez le portail des développeurs pour appliquer les modifications.
Testez l’authentification en vous connectant au portail des développeurs à l’URL suivante, en indiquant le nom de votre instance Gestion des API : https://<apim-instance-name>.developer.azure-api.net/signin. Sélectionnez le bouton Azure Active Directory (Microsoft Entra ID) en bas pour vous connecter.

Lorsque vous l’ouvrez pour la première fois, vous serez peut-être invité à consentir à des autorisations spécifiques.

Étape 5 : Configurer les paramètres du portail des développeurs dans Gestion des API

Mettez à jour les paramètres du portail des développeurs dans l’instance Gestion des API de façon à activer CORS et à inclure le site App Service en tant qu’origine du portail.

Dans le portail Azure, accédez à votre instance APIM.
Dans le menu de gauche, sous Portail des développeurs, sélectionnez Vue d’ensemble du portail.
Sous l’onglet Vue d’ensemble du portail, sélectionnez Activer CORS.
Dans le menu de gauche, sous Portail des développeurs, sélectionnez Paramètres du portail.
Sous l’onglet Configuration du portail auto-hébergé, entrez le nom d’hôte de votre site WordPress sur App Service en tant qu’origine du portail, en indiquant le nom de votre service d’application dans l’URL suivante : https://<yourapp-service-name>.azurewebsites.net
Republiez le portail des développeurs pour appliquer les modifications.

Mettez également à jour la configuration de stratégie cors dans l’instance Gestion des API pour ajouter le site App Service en tant qu’origine autorisée. Cette valeur est nécessaire pour autoriser les appels à partir de la console de test du portail des développeurs sur le site WordPress.

Ajoutez la valeur origin suivante dans votre configuration de stratégie cors :

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

Apprenez-en davantage sur la façon de définir ou modifier des stratégies.

Étape 6 : Accéder au site d’administration WordPress et charger le thème personnalisé

Lors de cette étape, vous allez charger le thème personnalisé pour le portail des développeurs Gestion des API sur le site d’administration WordPress.

Important

Nous vous recommandons de charger le thème fourni dans le dépôt du plug-in. Le thème est basé sur le thème Twenty Twenty Four, et il est personnalisé pour prendre en charge les fonctionnalités du portail des développeurs dans WordPress. Si vous choisissez d’utiliser un thème différent, certaines fonctionnalités peuvent ne pas fonctionner comme prévu ou nécessiter une personnalisation supplémentaire.

Ouvrez le site web d’administration WordPress à l’URL suivante, en indiquant le nom de votre service d’application : http://<app-service-name>.azurewebsites.net/wp-admin

Lorsque vous l’ouvrez pour la première fois, vous serez peut-être invité à consentir à des autorisations spécifiques.
Connectez-vous au site d’administration WordPress à l’aide du nom d’utilisateur et du mot de passe que vous avez entrés lors de la création du site WordPress sur App Service.
Dans le menu de gauche, sélectionnez Apparence>Thèmes, puis Ajouter un nouveau thème.
Sélectionnez Charger un thème. Sélectionnez Choisir un fichier pour charger le fichier zip du thème du portail des développeurs Gestion des API que vous avez téléchargé. Sélectionnez Installer maintenant.
Dans l’écran suivant, sélectionnez Remplacer actif par chargé.
Si vous y êtes invité, sélectionnez Activer.

Remarque

Si votre site WordPress inclut un plug-in de mise en cache, effacez le cache après avoir activé le thème pour vous assurer que les modifications prennent effet.

Étape 7 : Installer le plug-in du portail des développeurs

Dans le site d’administration WordPress, dans le menu de gauche, sélectionnez Plug-ins>Ajouter un nouveau plug-in.
Sélectionnez Charger un plug-in. Sélectionnez Choisir un fichier pour charger le fichier zip du plug-in du portail des développeurs Gestion des API (apim-devportal.zip) que vous avez téléchargé. Sélectionnez Installer maintenant.
Une fois l’installation réussie, sélectionnez Activer le plug-in.
Dans le menu de gauche, sélectionnez Portail des développeurs Gestion des API Azure.
Dans la page Paramètres APIM, entrez les paramètres suivants, puis sélectionnez Enregistrer les modifications :
- Nom du service APIM : nom de votre instance Gestion des API.
- Activez Créer des pages par défaut et Créer un menu de navigation.

Étape 8 : Ajouter une feuille de style personnalisée

Ajoutez une feuille de style personnalisée pour le portail des développeurs Gestion des API.

Dans le site d’administration WordPress, dans le menu de gauche, sélectionnez Apparence>Thèmes.
Sélectionnez Personnaliser, puis accédez à Styles.
Sélectionnez l’icône de crayon (Modifier les styles).
Dans le volet Styles, sélectionnez Plus (trois points) >CSS supplémentaire.

Dans CSS supplémentaire, entrez la CSS suivante :

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

Enregistrez les modifications. Sélectionnez Enregistrer à nouveau pour enregistrer les modifications apportées au thème.
Déconnectez-vous du site d’administration WordPress.

Étape 9 : Se connecter au portail des développeurs Gestion des API déployé sur WordPress

Accédez au site WordPress pour voir votre nouveau portail des développeurs Gestion des API déployé sur WordPress et hébergé sur App Service.

Dans une nouvelle fenêtre de navigateur, accédez à votre site WordPress, en remplaçant le nom de votre service d’application dans l’URL suivante : https://<yourapp-service-name>.azurewebsites.net.
À l’invite, connectez-vous à l’aide d’informations d’identification Microsoft Entra ID pour un compte de développeur. Si l’accès non authentifié au portail des développeurs est activé, sélectionnez Se connecter sur la page d’accueil du portail des développeurs.

Remarque

Vous pouvez uniquement vous connecter au portail des développeurs sur WordPress à l’aide d’informations d’identification Microsoft Entra ID. L’authentification de base n’est pas prise en charge.

Vous pouvez maintenant utiliser les fonctionnalités suivantes du portail des développeurs Gestion des API :

Connexion au portail
Affichage de la liste des API
Accès à la page de détails des API et consultation de la liste des opérations
Test de l’API à l’aide de clés API valides
Affichage de la liste des produits
Abonnement à un produit et génération de clés d’abonnement
Accès à l’onglet Profil avec les détails du compte et de l’abonnement
Déconnexion du portail

La capture d’écran suivante montre un exemple de page du portail des développeurs Gestion des API hébergé sur WordPress.

Capture d’écran du portail des développeurs hébergé sur WordPress.

Dépannage

Je ne vois pas les dernières pages du portail des développeurs sur le site WordPress

Si vous ne voyez pas les dernières pages du portail des développeurs lorsque vous visitez le site WordPress, vérifiez que le plug-in du portail des développeurs est installé, activé et configuré dans le site d’administration WordPress. Pour connaître les étapes, consultez Installer le plug-in du portail des développeurs.

Vous devrez peut-être également effacer le cache sur votre site WordPress ou dans le CDN, si celui-ci est configuré. Vous devrez peut-être également effacer le cache sur votre navigateur.

Je rencontre des problèmes de connexion ou de déconnexion du portail des développeurs

Si vous rencontrez des problèmes de connexion ou de déconnexion du portail des développeurs, effacez le cache du navigateur ou affichez le site du portail des développeurs dans une session de navigateur distincte (en utilisant le mode de navigation privée ou incognito).

Si vous utilisez un thème personnalisé différent de celui fourni dans le dépôt du plug-in, vous devrez peut-être ajouter manuellement la fonctionnalité de connexion à la barre de navigation. Dans la page d’accueil, ajoutez le bloc de shortcode suivant : [SignInButton]. Apprenez-en davantage dans la documentation WordPress.

Vous pouvez également vous connecter ou vous déconnecter manuellement en entrant les URL suivantes dans votre navigateur :

Connexion : https://<app-service-name>.azurewebsites.net/.auth/login/aad
Déconnexion : https://<app-service-name>.azurewebsites.net/.auth/logout

Partager via

Personnaliser le portail des développeurs Gestion des API sur WordPress

Prérequis

Étape 1 : Créer Wordpress sur App Service

Étape 2 : Créer une inscription d’application Microsoft Entra

Étape 3 : Activer l’authentification auprès du service d’application

Étape 4 : Activer l’authentification auprès du portail des développeurs Gestion des API

Étape 5 : Configurer les paramètres du portail des développeurs dans Gestion des API

Étape 6 : Accéder au site d’administration WordPress et charger le thème personnalisé

Étape 7 : Installer le plug-in du portail des développeurs

Étape 8 : Ajouter une feuille de style personnalisée

Étape 9 : Se connecter au portail des développeurs Gestion des API déployé sur WordPress

Dépannage

Je ne vois pas les dernières pages du portail des développeurs sur le site WordPress

Je rencontre des problèmes de connexion ou de déconnexion du portail des développeurs

Commentaires

Ressources supplémentaires

Partager via

Personnaliser le portail des développeurs Gestion des API sur WordPress

Prérequis

Étape 1 : Créer Wordpress sur App Service

Étape 2 : Créer une inscription d’application Microsoft Entra

Étape 3 : Activer l’authentification auprès du service d’application

Étape 4 : Activer l’authentification auprès du portail des développeurs Gestion des API

Étape 5 : Configurer les paramètres du portail des développeurs dans Gestion des API

Étape 6 : Accéder au site d’administration WordPress et charger le thème personnalisé

Étape 7 : Installer le plug-in du portail des développeurs

Étape 8 : Ajouter une feuille de style personnalisée

Étape 9 : Se connecter au portail des développeurs Gestion des API déployé sur WordPress

Dépannage

Je ne vois pas les dernières pages du portail des développeurs sur le site WordPress

Je rencontre des problèmes de connexion ou de déconnexion du portail des développeurs

Je ne vois pas de bouton de connexion dans la barre de navigation du portail des développeurs

Contenu connexe

Commentaires

Ressources supplémentaires