Passo a passo: Registrando e configurando o aplicativo SimpleSPA com adal.js

Artigo
03/03/2017

Publicado: janeiro de 2017

Aplicável a: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2016, Dynamics CRM Online

Esse passo a passo descreve o processo de registro e configuração do SPA (Single Page Application) mais simples para acessar dados no Atualização do Microsoft Dynamics CRM Online 2016 usando o adal.js e o CORS (Compartilhamento de Recursos entre Origens).Para obter mais informações:Use o OAuth com compartilhamento de recursos entre origens para conectar um aplicativo de página única ao Microsoft Dynamics 365.

Pré-requisitos

Atualização do Microsoft Dynamics CRM Online 2016
Você deve ter uma conta de usuário do sistema Microsoft Dynamics 365 (online) com função de administrador para o Microsoft Office 365.
Uma assinatura do Microsoft Azure para registro do aplicativo. Uma conta de avaliação também funcionará.
Microsoft Visual Studio 2015

A meta deste passo a passo

Quando você concluir este passo a passo, poderá executar um aplicativo SPA simples no Visual Studio para fazer um usuário se autenticar e recuperar dados do Microsoft Dynamics 365 (online). Este aplicativo consiste em uma única página HTML.

Quando você depura o aplicativo, inicialmente haverá somente um botão Logon .

Clique em Logon para ser redirecionado para uma página de entrada para inserir suas credenciais.

Depois de inserir suas credenciais, você será direcionado de volta à página HTML, onde verá que o botão Logon está oculto e que um botão Sair e um botão Obter contas estão visíveis. Você também verá um cumprimento usando informações da sua conta de usuário.

Clique no botão Obter contas para recuperar 10 registros da conta da sua organização do Microsoft Dynamics 365. O botão Obter contas está desabilitado, como mostrado na captura de tela a seguir:

A página do SimpleSPA

Observação

O carregamento inicial de dados do Microsoft Dynamics 365 pode ficar lento durante as operações de suporte à autenticação, mas as operações subsequentes são muito mais rápidas.

Por fim, você pode clicar no botão Sair para sair.

Observação

Este aplicativo SPA não se destina a representar um padrão para o desenvolvimento de aplicativos SPA robustos. Ele é simplificado para se concentrar no processo de registro e de configuração do aplicativo.

Criar um projeto de aplicativo Web

Usando o Microsoft Visual Studio 2015, crie um novo projeto Aplicativo Web ASP.NET e use o modelo Vazio . Você pode dar o nome que quiser ao projeto.

Você também deve estar preparado para usar versões anteriores do Microsoft Visual Studio , mas essas etapas descreverão o uso do Visual Studio 2015.

Adicione uma nova página HTML chamada SimpleSPA.html ao projeto e cole este código:

<!DOCTYPE html>
<html>
<head>
 <title>Simple SPA</title>
 <meta charset="utf-8" />
 <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js"></script>
 <script type="text/javascript">
  "use strict";

  //Set these variables to match your environment
  var organizationURI = "https:// [organization name].crm.dynamics.com"; //The URL to connect to CRM (online)
  var tenant = "[xxx.onmicrosoft.com]"; //The name of the Azure AD organization you use
  var clientId = "[client id]"; //The ClientId you got when you registered the application
  var pageUrl = "https://localhost: [PORT #]/SimpleSPA.html"; //The URL of this page in your development environment when debugging.


  var user, authContext, message, errorMessage, loginButton, logoutButton, getAccountsButton, accountsTable, accountsTableBody;

  //Configuration data for AuthenticationContext
  var endpoints = {
   orgUri: organizationURI
  };

  window.config = {
   tenant: tenant,
   clientId: clientId,
   postLogoutRedirectUri: pageUrl,
   endpoints: endpoints,
   cacheLocation: 'localStorage', // enable this for IE, as sessionStorage does not work for localhost.
  };


  document.onreadystatechange = function () {
   if (document.readyState == "complete") {

    //Set DOM elements referenced by scripts
    message = document.getElementById("message");
    errorMessage = document.getElementById("errorMessage");
    loginButton = document.getElementById("login");
    logoutButton = document.getElementById("logout");
    getAccountsButton = document.getElementById("getAccounts");
    accountsTable = document.getElementById("accountsTable");
    accountsTableBody = document.getElementById("accountsTableBody");

    //Event handlers on DOM elements
    loginButton.addEventListener("click", login);
    logoutButton.addEventListener("click", logout);
    getAccountsButton.addEventListener("click", getAccounts);

    //call authentication function
    authenticate();

    if (user) {
     loginButton.style.display = "none";
     logoutButton.style.display = "block";
     getAccountsButton.style.display = "block";

     var helloMessage = document.createElement("p");
     helloMessage.textContent = "Hello " + user.profile.name;
     message.appendChild(helloMessage)

    }
    else {
     loginButton.style.display = "block";
     logoutButton.style.display = "none";
     getAccountsButton.style.display = "none";
    }

   }
  }

  // Function that manages authentication
  function authenticate() {
   //OAuth context
   authContext = new AuthenticationContext(config);

   // Check For & Handle Redirect From AAD After Login
   var isCallback = authContext.isCallback(window.location.hash);
   if (isCallback) {
    authContext.handleWindowCallback();
   }
   var loginError = authContext.getLoginError();

   if (isCallback && !loginError) {
    window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
   }
   else {
    errorMessage.textContent = loginError;
   }
   user = authContext.getCachedUser();

  }

  //function that logs in the user
  function login() {
   authContext.login();
  }
  //function that logs out the user
  function logout() {
   authContext.logOut();
   accountsTable.style.display = "none";
   accountsTableBody.innerHTML = "";
  }


