Personalize o portal do desenvolvedor do Gerenciamento de API no WordPress

APLICA-SE A: Developer | Básico | Padrão | Prémio

Este artigo mostra como configurar um plug-in de portal do desenvolvedor de código aberto (visualização) para personalizar o portal do desenvolvedor do Gerenciamento de API no WordPress. Com o plugin, transforme qualquer site WordPress em um portal do desenvolvedor. Aproveite os recursos do site no WordPress para personalizar e adicionar recursos ao seu portal do desenvolvedor, incluindo localização, menus dobráveis e expansíveis, folhas de estilo personalizadas, downloads de arquivos e muito mais.

Neste artigo, você cria um site WordPress no Serviço de Aplicativo do Azure e configura o plug-in do portal do desenvolvedor no site do WordPress. O Microsoft Entra ID está configurado para autenticação no site WordPress e no portal do desenvolvedor.

Pré-requisitos

• Uma instância de gerenciamento de API. Se necessário, crie uma instância.

  Nota

  Atualmente, o plug-in não é suportado nas camadas de Gerenciamento de API v2.

• Habilite e publique o portal do desenvolvedor. Para conhecer as etapas, consulte Tutorial: Acessar e personalizar o portal do desenvolvedor.
• Permissões para criar um registro de aplicativo em um locatário do Microsoft Entra associado à sua assinatura do Azure.
• Arquivos de instalação para o plugin WordPress do portal do desenvolvedor e tema WordPress personalizado do repositório do plugin. Baixe os seguintes arquivos zip da pasta dist no repo:
  • apim-devportal.zip - Arquivo Plugin
  • twentytwentyfour.zip - Arquivo de tema

Etapa 1: Criar WordPress no Serviço de Aplicativo

Para esse cenário, você cria um site WordPress gerenciado hospedado no Serviço de Aplicativo do Azure. Seguem-se passos breves:

1. No portal do Azure, navegue até https://portal.azure.com/#create/WordPress.WordPress.

2. Na página Criar WordPress no Serviço de Aplicativo, na guia Noções básicas, insira os detalhes do projeto.

   Grave o nome de usuário e senha do administrador do WordPress em um lugar seguro. Essas credenciais são necessárias para entrar no site de administração do WordPress e instalar o plug-in em uma etapa posterior.

3. Na guia Suplementos:

   1. Selecione os valores padrão recomendados para Email com Serviços de Comunicação do Azure, CDN do Azure e Armazenamento de Blob do Azure.
   2. Em Rede virtual, selecione o valor Novo ou uma rede virtual existente.

4. Na guia Implantação, deixe Adicionar slot de preparo desmarcado.

5. Selecione Rever + criar para executar a validação final.

6. Selecione Criar para concluir a implantação do serviço de aplicativo.

Pode levar vários minutos para que o serviço de aplicativo seja implantado.

Etapa 2: Criar um novo registro de aplicativo Microsoft Entra

Nesta etapa, crie um novo aplicativo Microsoft Entra. Em etapas posteriores, você configura esse aplicativo como um provedor de identidade para autenticação no serviço do aplicativo e no portal do desenvolvedor na instância de Gerenciamento de API.

1. No portal do Azure, navegue até Registros de aplicativo>+ Novo registro.

2. Forneça o novo nome do aplicativo e, em Tipos de conta suportados, selecione Contas somente neste diretório organizacional. Selecione Registar.

3. Na página Visão geral, copie e armazene com segurança a ID do aplicativo (cliente) e a ID do diretório (locatário). Você precisa desses valores em etapas posteriores para configurar a autenticação para sua instância de Gerenciamento de API e serviço de aplicativo.

4. No menu à esquerda, em Gerenciar, selecione Autenticação>+ Adicionar uma plataforma.

5. Na página Configurar plataformas, selecione Web.

6. Na página Configurar Web, insira o seguinte URI de redirecionamento, substituindo o nome do seu serviço de aplicativo, e selecione Configurar:

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

