Início Rápido: Conectar usuários e adquirir um token de acesso de um aplicativo de página única do JavaScriptQuickstart: Sign in users and acquire an access token from a JavaScript single-page application

Neste início rápido, você aprenderá como usar um exemplo de código que demonstra como um SPA (aplicativo de página única) do JavaScript pode conectar usuários de contas pessoais, contas corporativas e de estudante.In this quickstart, you learn how to use a code sample that demonstrates how a JavaScript single-page application (SPA) can sign in users of personal accounts, work accounts, and school accounts. Um SPA JavaScript também pode obter um token de acesso para chamar a API do Microsoft Graph ou qualquer API Web.A JavaScript SPA can also get an access token to call the Microsoft Graph API or any web API.

Como funciona o aplicativo de exemplo neste início rápido

Pré-requisitosPrerequisites

Este início rápido requer a seguinte configuração:This quickstart requires the following setup:

  • Para executar o projeto com um servidor Node.js, baixe e instale o Node.js.To run the project with a Node.js server, download and install Node.js.
  • Para editar os arquivos de projeto, baixe e instale o Visual Studio Code.To edit the project files, download and install Visual Studio Code.
  • Para executar o projeto como uma solução do Visual Studio, baixe e instale o Visual Studio 2019.To run the project as a Visual Studio solution, download and install Visual Studio 2019.

Registrar e baixar o aplicativo de início rápidoRegister and download your quickstart application

Para iniciar seu aplicativo de início rápido, use qualquer uma das opções a seguir.To start your quickstart application, use either of the following options.

Opção 1 (Expresso): Registrar e configurar o aplicativo automaticamente e, em seguida, baixar seu exemplo de códigoOption 1 (Express): Register and auto configure your app and then download your code sample

  1. Entre no portal do Azure usando uma conta corporativa ou de estudante, ou uma conta pessoal da Microsoft.Sign in to the Azure portal by using either a work or school account, or a personal Microsoft account.
  2. Se sua conta fornecer acesso a mais de um locatário, selecione a conta na parte superior direita e defina sua sessão do portal para o locatário do Azure Active Directory que deseja usar.If your account gives you access to more than one tenant, select the account at the top right, and then set your portal session to the Azure Active Directory (Azure AD) tenant you want to use.
  3. Acesse o novo painel do portal do Azure – Registros de aplicativo.Go to the new Azure portal - App registrations pane.
  4. Insira um nome para seu aplicativo e selecione Registrar.Enter a name for your application, and select Register.
  5. Siga as instruções para baixar e configurar automaticamente o novo aplicativo.Follow the instructions to download and automatically configure your new application.

Opção 2 (Manual): Registrar e configurar manualmente o aplicativo e o exemplo de códigoOption 2 (Manual): Register and manually configure your application and code sample

Etapa 1: Registre seu aplicativoStep 1: Register your application

  1. Entre no portal do Azure usando uma conta corporativa ou de estudante, ou uma conta pessoal da Microsoft.Sign in to the Azure portal by using either a work or school account, or a personal Microsoft account.

  2. Se sua conta fornecer acesso a mais de um locatário, selecione sua conta na parte superior direita e defina sua sessão do portal para o locatário Azure AD que deseja usar.If your account gives you access to more than one tenant, select your account at the top right, and then set your portal session to the Azure AD tenant you want to use.

  3. Vá até a página Registros de aplicativo da plataforma de identidade da Microsoft para desenvolvedores.Go to the Microsoft identity platform for developers App registrations page.

  4. Selecione Novo registro.Select New registration.

  5. Quando a página Registrar um aplicativo aparecer, insira um nome para o seu aplicativo.When the Register an application page appears, enter a name for your application.

  6. Em Tipos de conta com suporte, selecione Contas em qualquer diretório organizacional e contas pessoais da Microsoft.Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.

  7. Na seção URI de Redirecionamento, na lista suspensa, selecione a plataforma Web e defina o valor para http://localhost:30662/.Under the Redirect URI section, in the drop-down list, select the Web platform, and then set the value to http://localhost:30662/.

  8. Selecione Registrar.Select Register. Na página Visão geral do aplicativo, anote o valor de ID do aplicativo (cliente) para uso posterior.On the app Overview page, note the Application (client) ID value for later use.

  9. Este início rápido requer que o fluxo de concessão implícita seja ativado.This quickstart requires the Implicit grant flow to be enabled. No painel esquerdo do aplicativo registrado, selecione Autenticação.In the left pane of the registered application, select Authentication.

  10. Na seção Configurações avançadas, em Concessão implícita, marque as caixas de seleção Tokens de ID e Tokens de Acesso.In the Advanced settings section, under Implicit grant, select the ID tokens and Access tokens check boxes. Os tokens de ID e tokens de acesso são necessários porque esse aplicativo precisa conectar usuários e chamar uma API.ID tokens and access tokens are required, because this app needs to sign in users and call an API.

  11. Na parte superior do painel, selecione Salvar.At the top of the pane, select Save.

