Compartilhar via

Início Rápido: Fazer login de usuários em um aplicativo desktop de exemplo

Aplica-se a: Círculo verde com um símbolo de marca de seleção branco. Locatários da força de trabalho Círculo verde com um símbolo de marca de seleção branco. Locatários externos (saiba mais)

Neste início rápido, você usará um aplicativo de exemplo para aprender a adicionar autenticação a um aplicativo da área de trabalho. O aplicativo de exemplo permite que os usuários entrem e saiam e usem a MSAL (Biblioteca de Autenticação da Microsoft) para lidar com a autenticação.

Antes de começar, use o seletor Escolher um tipo de locatário na parte superior desta página para selecionar o tipo de locatário. O Microsoft Entra ID oferece duas configurações de locatário: força de trabalho e externa. Uma configuração de locatário da força de trabalho é para seus funcionários, aplicativos internos e outros recursos organizacionais. Um locatário externo é para seus aplicativos voltados para o cliente.

Pré-requisitos

  • Uma conta do Azure com uma assinatura ativa. Se você 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
    • Desenvolvedor de aplicativos
  • Um componente da força de trabalho. Você pode usar o Diretório Padrão ou configurar um novo locatário.
  • Registre um novo aplicativo no Centro de administração do Microsoft Entra, configurado apenas para Contas neste diretório organizacional. Consulte Registrar um aplicativo para obter mais detalhes. Registre os seguintes valores na página visão geral do aplicativo para uso posterior:
    • ID do aplicativo (cliente)
    • ID do diretório (locatário)

Baixar o projeto de exemplo

Observação

O exemplo de Electron fornecido neste tutorial foi projetado especificamente para funcionar com o MSAL-node. Não há suporte para o navegador MSAL em aplicativos Electron. Certifique-se de concluir as etapas a seguir para configurar seu projeto corretamente.

  • Para clonar o exemplo, abra um prompt de comando e navegue até onde deseja criar o projeto e insira o seguinte comando:

    git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git

  • Baixe o arquivo .zip. Extraia-o para um caminho de arquivo em que o comprimento do nome tenha menos de 260 caracteres.

Configurar o projeto

No editor de código, abra o arquivo ms-identity-javascript-nodejs-desktop-main/App/authConfig.js . Substitua o valor da seguinte maneira:

Variável Descrição Exemplo(s)
Enter_the_Cloud_Instance_Id_Here A instância de nuvem do Azure na qual seu aplicativo está registrado https://login.microsoftonline.com/ (inclua a barra "/" à direita)
Enter_the_Tenant_Info_Here ID do locatário ou domínio primário contoso.microsoft.com ou aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here ID do cliente do aplicativo que você registrou 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Graph_Endpoint_Here A instância de nuvem da API do Microsoft Graph que seu aplicativo chamará https://graph.microsoft.com/ (inclua a barra "/" à direita)

Seu arquivo deve ser semelhante ao abaixo:

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

Executar o aplicativo

  1. Você precisará instalar as dependências deste exemplo uma só vez:

    cd ms-identity-javascript-nodejs-desktop-main
npm install

  2. Em seguida, execute o aplicativo via prompt de comando ou console:

    npm start

  3. Selecione Entrar para iniciar o processo de entrada.

    Na primeira vez que você entrar, você será solicitado a fornecer seu consentimento para permitir que o aplicativo faça login e acesse seu perfil. Depois de entrar com êxito, você será redirecionado de volta para o aplicativo.

Próxima etapa

Para saber mais sobre o desenvolvimento de aplicativo da área de trabalho Electron com o MSAL Node, confira o tutorial:

Tutorial: Conectar usuários e chamar a API do Microsoft Graph em um aplicativo da área de trabalho do Electron

Pré-requisitos

Baixar o projeto de exemplo

Observação

O exemplo de Electron fornecido neste tutorial foi projetado especificamente para funcionar com o MSAL-node. Não há suporte para o navegador MSAL em aplicativos Electron. Conclua as etapas a seguir para configurar seu projeto corretamente.

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 aplicativo Web de exemplo

  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 de Aplicativo (Cliente) do aplicativo registrado anteriormente.

    2. Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio do 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 aplicativo Web de exemplo

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 do login 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 quando escolher a opção de login. 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.

Conteúdo relacionado