Tutorial: Configurar o servidor proxy CORS para gerenciar cabeçalhos CORS para autenticação nativa (visualização)

Aplica-se a: Inquilinos externos (saiba mais)

Neste tutorial, você aprenderá a configurar o servidor proxy CORS para gerenciar cabeçalhos CORS enquanto interage com a API de autenticação nativa de um aplicativo de página única (SPA) React. O servidor proxy CORS é uma solução para a incapacidade da API de autenticação nativa de suportar Partilha de Recursos entre Origens (CORS).

Neste tutorial, você:

Pré-requisitos

• Conclua as etapas no Tutorial: Criar uma aplicação de página única em React para autenticar utilizadores num inquilino externo utilizando a API de autenticação nativa.

Criar o servidor proxy CORS

1. Na pasta raiz do seu aplicativo React, crie um arquivo chamado cors.jse, em seguida, adicione o seguinte código:

   const http = require("http");
   const https = require("https");
   const url = require("url");
   const proxyConfig = require("./proxy.config.js");
   
   http
   .createServer((req, res) => {
       const reqUrl = url.parse(req.url);
       const domain = url.parse(proxyConfig.proxy).hostname;
       if (reqUrl.pathname.startsWith(proxyConfig.localApiPath)) {
   
           const targetUrl = proxyConfig.proxy + reqUrl.pathname?.replace(proxyConfig.localApiPath, "") + (reqUrl.search || "");
   
           console.log("Incoming request -> " + req.url + " ===> " + reqUrl.pathname);
   
           const proxyReq = https.request(
               targetUrl,
               {
                   method: req.method,
                   headers: {
                       ...req.headers,
                       host: domain,
                   },
               },
               (proxyRes) => {
                   res.writeHead(proxyRes.statusCode, {
                       ...proxyRes.headers,
                       "Access-Control-Allow-Origin": "*",
                       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
                       "Access-Control-Allow-Headers": "Content-Type, Authorization",
                   });
   
                   proxyRes.pipe(res);
               }
           );
   
           proxyReq.on("error", (err) => {
               console.error("Error with the proxy request:", err);
               res.writeHead(500, { "Content-Type": "text/plain" });
               res.end("Proxy error.");
           });
   
           req.pipe(proxyReq);
       } else {
           res.writeHead(404, { "Content-Type": "text/plain" });
           res.end("Not Found");
       }
   })
   .listen(proxyConfig.port, () => {
       console.log("CORS proxy running on http://localhost:3001");
       console.log("Proxying from " + proxyConfig.localApiPath + " ===> " + proxyConfig.proxy);
   });
   

2. Na pasta raiz do seu aplicativo React, crie um arquivo chamado proxy.config.jse, em seguida, adicione o seguinte código:

       const tenantSubdomain = "Enter_the_Tenant_Subdomain_Here";
       const tenantId = "Enter_the_Tenant_Id_Here";
   
       const config = {
           localApiPath: "/api",
           port: 3001,
           proxy: `https://${tenantSubdomain}.ciamlogin.com/${tenantId}`,
       };
       module.exports = config;
   

   • Localize o espaço reservado Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio Directory (locatário). Por exemplo, se o domínio principal do arrendatário for contoso.onmicrosoft.com, utilize contoso. Se não tiver o subdomínio do locatário, saiba como consultar os detalhes do locatário.

   • tenantId e substitua-o pelo ID do diretório (inquilino). Se não tiver o seu ID de inquilino, saiba como ler os detalhes do seu inquilino.

3. Abra package.json arquivo e adicione o seguinte comando no scripts objeto:

   "cors": "node cors.js",
   

Neste ponto, o aplicativo React e o servidor proxy CORS estão prontos para serem executados.

Executar e testar seu aplicativo

1. Abra uma janela do terminal e navegue até a pasta raiz do seu aplicativo:

   cd reactspa
   

2. Para iniciar o servidor proxy CORS, execute o seguinte comando no seu terminal:

   npm run cors
   

3. Para iniciar o aplicativo React, abra outra janela do terminal e execute o seguinte comando:

   cd reactspa
   npm start
   

4. Abra um navegador da Web e navegue até http://localhost:3000/. É apresentado um formulário de inscrição.

5. Para se inscrever numa conta, introduza os seus dados, selecione o botão Inscrever-se e, em seguida, siga as instruções.

Neste ponto, você criou com êxito um aplicativo React que pode inscrever um usuário usando a API de autenticação nativa. Em seguida, poderá atualizar a aplicação React para autenticar um utilizador ou redefinir a senha do utilizador.

Informações adicionais sobre o servidor proxy CORS

Neste tutorial, você configura um servidor CORS local. No entanto, você pode configurar um servidor proxy reverso para gerenciar cabeçalhos CORS usando o Azure Function App, conforme explicado num ambiente de teste.

Em um ambiente de produção, você pode usar as etapas em Configurar um proxy reverso para um aplicativo de página única que usa a API de autenticação nativa usando o Azure Function App para configurar seu servidor proxy CORS.

Conteúdo relacionado

• Tutorial: Inicie a sessão dos utilizadores numa aplicação React de página única, utilizando autenticação nativa.
• Tutorial: Redefinir senha em um aplicativo de página única React usando autenticação nativa.