Etapa 1: Configurar seu aplicativo no portal do AzureStep 1: Configure your application in the Azure portal

Para que o exemplo de código deste início rápido funcione, você precisa adicionar um URI de redirecionamento como http://localhost:30662/ e habilitar o recurso Concessão implícita.For the code sample for this quickstart to work, you need to add a redirect URI as http://localhost:30662/ and enable Implicit grant.

Já configurado Seu aplicativo já está configurado com esses atributos.Already configured Your application is configured with these attributes.

Etapa 2: Baixe o projetoStep 2: Download the project

Selecione a opção mais adequada ao seu ambiente de desenvolvimento:Select the option that's suitable to your development environment:

Etapa 3: Configurar o aplicativo JavaScriptStep 3: Configure your JavaScript app

Na pasta JavaScriptSPA, edite index.html e defina os valores clientID e authority em msalConfig.In the JavaScriptSPA folder, edit index.html, and set the clientID and authority values under msalConfig.

Na pasta JavaScriptSPA, edite index.html e substitua msalConfig pelo seguinte código:In the JavaScriptSPA folder, edit index.html, and replace msalConfig with the following code:

var msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_info_here"
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true
    }
};

Observação

Este início rápido é compatível com Insira_Informações_da_Conta_com_Suporte_Aqui.This quickstart supports Enter_the_Supported_Account_Info_Here.

Em que:Where:

  • <Insira_Informações_da_Conta_com_Suporte_Aqui> é a ID do Aplicativo (cliente) para o aplicativo que você registrou.<Enter_the_Application_Id_here> is the Application (client) ID for the application you registered.
  • <Insira_as_informações_de_Locatário_aqui> é definido para uma das seguintes opções:<Enter_the_Tenant_info_here> is set to one of the following options:
    • Se o seu aplicativo for compatível com as contas neste diretório organizacional, substitua esse valor pela ID do locatário ou Nome do locatário (por exemplo, contoso.microsoft.com).If your application supports accounts in this organizational directory, replace this value with the Tenant ID or Tenant name (for example, contoso.microsoft.com).
    • Se o aplicativo for compatível com as contas em qualquer diretório organizacional, substitua esse valor por organizações.If your application supports accounts in any organizational directory, replace this value with organizations.
    • Se o seu aplicativo for compatível com as contas em qualquer diretório organizacional e contas pessoais da Microsoft, substitua esse valor por comum.If your application supports accounts in any organizational directory and personal Microsoft accounts, replace this value with common. Para restringir o suporte a contas pessoais da Microsoft, substitua esse valor por consumidores.To restrict support to personal Microsoft accounts only, replace this value with consumers.

Dica

Para encontrar os valores de ID do aplicativo (cliente) , ID de diretório (locatário) e Tipos de conta com suporte, vá para a página Visão Geral do aplicativo no portal do Azure.To find the values of Application (client) ID, Directory (tenant) ID, and Supported account types, go to the app's Overview page in the Azure portal.

Etapa 4: Executar o projetoStep 4: Run the project

  • Se você estiver usando Node.js:If you're using Node.js:

    1. Para iniciar o servidor, execute o seguinte comando no diretório do projeto:To start the server, run the following command from the project directory:

      npm install
      node server.js
      
    2. Abra um navegador da Web e vá para http://localhost:30662/.Open a web browser and go to http://localhost:30662/.

    3. Selecione Entrar para iniciar a conexão e chame a API do Microsoft Graph.Select Sign In to start the sign-in, and then call Microsoft Graph API.

  • Se você estiver usando o Visual Studio, selecione a solução do projeto e, em seguida, F5 para executar o projeto.If you're using Visual Studio, select the project solution, and then select F5 to run the project.

