Personalizar o portal do desenvolvedor do Gerenciamento de API no WordPress

Artigo
11/05/2024

APLICA-SE A: Desenvolvedor | Básico | Standard | Premium

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

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

Pré-requisitos

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

Observação

Atualmente, não há suporte para o plug-in nas camadas v2 do Gerenciamento de API.
Habilite e publique o portal do desenvolvedor. Para obter 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.
Os arquivos de instalação para o plug-in do portal do desenvolvedor para WordPress e o tema personalizado do WordPress do repositório de plug-ins. Baixe os seguintes arquivos zip da pasta dist no repositório:
- apim-devportal.zip – Arquivo do plug-in
- twentytwentyfour.zip – Arquivo do tema

Etapa 1: criar o WordPress no Serviço de Aplicativo

Para esse cenário, você irá criar um site gerenciado do WordPress hospedado no Serviço de Aplicativo do Azure. A seguir estão os passos resumidos:

No portal do Azure, navegue até https://portal.azure.com/#create/WordPress.WordPress.
Na página Criar WordPress no Serviço de Aplicativo, na guia Básico, insira os detalhes do projeto.

Registre o nome de usuário e a senha do administrador do WordPress em um local 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.
Na guia Suplementos:
1. Selecione os valores padrão recomendados para Email com os Serviços de Comunicação do Azure, CDN do Azure e Armazenamento de Blobs do Azure.
2. Em Rede virtual, selecione o valor Novo ou uma rede virtual existente.
Na guia Implantação, deixe Adicionar slot de preparo desmarcado.
Selecione Revisar + criar para executar a validação final.
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 no Microsoft Entra

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

No portal do Azure, navegue até Registros de aplicativo>+ Novo registro.
Forneça o novo nome do aplicativo e, em Tipos de conta com suporte, selecione Somente contas neste diretório organizacional. Selecione Registrar.
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 em sua instância do Gerenciamento de API e serviço de aplicativo.
No menu à esquerda, em Gerenciar, selecione Autenticação>+ Adicionar uma plataforma.
Na página Configurar plataformas, selecione Web.
Na página Configurar a 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
Selecione novamente + Adicionar uma plataforma. Selecione Aplicativo de página única.
Na página Configurar aplicativo de página única, insira o seguinte URI de redirecionamento, substituindo o nome da sua instância do Gerenciamento de API e selecione Configurar:

https://<apim-instance-name>.developer.azure-api.net/signin
Selecione novamente + Adicionar uma plataforma. Selecione Aplicativo de página única novamente.
Na página Configurar aplicativo de página única, insira o seguinte URI de redirecionamento, substituindo o nome da sua instância do Gerenciamento de API e selecione Configurar:

https://<apim-instance-name>.developer.azure-api.net/
No menu à esquerda, em Gerenciar, selecione Configuração de token>+ Adicionar declaração opcional.
Na página Adicionar declaração opcional, selecione ID e selecione as seguintes declarações: email, family_name, given_name, onprem_sid, preferred_username, upn. Selecione Adicionar.
Quando solicitado, selecione Ativar a permissão de email e perfil do Microsoft Graph.. Selecione Adicionar.
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.
No menu à esquerda, em Gerenciar, selecione Certificados e segredos>+ Novo segredo do cliente.
Defina as configurações do segredo e selecione Adicionar. Copie e armazene com segurança o Valor do segredo imediatamente após ele ser gerado. Você irá precisar desse valor em etapas posteriores para adicionar o aplicativo à sua instância do Gerenciamento de API e ao serviço de aplicativo para autenticação.
No menu à esquerda, em Gerenciar, selecione Expor uma API. Observe o URI da ID do aplicativode negócios 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 do Microsoft Entra como um provedor de identidade para autenticação no serviço de aplicativo WordPress.

No portal, navegue até o serviço de aplicativo WordPress.
No menu à esquerda, em Configurações, selecione Autenticação>Adicionar provedor de identidade.
Na guia Básico, no Provedor de identidade, selecione Microsoft.
Em de Registro de aplicativo, selecione Fornecer os detalhes de um registro de aplicativo existente.
1. Insira a ID do aplicativo (cliente) e o Segredo do cliente do registro do aplicativo que você criou na etapa anterior.
2. Na 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> pela ID do diretório (locatário) do registro do aplicativo.
  
  Importante
  
  Não use o ponto de extremidade versão 2.0 para a URL do emissor (URL que termina em /v2.0).
Em Audiências de token permitidas, insira o URI da ID do Aplicativo do registro do aplicativo. Exemplo: api://<app-id>.
Em Verificações adicionais, selecione os valores apropriados para seu ambiente ou use os valores padrão.
Configure os valores desejados para as configurações restantes ou use os valores padrão. Selecione Adicionar.

Observação

Se você quiser permitir que usuários convidados e usuários conectados acessem o portal do desenvolvedor no WordPress, habilite o acesso não autenticado. Em Restringir o acesso, selecione Permitir acesso não autenticado. Saiba mais

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 de aplicativo do Microsoft Entra como um provedor de identidade para o portal do desenvolvedor do Gerenciamento de API.

No portal do Azure, navegue até a instância do Gerenciamento de API.
No menu à esquerda, em Portal do Desenvolvedor, selecione Identidades>+ Adicionar.
Na página Adicionar provedor de identidade, selecione Azure Active Directory (Microsoft Entra ID).
Insira os valores de 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.
Na Biblioteca de clientes, selecione MSAL.
Aceite os valores padrão para as configurações restantes e selecione Adicionar.
Republicar o portal do desenvolvedor para aplicar as alterações.
Teste a autenticação entrando no portal do desenvolvedor na seguinte URL, substituindo o nome da sua instância do Gerenciamento de API: https://<apim-instance-name>.developer.azure-api.net/signin. Selecione o botão Azure Active Directory (Microsoft Entra ID) na parte inferior para entrar.

