Share via

Iniciar sessão de utilizadores num exemplo React aplicação de página única (SPA)

  • Artigo

Este guia utiliza um exemplo React aplicação de página única (SPA) para demonstrar como adicionar autenticação a um SPA. Este SPA permite que os utilizadores iniciem sessão e terminem sessão com o utilizador Microsoft Entra ID do inquilino dos clientes. O exemplo utiliza a Biblioteca de Autenticação da Microsoft para JavaScript (MSAL.js) para processar a autenticação.

Pré-requisitos

  • Embora qualquer IDE que suporte React aplicações possa ser utilizado, o Visual Studio Code é utilizado para este guia. Pode ser transferido a partir da página Transferências .
  • Node.js.
  • Microsoft Entra ID do inquilino dos clientes. Se ainda não tiver uma, inscreva-se numa avaliação gratuita.

Registar o SPA no centro de administração do Microsoft Entra

Para permitir que a sua aplicação inicie sessão de utilizadores com Microsoft Entra, Microsoft Entra ID para os clientes tem de ter conhecimento da aplicação que criar. O registo da aplicação estabelece uma relação de confiança entre a aplicação e Microsoft Entra. Quando regista uma aplicação, o ID Externo gera um identificador exclusivo conhecido como ID de Aplicação (cliente), um valor utilizado para identificar a sua aplicação ao criar pedidos de autenticação.

Os passos seguintes mostram-lhe como registar a sua aplicação no centro de administração do Microsoft Entra:

  1. Inicie sessão no centro de administração do Microsoft Entra como, pelo menos, um Programador de Aplicações.

  2. Se tiver acesso a vários inquilinos, utilize o filtro Diretórios + subscrições no menu superior para mudar para o inquilino do cliente.

  3. Navegue paraAplicações> de Identidade>Registos de aplicações.

  4. Selecione + Novo registo.

  5. Na página Registar uma aplicação apresentada;

    1. Introduza um Nome de aplicação relevante que seja apresentado aos utilizadores da aplicação, por exemplo ciam-client-app.
    2. Em Tipos de conta suportados, selecione Contas apenas neste diretório organizacional.

  6. Selecione Registar.

  7. O painel Descrição Geral da aplicação é apresentado após o registo com êxito. Registe o ID da Aplicação (cliente) a ser utilizado no código fonte da aplicação.

Para especificar o seu tipo de aplicação para o registo de aplicações, siga estes passos:

  1. Em Gerir, selecione Autenticação.
  2. Na página Configurações da plataforma , selecione Adicionar uma plataforma e, em seguida, selecione a opção SPA .
  3. Para os URIs de Redirecionamento, introduzahttp://localhost:3000/auth/redirect
  4. Selecione Configurar para guardar as alterações.
  5. Na página Configurações da plataforma , na nova aplicação de página única que apareceu, selecione Adicionar URI e, em seguida, introduza http://localhost:3000/
  6. Selecione Guardar para guardar as alterações e certifique-se de que ambos os URIs estão listados.

Conceder permissões de API

  1. Na página Registos de aplicações, selecione a aplicação que criou (como ciam-client-app) para abrir a página Descrição geral.

  2. Em Gerir, selecione Permissões de API.

  3. Em Permissões configuradas, selecione Adicionar uma permissão.

  4. Selecione o separador APIs da Microsoft .

  5. Na secção APIs da Microsoft mais utilizadas , selecione Microsoft Graph.

  6. Selecione opção Permissões delegadas .

  7. Na secção Selecionar permissões , procure e selecione permissões openid e offline_access .

  8. Selecione o botão Adicionar permissões .

  9. Neste momento, atribuiu as permissões corretamente. No entanto, uma vez que o inquilino é inquilino de um cliente, os próprios utilizadores não podem consentir estas permissões. Como administrador, tem de dar consentimento a estas permissões em nome de todos os utilizadores no inquilino:

    1. Selecione Conceder consentimento ao administrador para <o seu nome> de inquilino e, em seguida, selecione Sim.
    2. Selecione Atualizar e, em seguida, verifique se a opção Concedido para <o seu nome> de inquilino é apresentada em Estado para ambos os âmbitos.

Criar um fluxo de utilizador