Depois que o navegador carregar o aplicativo, selecione Entrar.After the browser loads the application, select Sign In. Na primeira vez em que entrar, será solicitado que você forneça seu consentimento para permitir que o aplicativo acesse seu perfil e faça logon.The first time that you sign in, you're prompted to provide your consent to allow the application to access your profile and to sign you in. Depois que você se conectar com êxito, as informações do seu perfil de usuário deverão ser exibidas na página.After you're signed in successfully, your user profile information should be displayed on the page.

Mais informaçõesMore information

msal.jsmsal.js

A biblioteca MSAL conecta usuários e solicita os tokens que são usados para acessar uma API protegida pela plataforma de identidade da Microsoft.The MSAL library signs in users and requests the tokens that are used to access an API that's protected by Microsoft identity platform. O arquivo index.html do início rápido contém uma referência à biblioteca:The quickstart index.html file contains a reference to the library:

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/msal.min.js"></script>

Dica

É possível substituir a versão anterior pela mais recente em versões MSAL.js.You can replace the preceding version with the latest released version under MSAL.js releases.

Como alternativa, se tiver instalado o Node.js, você poderá baixar a versão mais recente por meio do npm (Gerenciador de Pacotes do Node.js):Alternatively, if you have Node.js installed, you can download the latest version through Node.js Package Manager (npm):

npm install msal

Inicialização da MSALMSAL initialization

O código de início rápido também mostra como inicializar a biblioteca MSAL:The quickstart code also shows how to initialize the MSAL library:

var msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here"
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true
    }
};

var myMSALObj = new Msal.UserAgentApplication(msalConfig);
WhereWhere
ClientId A ID do aplicativo que está registrado no portal do Azure.The application ID of the application that's registered in the Azure portal.
authority (Opcional) A URL da autoridade que dá suporte aos tipos de conta, conforme descrito na seção de configuração.(Optional) The authority URL that supports account types, as described previously in the configuration section. A autoridade padrão é https://login.microsoftonline.com/common.The default authority is https://login.microsoftonline.com/common.
cacheLocation (Opcional) Define o armazenamento do navegador para o estado de autenticação.(Optional) Sets the browser storage for the auth state. O padrão é sessionStorage.The default is sessionStorage.
storeAuthStateInCookie (Opcional) A biblioteca que armazena o estado de solicitação da autenticação exigido para validação dos fluxos de autenticação nos cookies do navegador.(Optional) The library that stores the authentication request state that's required for validation of the authentication flows in the browser cookies. Esse cookie é definido para os navegadores IE e Edge reduzirem determinados problemas conhecidos.This cookie is set for IE and Edge browsers to mitigate certain known issues.

Para saber mais sobre opções configuráveis disponíveis, confira Inicializar aplicativos cliente.For more information about available configurable options, see Initialize client applications.

Conectar usuáriosSign in users

O trecho de código a seguir mostra como realizar a conexão de usuários:The following code snippet shows how to sign in users:

var requestObj = {
    scopes: ["user.read"]
};

