Tutorial: Configurar o servidor proxy CORS para gerenciar cabeçalhos CORS para autenticação nativa (versão prévia)

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

Neste tutorial, você aprenderá a configurar o servidor proxy CORS para gerenciar cabeçalhos CORS ao interagir com a API de autenticação nativa de um React SPA (aplicativo de página única). O servidor proxy CORS é uma solução para a incapacidade da API de autenticação nativa de dar suporte a CORS (compartilhamento de recursos entre origens).

Neste tutorial, você:

• Crie um servidor proxy CORS.
• Configure o servidor proxy CORS para chamar a API de autenticação nativa.
• Execute e teste seu aplicativo React.

Pré-requisitos

• Conclua as etapas no Tutorial: Criar um aplicativo de página única do React para conectar usuários a um locatário externo usando a API de autenticação nativa.

Criar o servidor proxy CORS

1. Na pasta raiz do aplicativo React, crie um arquivo chamado cors.jse 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 aplicativo React, crie um arquivo chamado proxy.config.jse 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 do diretório (locatário). 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.

   • tenantId e substitua-o pela ID do Diretório (locatário). Se você não tiver a ID do locatário, saiba como ler os detalhes do locatário.

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 aplicativo:

   cd reactspa
   

2. Para iniciar o servidor proxy CORS, execute o seguinte comando em 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/. Um formulário de inscrição é exibido.

5. Para se inscrever em uma conta, insira seus detalhes, selecione o botão Inscrever-se e 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, você pode atualizar o aplicativo React para conectar um usuário ou redefinir a senha do usuário.

Informações adicionais sobre o servidor proxy CORS

Neste tutorial, você configurará um servidor CORS local. No entanto, você pode configurar um servidor proxy reverso para gerenciar cabeçalhos CORS usando o Aplicativo de Funções do Azure, conforme explicado em um 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 aplicativo de funções do Azure para configurar seu servidor proxy CORS.

Conteúdo relacionado

• Tutorial: conectar usuários em um aplicativo de página única React usando autenticação nativa.
• Tutorial: Redefinir senha em um aplicativo de página única do React usando autenticação nativa.