//function that initiates retrieval of accounts
  function getAccounts() {

   getAccountsButton.disabled = true;
   var retrievingAccountsMessage = document.createElement("p");
   retrievingAccountsMessage.textContent = "Retrieving 10 accounts from " + organizationURI + "/api/data/v8.0/accounts";
   message.appendChild(retrievingAccountsMessage)

   // Function to perform operation is passed as a parameter to the aquireToken method
   authContext.acquireToken(organizationURI, retrieveAccounts)

  }


//Function that actually retrieves the accounts
  function retrieveAccounts(error, token) {
   // Handle ADAL Errors.
   if (error || !token) {
    errorMessage.textContent = 'ADAL error occurred: ' + error;
    return;
   }

   var req = new XMLHttpRequest()
   req.open("GET", encodeURI(organizationURI + "/api/data/v8.0/accounts?$select=name,address1_city&$top=10"), true);
   //Set Bearer token
   req.setRequestHeader("Authorization", "Bearer " + token);
   req.setRequestHeader("Accept", "application/json");
   req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
   req.setRequestHeader("OData-MaxVersion", "4.0");
   req.setRequestHeader("OData-Version", "4.0");
   req.onreadystatechange = function () {
    if (this.readyState == 4 /* complete */) {
     req.onreadystatechange = null;
     if (this.status == 200) {
      var accounts = JSON.parse(this.response).value;
      renderAccounts(accounts);
     }
     else {
      var error = JSON.parse(this.response).error;
      console.log(error.message);
      errorMessage.textContent = error.message;
     }
    }
   };
   req.send();
  }
  //Function that writes account data to the accountsTable
  function renderAccounts(accounts) {
   accounts.forEach(function (account) {
    var name = account.name;
    var city = account.address1_city;
    var nameCell = document.createElement("td");
    nameCell.textContent = name;
    var cityCell = document.createElement("td");
    cityCell.textContent = city;
    var row = document.createElement("tr");
    row.appendChild(nameCell);
    row.appendChild(cityCell);
    accountsTableBody.appendChild(row);
   });
   accountsTable.style.display = "block";
  }

 </script>
 <style>
  body {
   font-family: 'Segoe UI';
  }

  table {
   border-collapse: collapse;
  }

  td, th {
   border: 1px solid black;
  }

  #errorMessage {
   color: red;
  }

  #message {
   color: green;
  }
 </style>
</head>
<body>
 <button id="login">Login</button>
 <button id="logout" style="display:none;">Logout</button>
 <button id="getAccounts" style="display:none;">Get Accounts</button>
 <div id="errorMessage"></div>
 <div id="message"></div>
 <table id="accountsTable" style="display:none;">
  <thead><tr><th>Name</th><th>City</th></tr></thead>
  <tbody id="accountsTableBody"></tbody>
 </table>

</body>
</html>

Defina essa página como a página inicial do projeto
Nas propriedades do projeto, selecione Web e, em Servidores, anote a URL do Projeto. Deve ser algo parecido com https://localhost:46575/. Observe o número da porta gerado. Você precisará dessa informação na próxima etapa.

Na página SimpleSPA.html, localize as seguintes variáveis de configuração e defina-as adequadamente. Você poderá definir a clientId depois de concluir a próxima parte do passo a passo.