myMSALObj.loginPopup(requestObj).then(function (loginResponse) {
    //Login Success callback code here
}).catch(function (error) {
    console.log(error);
});
WhereWhere
scopes (Opcional) Contém os escopos que estão sendo solicitados para o consentimento do usuário no momento da conexão.(Optional) Contains scopes that are being requested for user consent at sign-in time. Por exemplo, [ "user.read" ] para o Microsoft Graph ou [ "<Application ID URL>/scope" ] para as APIs Web personalizadas (ou seja, api://<Application ID>/access_as_user).For example, [ "user.read" ] for Microsoft Graph or [ "<Application ID URL>/scope" ] for custom Web APIs (that is, api://<Application ID>/access_as_user).

Dica

Como alternativa, talvez você queira usar o método loginRedirect para redirecionar a página atual para a página de entrada, em vez de uma janela pop-up.Alternatively, you might want to use the loginRedirect method to redirect the current page to the sign-in page instead of a popup window.

Solicitar tokensRequest tokens

A MSAL usa três métodos para adquirir tokens: acquireTokenRedirect, acquireTokenPopup e acquireTokenSilentMSAL uses three methods to acquire tokens: acquireTokenRedirect, acquireTokenPopup, and acquireTokenSilent

Obter um token de usuário no modo silenciosoGet a user token silently

O método acquireTokenSilent manipula as aquisições e a renovação de tokens sem nenhuma interação do usuário.The acquireTokenSilent method handles token acquisitions and renewal without any user interaction. Após o método loginRedirect ou loginPopup ser executado pela primeira vez, acquireTokenSilent é o método normalmente usado para obter tokens usados para acessar recursos protegidos nas próximas chamadas.After the loginRedirect or loginPopup method is executed for the first time, acquireTokenSilent is the method commonly used to obtain tokens that are used to access protected resources for subsequent calls. As chamadas para solicitar ou renovar tokens são feitas no modo silencioso.Calls to request or renew tokens are made silently.

var requestObj = {
    scopes: ["user.read"]
};

myMSALObj.acquireTokenSilent(requestObj).then(function (tokenResponse) {
    // Callback code here
    console.log(tokenResponse.accessToken);
}).catch(function (error) {
    console.log(error);
});
WhereWhere
scopes Contém os escopos solicitados para retorno no token de acesso da API.Contains scopes being requested to be returned in the access token for API. Por exemplo, [ "user.read" ] para o Microsoft Graph ou [ "<Application ID URL>/scope" ] para as APIs Web personalizadas (ou seja, api://<Application ID>/access_as_user).For example, [ "user.read" ] for Microsoft Graph or [ "<Application ID URL>/scope" ] for custom Web APIs (that is, api://<Application ID>/access_as_user).

Obter um token de usuário interativamenteGet a user token interactively

Há situações em que é necessário forçar os usuários a interagir com o ponto de extremidade da plataforma de identidade da Microsoft.There are situations where you need to force users to interact with the Microsoft identity platform endpoint. Por exemplo:For example:

  • Os usuários podem precisar reinserir as credenciais porque a senha expirou.Users might need to reenter their credentials because their password has expired.
  • Seu aplicativo está solicitando acesso a escopos de recursos adicionais com os quais o usuário precisa concordar.Your application is requesting access to additional resource scopes that the user needs to consent to.
  • A autenticação de dois fatores é necessária.Two-factor authentication is required.

O padrão usual recomendado para a maioria dos aplicativos é chamar acquireTokenSilent primeiro, depois capturar a exceção e, em seguida, chamar acquireTokenPopup (ou acquireTokenRedirect) para iniciar uma solicitação interativa.The usual recommended pattern for most applications is to call acquireTokenSilent first, then catch the exception, and then call acquireTokenPopup (or acquireTokenRedirect) to start an interactive request.

Chamar o acquireTokenPopup resulta em uma janela pop-up para entrada.Calling the acquireTokenPopup results in a popup window for signing in. (Ou acquireTokenRedirect resulta no redirecionamento dos usuários para o ponto de extremidade da plataforma de identidade da Microsoft). Nessa janela, os usuários precisam interagir confirmando suas credenciais, dando consentimento ao recurso necessário ou concluindo a autenticação de dois fatores.(Or acquireTokenRedirect results in redirecting users to the Microsoft identity platform endpoint.) In that window, users need to interact by confirming their credentials, giving the consent to the required resource, or completing the two-factor authentication.

var requestObj = {
    scopes: ["user.read"]
};

myMSALObj.acquireTokenPopup(requestObj).then(function (tokenResponse) {
    // Callback code here
    console.log(tokenResponse.accessToken);
}).catch(function (error) {
    console.log(error);
});

Observação

Este início rápido usa os métodos loginRedirect e acquireTokenRedirect com o Microsoft Internet Explorer devido a um problema conhecido relacionado ao tratamento de janelas pop-up pelo Internet Explorer.This quickstart uses the loginRedirect and acquireTokenRedirect methods with Microsoft Internet Explorer, because of a known issue related to the handling of popup windows by Internet Explorer.

Próximas etapasNext steps

Para obter um guia passo a passo mais detalhado sobre como criar aplicativo para este início rápido, confira:For a more detailed step-by-step guide on building the application for this quickstart, see:

Para navegar pelo repositório da MSAL em busca de documentos, perguntas frequentes, problemas e muito mais, confira:To browse the MSAL repo for documentation, FAQ, issues, and more, see:

Ajude-nos a melhorar a plataforma de identidade da Microsoft.Help us improve the Microsoft identity platform. Deixe sua opinião respondendo a uma breve pesquisa de duas perguntas.Tell us what you think by completing a short two-question survey.