7. Selecione + Adicionar uma plataforma novamente. Selecione Aplicativo de página única.

8. Na página Configurar aplicativo de página única, insira o seguinte URI de redirecionamento, substituindo o nome da sua instância de Gerenciamento de API, e selecione Configurar:

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

9. Na página Autenticação, em Aplicativo de página única, selecione Adicionar URI e insira o seguinte URI, substituindo o nome da sua instância de Gerenciamento de API:

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

10. Em Concessão implícita e fluxos híbridos, selecione Tokens de ID e selecione Salvar.

11. No menu à esquerda, em Gerenciar, selecione Configuração de token>+ Adicionar declaração opcional.

12. Na página Adicionar declaração opcional, selecione ID e, em seguida, selecione as seguintes declarações: email, family_name, given_name, onprem_sid, preferred_username, upn. Selecione Adicionar.

13. Quando solicitado, selecione Ativar o email do Microsoft Graph, permissão de perfil. Selecione Adicionar.

14. No menu à esquerda, em Gerenciar , selecione Permissões de API e confirme se as seguintes permissões do Microsoft Graph estão presentes: email, perfil, User.Read.

    

15. No menu à esquerda, em Gerenciar, selecione Certificados & segredos>+ Novo segredo do cliente.

16. Configure as configurações para o segredo e selecione Adicionar. Copie e armazene com segurança o valor do segredo imediatamente após ele ser gerado. Você precisa desse valor em etapas posteriores para adicionar o aplicativo à sua instância de Gerenciamento de API e ao serviço de aplicativo para autenticação.

17. No menu à esquerda, em Gerenciar, selecione Expor uma API. Observe o URI de ID do aplicativo padrão. Opcionalmente, adicione escopos personalizados, se necessário.

Etapa 3: Habilitar a autenticação para o serviço de aplicativo

Nesta etapa, adicione o registro do aplicativo Microsoft Entra como um provedor de identidade para autenticação ao serviço de aplicativo WordPress.

1. No portal, navegue até o serviço de aplicativo WordPress.
2. No menu à esquerda, em Configurações, selecione Autenticação>Adicionar provedor de identidade.
3. Na guia Noções básicas, em Provedor de identidade, selecione Microsoft.
4. Em Registo de aplicações, selecione Fornecer os detalhes de um registo de aplicação existente.
   1. Insira o ID do aplicativo (cliente) e o segredo do cliente do registro do aplicativo que você criou na etapa anterior.
   2. Em URL do Emissor, insira um dos seguintes valores para o ponto de extremidade de autenticação: https://login.microsoftonline.com/<tenant-id> ou https://sts.windows.net/<tenantid>. Substitua <tenant-id> pelo ID do diretório (locatário) do registro do aplicativo.

      Importante

      Não use o ponto de extremidade da versão 2.0 para o URL do emissor (URL que termina em /v2.0).

5. Em Audiências de token permitidas, insira o URI da ID do aplicativo no registro do aplicativo. Exemplo: api://<app-id>.
6. Em Verificações adicionais, selecione os valores apropriados para seu ambiente ou use os valores padrão.
7. Configure os valores desejados para as configurações restantes ou use os valores padrão. Selecione Adicionar.

   Nota

   Se você quiser permitir que usuários convidados, bem como usuários conectados, acessem o portal do desenvolvedor no WordPress, você pode habilitar o acesso não autenticado. Em Restringir acesso, selecione Permitir acesso não autenticado. Mais informações

O provedor de identidade é adicionado ao serviço de aplicativo.

Etapa 4: Habilitar a autenticação no portal do desenvolvedor do Gerenciamento de API

Configure o mesmo registro do aplicativo Microsoft Entra como um provedor de identidade para o portal do desenvolvedor do Gerenciamento de API.

1. No portal, navegue até sua instância de Gerenciamento de API.

