Quickstart: Inicie sessão com utilizadores numa aplicação React de página única usando autenticação nativa

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 assinatura 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.

Permitir início de sessão com um alias ou nome de utilizador

Pode permitir que os utilizadores que iniciam sessão com um endereço de e-mail e palavra-passe também iniciem sessão com um nome de utilizador e palavra-passe. O nome de utilizador, também chamado de identificador alternativo de entrada, pode ser um ID de cliente, número de conta ou outro identificador que escolha usar como nome de utilizador.

Pode atribuir nomes de utilizador manualmente à conta de utilizador através do centro de administração do Microsoft Entra ou automatizá-lo na sua aplicação através da API Microsoft Graph.

Siga os passos no Iniciar sessão com um alias ou nome de utilizador para permitir que os seus utilizadores iniciem sessão usando um nome de utilizador na sua aplicação.

1. Ativar o nome de utilizador no início de sessão.
2. Crie utilizadores com nome de utilizador no centro de administração ou atualize utilizadores existentes adicionando um nome de utilizador. Alternativamente, pode também automatizar a criação e atualização de utilizadores na sua aplicação usando a Microsoft Graph API.

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.