//Set these variables to match your environment
var organizationURI = "https://[organization name].crm.dynamics.com"; //The URL to connect to CRM (online)
var tenant = "[xxx.onmicrosoft.com]"; //The name of the Azure AD organization you use
var clientId = "[client id]"; //The ClientId you got when you registered the application
var pageUrl = "https://localhost:[PORT #]/SimpleSPA.html"; //The URL of this page in your development environment when debugging.

Registrar o aplicativo

Conectar ao portal de gerenciamento do Microsoft Azure usando uma conta com permissão de administrador. Você precisa usar uma conta na mesma assinatura (locatário) do Office 365 com a qual você pretende registrar o aplicativo. Você também pode acessar o portal do Microsoft Azure através do centro de administração do Office 365, expandindo o item ADMIN no painel de navegação esquerdo e selecionando Azure AD.

Se você não tiver um locatário (conta) do Azure ou tiver um mas a assinatura do Office 365 com o Microsoft Dynamics 365 (online) não estiver disponível na sua assinatura do Azure, siga as instruções do tópico Configurar o acesso do Azure Active Directory para o local do seu desenvolvedor para associar as duas contas.

Se você não tiver uma conta, poderá entrar em uma usando um cartão de crédito. No entanto, a conta é gratuita para o registro de aplicativo e o seu cartão de crédito não será cobrado se você apenas acompanhar os procedimentos apontados neste tópico para registrar um ou mais aplicativos.Para obter mais informações:Detalhes de preços do Active Directory
Clique em Active Directory na coluna à esquerda da página. Talvez seja necessário rolar a coluna da esquerda para ver o ícone Active Directory e a tabela.
Clique no diretório de locatário desejado na lista do diretório.

Se o diretório de locatários do Dynamics 365 não for exibido na lista de diretório, clique em Adicionar e, depois, selecione Usar o diretório existente na caixa de diálogo. Siga as instruções fornecidas, e então volte à etapa 1.
Com o diretório de destino selecionado, clique em Aplicativos (próximo ao topo da página) e clique em Adicionar.
Na caixa de diálogo O que deseja fazer?, clique em Adicionar um aplicativo que a minha organização está desenvolvendo.
Quando solicitado, insira um nome para o aplicativo, por exemplo, 'SimpleSPA', escolha o tipo: Aplicativo Web e/ou API Web e então clique na seta para a direita para continuar. Clique em um ponto de interrogação ? para obter mais informações sobre os valores adequados para cada campo de entrada.
Insira as seguintes informações:
- URL de Entrada
  Essa é a URL para a qual o usuário deve ser redirecionado depois de entrar. Para fins de depuração no Visual Studio, ela deve ser https://localhost:####/SimpleSPA.html onde #### representa o número da porta obtida na etapa 4 do procedimento Criar um projeto de aplicativo Web.
- URI da ID do APLICATIVO
  Deve ser um identificador exclusivo para o aplicativo. Use https://XXXX.onmicrosoft.com/SimpleSPA, onde XXXX é o locatário do active Directory.
Com a guia do aplicativo recém-registrado selecionada, clique em Configurar, localize a Id do Cliente e a copie.

Defina a variável clientId na página SimpleSPA.html com esse valor. Consulte a etapa 5 do procedimento Crie um projeto de aplicativo Web .
Role até a parte inferior da página e clique em Adicionar aplicativo. Na caixa de diálogo, selecione Dynamics 365 Online e feche a caixa de diálogo.
Nas permissões para outros aplicativos, você encontrará uma linha para Dynamics 365 Online e Permissões Delegadas: 0. Selecione essa opção e adicione Acessar o Dynamics 365 (online) como usuários da organização.
Salve o registro do aplicativo
Na parte inferior, selecione Gerenciar Manifesto e escolha Baixar Manifesto.
Abra o arquivo JSON que você baixou e localize a linha: "oauth2AllowImplicitFlow": false, altere false para true e salve o arquivo.
Volte para Gerenciar Manifesto novamente. Escolha Carregar Manifesto e carregue o arquivo de JSON que você acabou de salvar.

Depurando o aplicativo

Defina o navegador para usar o Microsoft Edge, o Google Chrome ou o Mozilla Firefox.

Observação

O Internet Explorer não funcionará para depuração nesta situação.
Pressione F5 para iniciar a depuração. Você deve esperar o comportamento descrito em A meta deste passo a passo.

Se você não obtiver os resultados esperados, verifique novamente os valores definidos durante o registro do aplicativo e a configuração do código de SimpleSPA.html

Confira Também

Use o OAuth com compartilhamento de recursos entre origens para conectar um aplicativo de página única ao Microsoft Dynamics 365

Microsoft Dynamics 365

Partilhar via