2. No menu à esquerda, em Portal do desenvolvedor, selecione Identidades>+ Adicionar.

3. Na página Adicionar provedor de identidade, selecione Azure Ative Directory (ID do Microsoft Entra).

4. Insira os valores ID do cliente, Segredo do cliente e Locatário de entrada do registro do aplicativo que você criou em uma etapa anterior. O locatário de entrada é a ID do diretório (locatário) do registro do aplicativo.

5. Em Biblioteca de cliente, selecione MSAL.

6. Aceite os valores padrão para as configurações restantes e selecione Adicionar.

7. Republique o portal do desenvolvedor para aplicar as alterações.

8. Teste a autenticação entrando no portal do desenvolvedor na seguinte URL, substituindo o nome da sua instância de Gerenciamento de API: https://<apim-instance-name>.developer.azure-api.net/signin. Selecione o botão Azure Ative Directory (Microsoft Entra ID) na parte inferior para entrar.

   Ao abri-lo pela primeira vez, você pode ser solicitado a consentir com permissões específicas.

Etapa 5: Definir as configurações do portal do desenvolvedor no Gerenciamento de API

Atualize as configurações do portal do desenvolvedor na instância de Gerenciamento de API para habilitar o CORS e incluir o site do serviço de aplicativo como origem do portal.

1. No portal do Azure, navegue até sua instância de Gerenciamento de API.
2. No menu à esquerda, em Portal do desenvolvedor, selecione Visão geral do portal.
3. Na guia Visão geral do portal, selecione Habilitar CORS.
4. No menu à esquerda, em Portal do desenvolvedor, selecione Configurações do portal.
5. Na guia Configuração do portal auto-hospedado, insira o nome do host do seu WordPress no site do Serviço de Aplicativo como uma origem do portal, substituindo o nome do seu serviço de aplicativo na seguinte URL:https://<yourapp-service-name>.azurewebsites.net
6. Republique o portal do desenvolvedor para aplicar as alterações.

Além disso, atualize a configuração da cors política na instância de Gerenciamento de API para adicionar o site do serviço de aplicativo como uma origem permitida. Esse valor é necessário para permitir chamadas do console de teste do portal do desenvolvedor no site WordPress.

Adicione o seguinte origin valor à sua cors configuração de política:

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

Saiba mais sobre como definir ou editar políticas.

Passo 6: Navegue até o site de administração do WordPress e carregue o tema personalizado

Nesta etapa, você carrega o tema personalizado para o portal do desenvolvedor do Gerenciamento de API no site de administração do WordPress.

1. Abra o site de administração do WordPress no seguinte URL, substituindo o nome do seu serviço de aplicativo: http://<app-service-name>.azurewebsites.net/wp-admin

   Ao abri-lo pela primeira vez, você pode ser solicitado a consentir com permissões específicas.

2. Entre no site de administração do WordPress usando o nome de usuário e a senha que você inseriu ao criar o WordPress no Serviço de Aplicativo.

3. No menu à esquerda, selecione Temas de aparência> e, em seguida, Adicionar novo tema.

4. Selecione Carregar tema. Selecione Escolher arquivo para carregar o arquivo zip do tema do portal do desenvolvedor do API Management que você baixou anteriormente. Selecione Instalar agora.

5. Na tela seguinte, selecione Substituir ativo por carregado.

6. Se solicitado, selecione Ativar.

Etapa 7: Instalar o plug-in do portal do desenvolvedor

1. No site de administração do WordPress, no menu à esquerda, selecione Plugins>Add New Plugin.
2. Selecione Carregar plug-in. Selecione Escolher arquivo para carregar o arquivo zip do plug-in do portal do desenvolvedor do API Management (apim-devportal.zip) que você baixou anteriormente. Selecione Instalar agora.
3. Após a instalação bem-sucedida, selecione Ativar plug-in.
4. No menu à esquerda, selecione Portal do Desenvolvedor de Gerenciamento de API do Azure.
5. Na página Configurações do APIM, insira as seguintes configurações e selecione Salvar alterações:
   • Nome do serviço APIM - Nome da sua instância de Gerenciamento de API
   • Ativar Criar páginas padrão e Criar menu de navegação

