Configurar um proxy reverso para um aplicativo de página única que chama a API de autenticação nativa usando o Aplicativo de Funções do Azure (versão prévia)

Aplica-se a: Locatários de força de trabalho Locatários externos (saiba mais)

Neste artigo, você aprenderá a configurar um proxy reverso usando o Azure Functions App para gerenciar cabeçalhos CORS em um ambiente de teste para um aplicativo de página única (SPA) que utiliza API de autenticação nativa.

A API de autenticação nativa não dá suporte ao CORS (Compartilhamento de Recursos entre Origens). Portanto, um SPA (aplicativo de página única) que usa essa API para autenticação de usuário não pode fazer solicitações bem-sucedidas do código JavaScript de front-end. Para resolver esse problema, você precisa adicionar um servidor proxy entre o SPA e a API de autenticação nativa. Esse servidor proxy injeta os cabeçalhos CORS apropriados na resposta.

Essa solução é para fins de teste e NÃO deve ser usada em um ambiente de produção. Se você estiver procurando uma solução para usar em um ambiente de produção, recomendamos que você utilize o Azure Front Door. Veja as instruções em Usar o Azure Front Door como um proxy reverso para gerenciar cabeçalhos CORS para SPA em produção.

Pré-requisitos

• Uma assinatura do Azure. Crie uma conta gratuitamente.
• Registre o Microsoft.App provedor de recursos, consulte Como registrar o provedor de recursos. Você só precisa concluir esta etapa uma vez para cada assinatura recém-criada.
• Instale a interface de linha de comando (CLI) do Desenvolvedor do Azure (azd).
• Um SPA de exemplo que você pode acessar por meio de uma URL, como http://www.contoso.com:
  • Você pode usar o aplicativo React descrito em Início Rápido: Conectar usuários em um exemplo de React SPA usando a API de autenticação nativa. No entanto, não configure ou execute o servidor proxy, pois este guia aborda essa configuração.
  • Depois de executar o aplicativo, registre a URL do aplicativo para uso posterior neste guia.

Criar proxy reverso em um aplicativo de função do Azure usando o template da CLI do Desenvolvedor do Azure (azd)

1. Para inicializar o modelo azd, execute o seguinte comando:

   azd init --template https://github.com/azure-samples/ms-identity-extid-cors-proxy-function
   

   Quando solicitado, insira um nome para o ambiente azd. Esse nome é usado como um prefixo para o grupo de recursos, portanto, ele deve ser exclusivo em sua assinatura do Azure.

2. Para entrar no Azure, execute o seguinte comando:

   azd auth login
   

3. Para criar, provisionar e implantar os recursos do aplicativo, execute o seguinte comando:

   azd up
   

   Quando solicitado, insira as seguintes informações para concluir a criação de recursos:

   • Azure Location: a localização do Azure em que seus recursos são implantados.
   • Azure Subscription: A Assinatura do Azure em que seus recursos estão implantados.
   • corsAllowedOrigin: o domínio de origem para permitir solicitações CORS no formato SCHEME://DOMAIN:PORT, por exemplo, http://localhost:3000.
   • tenantSubdomain: o subdomínio do seu locatário externo que estamos intermediando. Por exemplo, se o domínio primário do locatário for contoso.onmicrosoft.com, use contoso. Se você não tiver o subdomínio do locatário, saiba como ler os detalhes do seu locatário.

Testar seu SPA de exemplo com o proxy reverso

1. No SPA de exemplo, abra o arquivo API\React\ReactAuthSimple\src\config.ts e substitua:

   • o valor de BASE_API_URL, http://localhost:3001/api, com https://Enter_App_Function_Name_Here.azurewebsites.net.
   • substitua o placeholder Enter_App_Function_Name_Here pelo nome do seu Function App. Se necessário, execute novamente o SPA de exemplo.

2. Navegue até a URL de SPA de exemplo e teste os fluxos de inscrição, entrada e redefinição de senha. Seu aplicativo SPA deve funcionar corretamente, pois o proxy reverso gerencia cabeçalhos CORS corretamente.

Conteúdo relacionado

• Usar o Azure Front Door como um proxy reverso no ambiente de produção para um SPA (Aplicativo de Página Única) que utiliza autenticação nativa.