Partilhar via


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: círculo verde com um símbolo de marca de seleção branco que indica que o conteúdo a seguir se aplica a locatários externos. 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.

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.