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

  • Artigo

Este guia de procedimentos utiliza uma Aplicação javascript de página única (SPA) de exemplo para demonstrar como adicionar autenticação a um SPA. O SPA permite que os utilizadores iniciem sessão e terminem sessão com o seu próprio ID de 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 é recomendado 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 SPA .
  3. Para os URIs de Redirecionamento, introduzahttp://localhost:3000/redirect
  4. Selecione Configurar para guardar as alterações.
  5. Novamente na página Configurações da plataforma , na nova aplicação de página única apresentada, 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 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\0-sign-in-vanillajs\App

  2. Instale as dependências do projeto:

        npm install

Configurar o SPA de exemplo

  1. Abra authConfig.js.
  2. Localize-o Enter_the_Tenant_Name_Here e substitua-o pelo nome do seu inquilino.
  3. Em Autoridade, localize-o Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio do seu inquilino. Por exemplo, se o domínio primário do inquilino for caseyjensen@onmicrosoft.com, o valor que deve introduzir é casyjensen.
  4. Guarde o ficheiro.

Executar o projeto e iniciar sessão

  1. Abra um novo terminal e execute o seguinte comando para iniciar o servidor Web express.

    npm start

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

  3. Inicie sessão com uma conta registada no inquilino do cliente.

  4. Assim que tiver sessão iniciada, o nome a apresentar é apresentado junto ao botão Terminar sessão , conforme mostrado na captura de ecrã seguinte.

  5. O SPA irá agora apresentar um botão a indicar Informações do Perfil de Pedido. Selecione-o para apresentar dados de perfil.

    Captura de ecrã a mostrar o início de sessão num SPA JS de baunilha.

Terminar sessão na aplicação

  1. Para terminar sessão na aplicação, selecione Terminar sessão na barra de navegação.
  2. É apresentada uma janela a perguntar em que conta terminar sessão.
  3. Após terminar sessão com êxito, é apresentada uma janela final a aconselhá-lo a fechar todas as janelas do browser.

Passos seguintes

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