Partilhar via

Iniciar sessão de utilizadores numa aplicação de Angular de página única de exemplo

Este guia de procedimentos utiliza um exemplo Angular aplicação de página única (SPA) para demonstrar como adicionar utilizadores de autenticação a um SPA. O SPA permite que os utilizadores iniciem sessão e terminem sessão com a sua ID externo Microsoft Entra para o 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 aplicações JS de baunilha 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 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 Aplicação de página única.
  3. Para os URIs de Redirecionamento , introduza http://localhost:4200/.
  4. Em URL de fim de sessão do canal frontal, introduza http://localhost:4200/auth.
  5. Selecione Guardar para guardar as alterações.

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 respetiva 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 a 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 é um 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 do administrador para <o seu nome> de inquilino e, em seguida, selecione Sim.
    2. Selecione Atualizar e, em seguida, verifique se Concedido para <o seu nome> de inquilino aparece 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 para>Identidades Externas Fluxos> deutilizador.

  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. Neste 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 único por e-mail como credencial de primeiro 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 do 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. (Só são pedidos atributos aos utilizadores 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 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 de raiz do projeto de exemplo e introduza o fragmento seguinte para navegar para a pasta do projeto:

    cd 1-Authentication\2-sign-in-angular\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 no centro de administração do Microsoft Entra
    • clientId - O identificador da aplicação, também referido como cliente. Substitua pelo Enter_the_Application_Id_Here 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 inquilino CIAM.
    • 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\2-sign-in-angular\SPA
npm start

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

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

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

Passos seguintes

Saiba como utilizar a Biblioteca de Autenticação da Microsoft (MSAL) para JavaScript para iniciar sessão de utilizadores e adquirir tokens para chamar o Microsoft Graph.