Etapa 8: Adicionar uma folha de estilo personalizada

Adicione uma folha de estilo personalizada para o portal do desenvolvedor do Gerenciamento de API.

1. No site de administração do WordPress, no menu à esquerda, selecione Temas de aparência>.

2. Selecione Personalizar e navegue até Estilos.

3. Selecione o ícone de lápis (Editar estilos).

4. No painel Estilos, selecione Mais (três pontos) >CSS adicionais.

5. Em CSS adicional, insira o seguinte 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;
   }
   

6. Salve as alterações. Selecione Salvar novamente para salvar as alterações no tema.

7. Saia do site de administração do WordPress.

Etapa 9: Entrar no portal do desenvolvedor do Gerenciamento de API implantado no WordPress

Acesse o site do WordPress para ver seu novo portal do desenvolvedor de Gerenciamento de API implantado no WordPress e hospedado no Serviço de Aplicativo.

1. Em uma nova janela do navegador, navegue até o site WordPress, substituindo o nome do serviço do aplicativo no seguinte URL: https://<yourapp-service-name>.azurewebsites.net.
2. Quando solicitado, entre usando as credenciais do Microsoft Entra ID para uma conta de desenvolvedor. Se o acesso não autenticado ao portal do desenvolvedor estiver habilitado, selecione Entrar na página inicial do portal do desenvolvedor.

Agora você pode usar os seguintes recursos do portal do desenvolvedor do Gerenciamento de API:

• Iniciar sessão no portal
• Consulte a lista de APIs
• Navegue até a página de detalhes da API e veja a lista de operações
• Testar a API usando chaves de API válidas
• Ver lista de produtos
• Subscrever um produto e gerar chaves de subscrição
• Navegue até a guia Perfil com detalhes da conta e da assinatura
• Sair do portal

A captura de tela a seguir mostra uma página de exemplo do portal do desenvolvedor do Gerenciamento de API hospedado no WordPress.

Resolução de Problemas

Não vejo as páginas mais recentes do portal do desenvolvedor no site do WordPress

Se você não vir as páginas mais recentes do portal do desenvolvedor quando visitar o site do WordPress, verifique se o plug-in do portal do desenvolvedor está instalado, ativado e configurado no site de administração do WordPress. Consulte Instalar o plug-in do portal do desenvolvedor para conhecer as etapas.

Você também pode precisar limpar o cache em seu site WordPress ou na CDN, se um estiver configurado. Como alternativa, talvez seja necessário limpar o cache do navegador.

Estou tendo problemas para entrar ou sair do portal do desenvolvedor

Se você estiver tendo problemas para entrar ou sair do portal do desenvolvedor, limpe o cache do navegador ou visualize o site do portal do desenvolvedor em uma sessão separada do navegador (usando o modo de navegação anônima ou privada).

Não vejo um botão de início de sessão na barra de navegação do portal do programador

Se estiver a utilizar um tema personalizado diferente do fornecido no repositório do plugin, poderá ter de adicionar manualmente a funcionalidade de início de sessão à barra de navegação. Na página inicial, adicione o seguinte bloco de shortcode: [SignInButton]. Saiba mais na documentação do WordPress.

Também pode iniciar sessão ou terminar sessão manualmente introduzindo os seguintes URLs no navegador:

• Iniciar sessão: https://<app-service-name>.azurewebsites.net/.auth/login/aad
• Sair: https://<app-service-name>.azurewebsites.net/.auth/logout

Conteúdos relacionados

• Criar um site WordPress no Serviço de Aplicativo do Azure
• Personalizar o portal do desenvolvedor
• Autorize contas de desenvolvedor usando a ID do Microsoft Entra no Gerenciamento de API do Azure.