Siga estes passos para criar um fluxo de utilizador que um cliente pode utilizar para iniciar sessão ou inscrever-se numa aplicação.

  1. Inicie sessão no centro de administração do Microsoft Entra como, pelo menos, um Administrador de Fluxo de Utilizador de ID Externo.

  2. Se tiver acesso a vários inquilinos, utilize o filtro Diretórios + subscrições no menu superior para mudar para o inquilino do cliente.

  3. Navegue até Fluxos de utilizadorde Identidades Externas> de Identidades>Externas.

  4. Selecione + Novo fluxo de utilizador.

  5. Na página Criar :

    1. Introduza um Nome para o fluxo de utilizador, como SignInSignUpSample.

    2. Na lista Fornecedores de identidade, selecione Email Contas. Este fornecedor de identidade permite que os utilizadores iniciem sessão ou se inscrevam com o respetivo endereço de e-mail.

      Nota

      Os fornecedores de identidade adicionais só serão listados aqui depois de configurar a federação com os mesmos. Por exemplo, se configurar a federação com o Google ou o Facebook, poderá selecionar esses fornecedores de identidade adicionais aqui.

    3. Em Email contas, pode selecionar uma das duas opções. Para este tutorial, selecione Email com palavra-passe.

      • Email com palavra-passe: permite que os novos utilizadores se inscrevam e iniciem sessão com um endereço de e-mail como o nome de início de sessão e uma palavra-passe como credencial de primeiro fator.

      • Email código de acesso único: permite que os novos utilizadores se inscrevam e iniciem sessão com um endereço de e-mail como o nome de início de sessão e o código de acesso por e-mail único como a sua primeira credencial de fator.

        Nota

        Email código de acesso único tem de estar ativado ao nível do inquilino (Todos os Fornecedores> de Identidade Email código de acesso único) para que esta opção esteja disponível ao nível do fluxo de utilizador.

    4. Em Atributos de utilizador, selecione os atributos que pretende recolher do utilizador após a inscrição. Ao selecionar Mostrar mais, pode escolher atributos e afirmações para País/Região, Nome a Apresentar e Código Postal. Selecione OK. (Os utilizadores só são solicitados atributos quando se inscrevem pela primeira vez.)

  6. Selecione Criar. O novo fluxo de utilizador é apresentado na lista Fluxos de utilizador. Se necessário, atualize a página.

Para ativar a reposição personalizada de palavra-passe, utilize os passos no artigo Ativar a reposição personalizada de palavra-passe .

Associar o SPA ao fluxo de utilizador

Embora muitas aplicações possam ser associadas ao fluxo de utilizador, uma única aplicação só pode ser associada a um fluxo de utilizador. Um fluxo de utilizador permite a configuração da experiência do utilizador para aplicações específicas. Por exemplo, pode configurar um fluxo de utilizador que requer que os utilizadores iniciem sessão ou se inscrevam com um número de telefone ou endereço de e-mail.

  1. No menu da barra lateral, selecione Identidade.

  2. Selecione Identidades Externas e, em seguida, Fluxos de utilizador.

  3. Na página Fluxos de utilizador, selecione o Nome do fluxo de utilizador que criou anteriormente, por exemplo SignInSignUpSample.

  4. Em Utilizar, selecione Aplicações.

  5. Selecione Adicionar aplicação.

  6. Selecione a aplicação na lista, como ciam-client-app ou utilize a caixa de pesquisa para localizar a aplicação e, em seguida, selecione-a.

  7. Escolha Selecionar.

Clonar ou transferir o SPA de exemplo

Para obter o SPA de exemplo, pode escolher uma das seguintes opções:

  • Clone o repositório com o Git:

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

  • Transferir o exemplo

Se optar por transferir o .zip ficheiro, extraia o ficheiro de aplicação de exemplo para uma pasta onde o comprimento total do caminho seja de 260 ou menos carateres.

Instalar dependências do projeto

  1. Abra uma janela de terminal no diretório raiz do projeto de exemplo e introduza o seguinte fragmento para navegar para a pasta do projeto:

    cd 1-Authentication\1-sign-in-react\SPA

  2. Instale as dependências do projeto:

    npm install

Configurar o SPA de exemplo

  1. Abra SPA\src\authConfig.js e substitua o seguinte pelos valores obtidos a partir do centro de administração do Microsoft Entra
    • clientId - O identificador da aplicação, também conhecido como cliente. Substitua Enter_the_Application_Id_Here pelo valor de ID da Aplicação (cliente) que foi registado anteriormente na página de descrição geral da aplicação registada.
    • authority - A instância do fornecedor de identidade e a audiência de início de sessão da aplicação. Substitua Enter_the_Tenant_Name_Here pelo nome do seu ID de Microsoft Entra para o inquilino dos clientes.
    • O ID do Inquilino é o identificador do inquilino onde a aplicação está registada. Substitua o _Enter_the_Tenant_Info_Here pelo valor de ID do Diretório (inquilino) que foi registado anteriormente na página de descrição geral da aplicação registada.
  2. Guarde o ficheiro.

Executar o projeto e iniciar sessão

Todos os fragmentos de código necessários foram adicionados, pelo que a aplicação pode agora ser chamada e testada num browser.

  1. Abra um novo terminal ao selecionar Terminal>Novo Terminal.

  2. Execute o seguinte comando para iniciar o servidor Web.

    cd 1-Authentication\1-sign-in-react\SPA
npm start

  3. Abra um browser e navegue até http://localhost:3000/.

  4. Inicie sessão com uma conta registada no Microsoft Entra ID do inquilino dos clientes.

  5. Depois de iniciar sessão, o nome a apresentar é apresentado junto ao botão Terminar sessão .

Passos seguintes

Ativar a reposição de palavras-passe self-service