Início Rápido: Conectar usuários em um aplicativo de página única do React usando a autenticação nativa

Aplica-se a: Locatários externos (saiba mais)

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

Pré-requisitos

• Uma conta do Azure com uma assinatura ativa. Se você 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
  • Desenvolvedor de aplicativos
• Um inquilino externo. Se você não tiver um, crie um novo locatário externo no Centro de administração do Microsoft Entra.
• Um fluxo de usuário. 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
  • Sobrenome
• Se você ainda não tiver feito isso, Registre um aplicativo no Centro de administração do Microsoft Entra. Certifique-se de que:
  • Registre a ID do aplicativo (cliente) e a ID do diretório (locatário) para uso posterior.
  • Conceda consentimento do administrador ao registro do aplicativo.
• Associar o registro do aplicativo ao fluxo do usuário
• Node.js.
• Visual Studio Code ou qualquer outro editor de código.

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

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

1. Na página de registros do aplicativo, selecione o registro do aplicativo para o qual você deseja habilitar fluxos de autenticação nativa e de cliente público.
2. Em Gerenciar, selecione Autenticação.
3. Em Configurações avançadas, permita os fluxos do cliente público:
   1. Em Habilitar os seguintes fluxos móveis e de desktop, selecione Sim.
   2. Em Habilitar a autenticação nativa, escolha Sim.
4. Selecione o botão Salvar.

Clonar ou baixar o SPA de exemplo

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 insira o seguinte comando:

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

Como alternativa, Baixe o exemplo e, em seguida, extraia-o para um caminho de arquivo em que o comprimento do nome tenha menos de 260 caracteres.

Instalar as 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ódigo, abra o arquivo src\config.ts.

2. Localize o espaço reservado Enter_the_Application_Id_Here e substitua-o pela 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 nativa não dão suporte a CORS (compartilhamento de recursos entre origens) portanto, você precisa configurar um servidor proxy entre seu aplicativo SPA e as APIs.

Este exemplo de código inclui um servidor proxy CORS que encaminha solicitações para pontos de extremidade 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 arquivo proxy.config.js e encontre o espaço reservado:

• tenantSubdomain 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 o nome do locatário, saiba como ler os detalhes do locatá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 seu 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 em uma conta, selecione Inscrever-see, em seguida, siga as instruções.

5. Depois de se inscrever, teste fazer login e a redefinição de senha selecionando Entrar e Redefinir Senha respectivamente.

Habilitar o login com um alias ou nome de usuário

Você pode permitir que os usuários que entrarem com um endereço de email e senha também entrem com um nome de usuário e senha. O nome de usuário também chamado de identificador de entrada alternativo pode ser uma ID do cliente, um número de conta ou outro identificador que você escolhe usar como nome de usuário.

Você pode atribuir nomes de usuário à conta de usuário manualmente por meio do Centro de administração do Microsoft Entra ou automatizá-la em seu aplicativo por meio da API do Microsoft Graph.

Use as etapas no artigo Entrar com um alias ou nome de usuário para permitir que os usuários façam login usando um nome de usuário no seu aplicativo.

1. Habilitar nome de usuário no login.
2. Crie usuários com nome de usuário no centro de administração ou atualize os usuários existentes adicionando um nome de usuário. Como alternativa, você também pode automatizar a criação e a atualização do usuário em seu aplicativo usando a API do Microsoft Graph.

Conteúdo relacionado

• Configurar um proxy reverso para um aplicativo de página única que usa a API de autenticação nativa por meio do aplicativo de funções do Azure.
• Usar o Azure Front Door como um proxy reverso no ambiente de produção para um aplicativo de página única que usa a autenticação nativa.
• Criar do zero um aplicativo React de página única que utiliza a API nativa de autenticação.