Guia de início rápido: autenticar utilizadores numa aplicação de página única em React utilizando autenticação nativa (pré-visualização)

Aplica-se a: Inquilinos externos (saiba mais)

Neste início rápido, você usa um aplicativo de página única (SPA) React para demonstrar como autenticar usuários usando API de autenticação nativa. O aplicativo de exemplo demonstra a inscrição, entrada, saída e redefinição de senha do usuário com um email e uma senha.

Pré-requisitos

** Uma conta do Azure com uma subscrição ativa. Se ainda não tiver uma, Crie uma conta gratuitamente.

• Essa conta do Azure deve ter permissões para gerenciar aplicativos. Qualquer uma das seguintes funções do Microsoft Entra inclui as permissões necessárias:
  • Administrador de aplicativos
  • Programador de Aplicações
• Um locatário externo. Se não tiver, crie um novo locatário externo no centro de administração do Microsoft Entra.
• Um fluxo de usuários. Para obter mais informações, consulte Criar fluxos de usuário de inscrição de autoatendimento para aplicativos em locatários externos. Verifique se o fluxo de usuário inclui os seguintes atributos de usuário:
  • Nome próprio
  • Sobrenome
• Se ainda não o fez, Registe uma aplicação no centro de administração do Microsoft Entra. Certifique-se de:
  • Registre a ID do aplicativo (cliente) e a ID do diretório (locatário) para uso posterior.
  • Conceda consentimento de administrador para o registro do aplicativo.
• Associar o registro do aplicativo ao fluxo de usuários
• Node.js.
• Visual Studio Code ou outro editor de código.

Habilitar fluxos de autenticação nativa e de cliente público

Para especificar que este aplicativo é um cliente público e pode usar autenticação nativa, habilite o cliente público e os fluxos de autenticação nativa:

1. Na página de registros de aplicativos, selecione o registro do aplicativo para o qual você deseja habilitar fluxos de autenticação nativa e de cliente público.
2. Em Gerir, selecione Autenticação.
3. Em Configurações avançadas, permita fluxos de clientes públicos:
   1. Para habilite os seguintes fluxos para dispositivos móveis e para ambiente de trabalho selecione Sim.
   2. Para Ativar autenticação nativa, selecione Sim.
4. Selecione o botão Salvar.

Clone ou baixe SPA de amostra

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip.

Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e digite o seguinte comando:

git clone https://github.com/Azure-Samples/ms-identity-ciam-native-javascript-samples.git

Como alternativa, Baixar o exemploe, em seguida, extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

Instalar dependências do projeto

1. Abra uma janela do terminal e navegue até o diretório que contém o aplicativo de exemplo React:

   cd API\React\ReactAuthSimple
   

2. Execute o seguinte comando para instalar as dependências do aplicativo:

   npm install
   

Configurar o aplicativo React de exemplo

1. No editor de códigos, abra arquivo src\config.ts.

2. Encontre o espaço reservado Enter_the_Application_Id_Here e substitua-o pelo ID do aplicativo (cliente) do aplicativo que você registrou anteriormente.

3. Salve as alterações.

Configurar o servidor proxy CORS

As APIs de autenticação nativas não suportam Partilha de Recursos de Origem Cruzada (CORS), por isso deve configurar um servidor proxy entre a sua aplicação SPA e as APIs.

Este exemplo de código inclui um servidor proxy CORS que encaminha solicitações para endpoints de URL da API de autenticação nativa. O servidor proxy CORS é um servidor Node.js que escuta na porta 3001.

Para configurar o servidor proxy, abra o ficheiro proxy.config.js e, em seguida, localize o espaço reservado:

• tenantSubdomain e substitua-o pelo subdomínio Directory (tenant). Por exemplo, se o domínio principal do locatário for contoso.onmicrosoft.com, use contoso. Se não tiver o subdomínio do seu arrendatário, saiba como consultar os detalhes do arrendatário.
• tenantId e substitua-o pelo ID do diretório (tenant). Se não tiver o seu ID de arrendatário, saiba como consultar os detalhes do seu arrendatário.

Executar e testar seu aplicativo

Agora você configurou o aplicativo de exemplo e ele está pronto para ser executado.

1. Na janela do terminal, execute os seguintes comandos para iniciar o servidor proxy CORS:

   cd API\React\ReactAuthSimple
   npm run cors
   

2. Para iniciar o aplicativo React, abra outra janela do terminal e execute os seguintes comandos:

   cd API\React\ReactAuthSimple
   npm start
   

3. Abra um navegador da Web e vá para http://localhost:3000/.

4. Para se inscrever numa conta, selecione Inscrever-see, em seguida, siga as instruções.

5. Depois de se inscrever, teste o início de sessão e a redefinição de palavra-passe selecionando Iniciar sessão e Redefinir palavra-passe, respetivamente.

Conteúdo relacionado

• Configure um proxy reverso para um aplicativo de página única que usa a API de autenticação nativa usando o Azure Function App.
• Utilize o Azure Front Door como proxy reverso num ambiente de produção para uma aplicação de página única que utiliza autenticação nativa.
• Desenvolva uma aplicação de página única em React que utilize a API nativa de autenticação desde o princípio.