Conectar usuários em um exemplo de aplicativo de desktop Electron

  • Artigo

Este guia de instruções usa um exemplo de aplicativo Electron para desktop para mostrar como adicionar autenticação a um aplicativo para desktop. O aplicativo de exemplo permite que os usuários se conectem e desconectem. O aplicativo Web de exemplo usa a MSAL (Biblioteca de Autenticação da Microsoft) para Node para lidar com a autenticação.

Neste artigo, você executará as seguintes tarefas:

  • Registrará um aplicativo para dektop no centro de administração do Microsoft Entra.

  • Criará um fluxo de entrada e saída de usuário no centro de administração do Microsoft Entra.

  • Associe seu aplicativo Web ao fluxo do usuário.

  • Atualize um aplicativo desktop Electron de exemplo usando seus próprios detalhes de locatário externo.

  • Executará e testará o exemplo de aplicativo para desktop.

Pré-requisitos

Registrar o aplicativo de desktop

Para permitir a entrada de usuários com o Microsoft Entra no seu aplicativo, a ID externa do Microsoft Entra deve estar ciente do aplicativo criado. O registro do aplicativo estabelece uma relação de confiança entre o aplicativo e o Microsoft Entra. Quando você registra um aplicativo, o External ID gera um identificador exclusivo conhecido como ID do Aplicativo (cliente), um valor usado para identificar seu aplicativo ao criar solicitações de autenticação.

As etapas a seguir mostram como registrar seu aplicativo no centro de administração do Microsoft Entra:

  1. Faça login no Centro de administração do Microsoft Entra como pelo menos um Desenvolvedor de aplicativos.

  2. Se tiver acesso a vários locatários, use o ícone Configurações no menu superior para alternar para o seu locatário externo no menu Diretórios + assinaturas.

  3. Navegue até Identidade>Aplicativos>Registros do aplicativo.

  4. Selecione + Novo Registro.

  5. Na página Registrar um aplicativo que aparece;

    1. Insira um Nome de aplicativo relevante que será exibido aos usuários do aplicativo, por exemplo,ciam-client-app.
    2. Em Tipos de contas com suporte, selecione Contas somente neste diretório organizacional.

  6. Selecione Registrar.

  7. O painel Visão geral do aplicativo será exibido após o registro bem-sucedido. Grave a ID do aplicativo (cliente) que será usada no código-fonte do aplicativo.

Para especificar o tipo de aplicativo para o registro do aplicativo, siga estas etapas:

  1. Em Gerenciar, selecione Autenticação.
  2. Na página Configurações da plataforma, selecione Adicionar uma plataforma e, em seguida, selecione a opção Aplicativos mobile e desktop.
  3. Para URIs de redirecionamento personalizadas, insira http://localhost e selecione Configurar.
  4. Selecione Configurar para salvar as alterações.

Conceder permissões de API

  1. Na página Registros de aplicativo, selecione o aplicativo que você criou (como ciam-client-app) para abrir sua página Visão geral.

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

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

  4. Selecione a guia APIs da Microsoft.

  5. Na seção APIs da Microsoft comumente usadas, selecione Microsoft Graph.

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

  7. Na seção Selecionar permissões, pesquise e selecione as permissões openid e offline_access.

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

  9. Neste ponto, você atribuiu as permissões corretamente. No entanto, como o locatário é um locatário do cliente, os próprios usuários consumidores não podem consentir com essas permissões. Você, como administrador, deve consentir com essas permissões em nome de todos os usuários no locatário:

    1. Selecione Dar consentimento de administrador para <nome do seu locatário> e selecione Sim.
    2. Selecione Atualizar e verifique se Concedido para <nome do seu locatário> aparece em Status para ambos os escopos.

Configurar declarações opcionais

  1. Em Gerenciar, selecione Configuração de token.

  2. Escolha Adicionar declaração opcional.

  3. Selecione tipo de declaração opcional e escolha ID.

  4. Selecione login_hint da declaração opcional.

  5. Selecione Adicionar para salvar as alterações.

Criar um fluxo de usuário

