Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
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:
- 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.
- Em Gerir, selecione Autenticação.
- Em Configurações avançadas, permita fluxos de clientes públicos:
- Para habilite os seguintes fluxos para dispositivos móveis e para ambiente de trabalho selecione Sim.
- Para Ativar autenticação nativa, selecione Sim.
- 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
Abra uma janela do terminal e navegue até o diretório que contém o aplicativo de exemplo React:
cd API\React\ReactAuthSimple
Execute o seguinte comando para instalar as dependências do aplicativo:
npm install
Configurar o aplicativo React de exemplo
No editor de códigos, abra arquivo src\config.ts.
Encontre o espaço reservado
Enter_the_Application_Id_Here
e substitua-o pelo ID do aplicativo (cliente) do aplicativo que você registrou anteriormente.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 forcontoso.onmicrosoft.com
, usecontoso
. 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.
Na janela do terminal, execute os seguintes comandos para iniciar o servidor proxy CORS:
cd API\React\ReactAuthSimple npm run cors
Para iniciar o aplicativo React, abra outra janela do terminal e execute os seguintes comandos:
cd API\React\ReactAuthSimple npm start
Abra um navegador da Web e vá para
http://localhost:3000/
.Para se inscrever numa conta, selecione Inscrever-see, em seguida, siga as instruções.
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.