Ao abri-lo pela primeira vez, você pode ser solicitado a conceder 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 do Gerenciamento de API para habilitar o CORS e incluir o site do serviço de aplicativo como uma origem do portal.

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

Além disso, atualize a configuração de política cors na instância do 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 do WordPress.

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

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

Saiba mais sobre como definir ou editar políticas.

Etapa 6: navegar até o site de administração do WordPress e carregar o tema personalizado

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

Importante

Recomendamos que você carregue o tema fornecido no repositório de plug-in. O tema é baseado no tema Twenty Twenty Four e é personalizado para dar suporte à funcionalidade do portal do desenvolvedor no WordPress. Se você optar por usar um tema diferente, algumas funcionalidades podem não funcionar conforme o esperado ou exigir personalização adicional.

Abra o site de administração do WordPress na 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 conceder permissões específicas.
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.
No menu à esquerda, selecione Aparência>Temas e, em seguida, Adicionar Novo Tema.
Selecione Carregar Tema. Selecione Escolher Arquivo para carregar o arquivo zip do tema do portal do desenvolvedor do Gerenciamento de API que você baixou anteriormente. Selecione Instalar Agora.
Na próxima tela, selecione Substituir ativo por carregado.
Se solicitado, selecione Ativar.

Observação

Se o site do WordPress incluir um plug-in de cache, limpe o cache depois de ativar o tema para garantir que as alterações entrem em vigor.

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

No site de administração do WordPress, no menu à esquerda, selecione Plug-ins>Adicionar Novo Plug-in.
Selecione Carregar Plug-in. Selecione Escolher Arquivo para carregar o arquivo zip do plug-in do portal do desenvolvedor do Gerenciamento de API (apim-devportal.zip) que você baixou anteriormente. Selecione Instalar Agora.
Após a instalação bem-sucedida, selecione Ativar Plug-in.
No menu à esquerda, selecione Portal do Desenvolvedor do Gerenciamento de API do Azure.
Na página Configurações do APIM, insira as seguintes configurações e selecione Salvar Alterações:
- Nome do serviço APIM: nome da instância do Gerenciamento de API
- Habilitar Criar páginas padrão e Criar menu de navegação

Etapa 8: adicionar uma folha de estilos personalizada

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

No site de administração do WordPress, no menu à esquerda, selecione Aparência>Temas.
Selecione Personalizar e, em seguida, navegue até Estilos.
Selecione o ícone de lápis (Editar Estilos).
No painel Estilos, selecione Mais (três pontos) > CSS adicional.

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

Salve as alterações. Selecione Salvar novamente para salvar as alterações no tema.
Faça logoff 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 do Gerenciamento de API implantado no WordPress e hospedado no Serviço de Aplicativo.

Em uma nova janela do navegador, navegue até o site do WordPress, substituindo o nome do seu serviço de aplicativo na seguinte URL: https://<yourapp-service-name>.azurewebsites.net.
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.

Observação

Você só pode entrar no portal do desenvolvedor no WordPress usando as credenciais do Microsoft Entra ID. Não há suporte para a autenticação básica.

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

Entrar no portal
Conferir a lista de APIs
Navegar até a página de detalhes da API e ver a lista de operações
Testar a API usando chaves de API válidas
Conferir a lista de produtos
Assinar um produto e gerar chaves de assinatura
Navegar 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.

Captura de tela do portal do desenvolvedor hospedado no WordPress.

Soluçã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 ao 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 obter as etapas.

Talvez você também precise limpar o cache em seu site do WordPress ou na CDN, se estiver configurado. Como alternativa, talvez seja necessário limpar o cache no 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 abra o site do portal do desenvolvedor em uma sessão separada do navegador (usando o modo de navegação anônimo ou privado).

Se você estiver usando um tema personalizado diferente do fornecido no repositório de plug-in, talvez seja necessário adicionar a funcionalidade de entrada à barra de navegação manualmente. Na página inicial, adicione o seguinte bloco de shortcode: [SignInButton]. Saiba mais na documentação do WordPress.

Você também pode entrar ou sair manualmente inserindo as seguintes URLs em seu navegador:

Entrar: https://<app-service-name>.azurewebsites.net/.auth/login/aad
Sair: https://<app-service-name>.azurewebsites.net/.auth/logout

Compartilhar via

Personalizar o portal do desenvolvedor do Gerenciamento de API no WordPress

Pré-requisitos

Etapa 1: criar o WordPress no Serviço de Aplicativo

Etapa 2: criar um novo registro de aplicativo no Microsoft Entra

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

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

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

Etapa 6: navegar até o site de administração do WordPress e carregar o tema personalizado

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

Etapa 8: adicionar uma folha de estilos personalizada

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

Solução de problemas

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

Estou tendo problemas para entrar ou sair do portal do desenvolvedor

Comentários

Recursos adicionais

Compartilhar via

Personalizar o portal do desenvolvedor do Gerenciamento de API no WordPress

Pré-requisitos

Etapa 1: criar o WordPress no Serviço de Aplicativo

Etapa 2: criar um novo registro de aplicativo no Microsoft Entra

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

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

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

Etapa 6: navegar até o site de administração do WordPress e carregar o tema personalizado

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

Etapa 8: adicionar uma folha de estilos personalizada

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

Solução de problemas

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

Estou tendo problemas para entrar ou sair do portal do desenvolvedor

Não vejo um botão de entrada na barra de navegação do portal do desenvolvedor

Conteúdo relacionado

Comentários

Recursos adicionais