Siga estas etapas para criar um fluxo de usuário que um cliente possa usar para entrar ou se inscrever em um aplicativo.

  1. Entre no Centro de administração do Microsoft Entra como pelo menos um Administrador de fluxo de usuário de ID externa.

  2. Se você tiver acesso a vários locatários, use o ícone Configurações no menu superior para alternar para seu locatário externo no menu Diretórios + assinaturas.

  3. Navegue atéIdentidade>Identidades Externas>Fluxos do Usuário.

  4. Selecione + Novo fluxo de usuário.

  5. Na página Criar:

    1. Insira um Nome para o fluxo de usuário, como SignInSignUpSample.

    2. Na lista Provedores de identidade, selecione Contas de Email. Esse provedor de identidade permite que os usuários entrem ou se inscrevam usando seu endereço de email.

      Observação

      Provedores de identidade adicionais serão listados aqui somente depois que você configurar a federação com eles. Por exemplo, se você configurar a federação com o Google ou com o Facebook, poderá selecionar esses provedores de identidade adicionais aqui.

    3. Em Contas de email, você pode selecionar uma das duas opções. Para este tutorial, selecione Email com senha.

      • Email com senha: permite que novos usuários se inscrevam e entrem usando um endereço de email como o nome de entrada e uma senha como sua credencial de primeiro fator.
      • Senha de uso único do email: permite que novos usuários se inscrevam e entrem usando um endereço de email como o nome de entrada e a senha de uso único de email como a credencial de primeiro fator. A senha de uso único de email deve estar habilitada no nível do locatário (Todos os Provedores de Identidade>Senha de uso único de email) para essa opção ficar disponível no nível do fluxo do usuário.

    4. Em Atributos de usuário, escolha os atributos que você deseja coletar do usuário no momento da inscrição. Ao selecionar Mostrar mais, você pode escolher atributos e declarações para País/Região, Nome de Exibição e Código Postal. Selecione OK. (Os usuários só são solicitados a fornecer atributos quando se inscreverem pela primeira vez.)

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

Para habilitar a redefinição de senha self-service, use as etapas no artigo Habilitar redefinição de senha self-service.

Associe o aplicativo Web ao fluxo do usuário

Embora muitos aplicativos possam estar associados ao fluxo do usuário, um único aplicativo só pode estar associado a um único fluxo do usuário. Um fluxo de usuário permite a configuração da experiência do usuário para aplicativos específicos. Por exemplo, você pode configurar um fluxo de usuário que exige que os usuários entrem ou se inscrevam com um endereço de email.

  1. No menu da barra lateral, selecione Identidade.

  2. Selecione Identidades Externas e Fluxos de usuário.

  3. Na página Fluxos de usuário, selecione o Nome do fluxo de usuário criado anteriormente, por exemplo, SignInSignUpSample.

  4. Em Usar, selecione Aplicativos.

  5. Escolha Adicionar aplicativo.

  6. Selecione o aplicativo na lista, como ciam-client-app, ou use a caixa de pesquisa para localizar o aplicativo e selecioná-lo.

  7. Escolha Selecionar.

Clonar ou baixar o aplicativo Web de exemplo

Para obter o código de exemplo do aplicativo para desktop, baixe o arquivo .zip ou clone o aplicativo Web de exemplo do GitHub executando o seguinte comando:

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

Se você optar por baixar o arquivo .zip, extraia o arquivo do aplicativo de exemplo para uma pasta em que o comprimento total do caminho seja de 260 caracteres ou menos.

Instalar as dependências do projeto

  1. Abra uma janela do console e altere para o diretório que contém o exemplo de aplicativo Electron:

    cd 1-Authentication\3-sign-in-electron\App

  2. Execute os seguintes comandos para instalar as dependências do aplicativo:

    npm install && npm update

Configurar o exemplo de aplicativo Web

  1. No seu editor de código, abra o arquivo App\authConfig.js.

  2. Localize o espaço reservado:

    1. Enter_the_Application_Id_Here e substitua pela ID do Aplicativo (cliente) referente ao aplicativo registrado anteriormente.

    2. Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio diretório (locatário). Por exemplo, se o domínio primário do locatário for contoso.onmicrosoft.com, use contoso. Se você não tiver o nome do locatário, saiba como ler os detalhes do locatário.

Executar e testar o exemplo de aplicativo Web

Agora, você pode testar o exemplo de aplicativo Electron para desktop. Depois de executar o aplicativo, a janela do aplicativo para desktop será exibida automaticamente:

  1. No terminal, execute o seguinte comando:

    npm start

    Captura de tela da entrada no aplicativo Electron para desktop.

  2. Na janela do desktop que aparecer, selecione o botão Entrar ou Inscrever-se. Uma janela do navegador será aberta e solicitará suas credenciais de acesso.

  3. Na página de entrada do navegador, digite seu endereço de Email, selecione Avançar, digite sua Senha e, em seguida, selecione Entrar. Se você não tiver uma conta, selecione o link Não tem uma conta? Crie uma, que iniciará o fluxo de inscrição.

  4. Se você escolher a opção de inscrição, após preencher seu email, senha de uso único, nova senha e mais detalhes da conta, você concluirá todo o fluxo de inscrição. Você verá uma página semelhante à seguinte captura de tela. Você verá uma página semelhante se escolher a opção de entrada. A página exibirá declarações de ID de token.

    Captura de tela da visualização de declarações de token no aplicativo Electron para desktop.

Confira também