Compartilhar via

Guia de início rápido: inicie sessão para utilizadores numa aplicação de página única (SPA) e chame a API do Microsoft Graph

  • Artigo

Neste arranque rápido, utiliza um exemplo de aplicação de página única (SPA) para mostrar como autenticar utilizadores utilizando o fluxo de código de autorização com PKCE (Proof Key for Code Exchange) e chamar a API do Microsoft Graph. O exemplo usa o Biblioteca de Autenticação da Microsoft para manipular a autenticação.

Pré-requisitos

  • Uma conta do Azure com uma assinatura ativa. Se 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
    • Administrador de aplicativos na nuvem
  • Um inquilino de habitação para trabalhadores. Você pode usar seu diretório padrão ou configurar um novo locatário.
  • Visual Studio Code ou outro editor de código.
  • Registar uma nova aplicação no centro de administração do Microsoft Entra com a seguinte configuração e anotar os identificadores na página de Descrição Geral da aplicação. Para obter mais informações, consulte Registrar um aplicativo.
    • Nome: identity-client-spa
    • Tipos de conta suportados: Contas somente neste diretório organizacional (Cliente único)
    • Configuração da plataforma: Aplicativo de página única (SPA)
    • Redirecionar URI: http://localhost:3000/
  • Node.js

Clone ou baixe o aplicativo de exemplo

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip.

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

    git clone https://github.com/Azure-Samples/ms-identity-docs-code-javascript.git

  • Baixe o ficheiro .zip. Extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

Configurar o projeto

  1. No IDE, abra a pasta do projeto ms-identity-docs-code-javascript, que contém o exemplo.

  2. Abra authConfig.js vanillajs-spa/App/public/ e atualize os seguintes valores com as informações registradas no centro de administração.

    /**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */
const msalConfig = {
    auth: {

         // WORKFORCE TENANT
         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
         // EXTERNAL TENANT
         // authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/", // Replace the placeholder with your tenant subdomain
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case msal.LogLevel.Error:
                        console.error(message);
                        return;
                    case msal.LogLevel.Info:
                        console.info(message);
                        return;
                    case msal.LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case msal.LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            },
        },
    },
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * https://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
 */
const loginRequest = {
    scopes: ["User.Read"],
};

/**
 * An optional silentRequest object can be used to achieve silent SSO
 * between applications by providing a "login_hint" property.
 */

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}
    • clientId - O identificador do aplicativo, também conhecido como cliente. Substitua o texto entre aspas pelo valor do ID do aplicativo (cliente) que foi registrado anteriormente.
    • authority - A autoridade é uma URL que indica um diretório do qual a MSAL pode solicitar tokens. Substitua Enter_the_Tenant_Info_Here pelo valor do ID de diretório (locatário) que foi registado anteriormente.
    • redirectUri - O URI de redirecionamento da aplicação. Se necessário, substitua o texto entre aspas pelo URI de redirecionamento que foi registrado anteriormente.

Execute o aplicativo e entre e saia

Execute o projeto com um servidor Web usando Node.js:

  1. Para iniciar o servidor, execute os seguintes comandos de dentro do diretório do projeto:

    cd vanillajs-spa/App
npm install
npm start

  2. Copie o URL https que aparece no terminal, por exemplo, https://localhost:3000e cole-o em um navegador. Recomendamos o uso de uma sessão privada ou anônima do navegador.

  3. Siga os passos e introduza os detalhes necessários para iniciar sessão com a sua conta Microsoft. Ser-lhe-á solicitado um endereço de e-mail para que lhe possa ser enviado um código de acesso único. Insira o código quando solicitado.

  4. O aplicativo solicitará permissão para manter o acesso aos dados aos quais você deu acesso, e para fazer login e ler seu perfil. Selecione Aceitar. A captura de tela a seguir é exibida, indicando que você entrou no aplicativo e acessou os detalhes do seu perfil a partir da API do Microsoft Graph.

    Captura de tela do aplicativo JavaScript retratando os resultados da chamada de API.

Pré-requisitos

  • Registar uma nova aplicação no centro de administração do Microsoft Entra com a seguinte configuração e anotar os identificadores na página de Descrição Geral da aplicação. Para obter mais informações, consulte Registrar um aplicativo.
    • Nome: identity-client-spa
    • Tipos de conta suportados: Contas somente neste diretório organizacional (Cliente único)
    • Configuração da plataforma: Aplicativo de página única (SPA)
    • Redirecionar URI: http://localhost:3000/
  • Adicione seu aplicativo ao fluxo de usuários
  • Node.js

Depois de registrar o seu aplicativo, é-lhe atribuída a permissão User.Read. No entanto, como o locatário é um locatário externo, os próprios usuários do cliente não podem consentir com essa permissão. Você, como administrador do locatário, deve consentir com essa permissão em nome de todos os usuários no locatário:

  1. Na página registros do 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.

    1. Selecione Conceder consentimento de administrador a <o seu inquilino>, depois selecione Sim.
    2. Selecione Atualizare depois verifique se Concedido para <o nome do locatário> aparece em Estado para a permissão.

Clone ou baixe exemplo de SPA

Para obter o aplicativo de exemplo, você pode cloná-lo do GitHub ou baixá-lo como um arquivo .zip.

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

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

  • Faça o download do exemplo. Extraia-o para um caminho de arquivo onde o comprimento do nome é inferior a 260 caracteres.

Configurar o SPA de exemplo

  1. Abra App/public/authConfig.js e substitua o seguinte pelos valores obtidos no centro de administração do Microsoft Entra:

    • Enter_the_Application_Id_Here e substitua-o pelo ID da aplicação (cliente) da aplicação que registou anteriormente.
    • Enter_the_Tenant_Subdomain_Here e substitua-o pelo subdomínio de Diretório (inquilino). Por exemplo, se o domínio principal do locatário for contoso.onmicrosoft.com, use contoso. Se não tiver o nome do inquilino, saiba como ler os detalhes do inquilino.

  2. Salve o arquivo.

Execute o seu projeto e inicie sessão

  1. Para iniciar o servidor, execute os seguintes comandos de dentro do diretório do projeto:

    cd 1-Authentication\0-sign-in-vanillajs\App
npm install
npm start

  2. Copie o URL https que aparece no terminal, por exemplo, https://localhost:3000e cole-o em um navegador. Recomendamos o uso de uma sessão privada ou anônima do navegador.

  3. Inicie sessão com uma conta registada no locatário.

  4. A captura de tela a seguir é exibida, indicando que você entrou no aplicativo e acessou os detalhes do seu perfil a partir da API do Microsoft Graph.

    Captura de tela do aplicativo JavaScript retratando os resultados da chamada de API.

Sair do aplicativo

  1. Encontre o botão Terminar sessão na página e selecione-o.
  2. Você será solicitado a escolher uma conta da qual sair. Selecione a conta que utilizou para iniciar sessão.

É apresentada uma mensagem a indicar que terminou sessão. Agora você pode fechar a janela do navegador.

Conteúdo relacionado