Procedura dettagliata: Registrazione e configurazione dell'applicazione SimpleSPA con adal.js

Data di pubblicazione: gennaio 2017

Si applica a: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2016, Dynamics CRM Online

In questa procedura dettagliata viene descritto il processo di registrazione e configurazione dell'applicazione Applicazioni su singola pagina(SPA) più semplice per accedere ai dati in Aggiornamento di Microsoft Dynamics CRM Online 2016 tramite adal.js e la condivisione di risorse tra origini (CORS, Cross-Origin Resource Sharing).Ulteriori informazioni:Utilizzare OAuth con la condivisione di risorse tra origini per connettere un'applicazione su singola pagina a Microsoft Dynamics 365.

Prerequisiti

Aggiornamento di Microsoft Dynamics CRM Online 2016
Devi disporre di un account utente di sistema Microsoft Dynamics 365 (online) con il ruolo di amministratore per Microsoft Office 365.
Una sottoscrizione Microsoft Azure per la registrazione dell'applicazione. È utilizzabile anche un account di valutazione.
Microsoft Visual Studio 2015

Obiettivo di questa procedura dettagliata

Quando completi questa procedura dettagliata ti sarà possibile eseguire un'applicazione semplice SPA in Visual Studio che consente a un utente di autenticare e recuperare i dati da Microsoft Dynamics 365 (online). Questa applicazione è composta da una sola pagina HTML.

Quando esegui il debug, l'applicazione inizialmente presenta un solo pulsante Accesso.

Fai clic su Accesso per essere reindirizzato a una pagina di accesso per immettere le tue credenziali.

Dopo aver immesso le credenziali verrà di nuovo visualizzata la pagina HTML in cui il pulsante Accesso è nascosto e i pulsanti Disconnetti e Ottieni account visibili. Inoltre vedrai un messaggio di benvenuto che utilizzano le informazioni del tuo account utente.

Fai clic sul pulsante Ottieni account per recuperare 10 record di account dall'organizzazione Microsoft Dynamics 365. Il pulsante Ottieni account è disabilitato come illustrato nella schermata seguente:

La pagina SimpleSPA

Nota

Il carico iniziale dei dati di Microsoft Dynamics 365 può essere lento durante l'esecuzione delle operazioni a supporto dell'autenticazione, ma le operazioni successive sono molto più rapide.

Infine, puoi fare clic sul pulsante Disconnetti per uscire.

Nota

Questa applicazione SPA non intende rappresentare un modello per lo sviluppo di applicazioni SPA robuste. È più concentrata sul processo di registrazione e configurazione dell'applicazione.

Creare un progetto dell'applicazione Web

Con Microsoft Visual Studio 2015, crea n nuovo progetto Applicazione Web ASP.NET e utilizza il modello Vuoto. Puoi assegnare al progetto il nome che desideri.

Puoi utilizzare le versioni precedenti di Microsoft Visual Studio ma la procedura seguente è relativa a Visual Studio 2015.

Aggiungi una nuova pagina HTML denominata SimpleSPA.html al progetto e incollare il codice seguente:

<!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>

Impostare questa pagina come pagina iniziale del progetto
Nelle proprietà del progetto, seleziona Web e in Server individua l'URL di progetto Deve essere simile a https://localhost:46575/. Annota il numero di porta che viene generato. Questa informazione è necessaria per il prossimo passaggio.

Nella pagina SimpleSPA.html, individua le seguenti variabili di configurazione e impostale di conseguenza. Puoi impostare clientId una volta completata la fase successiva della procedura dettagliata.

//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.

Registrare l'applicazione

Esegui l'accesso al portale di gestione di Microsoft Azure utilizzando un account con autorizzazioni di amministratore. Devi utilizzare un account nella stessa sottoscrizione Office 365(tenant) con cui si intende registrare l'applicazione. Puoi inoltre accedere al portale di Microsoft Azure tramite l'interfaccia di amministrazione di Office 365 espandendo la voce AMMINISTRATORE nel riquadro di spostamento a sinistra e selezionando Azure AD.

Se non hai un tenant (account) di Azure o se hai l'account ma la sottoscrizione di Office 365 con Microsoft Dynamics 365 (online) non è disponibile nella sottoscrizione Azure, segui le istruzioni presenti nell'argomento Configurare l'accesso ad Azure Active Directory per il sito per sviluppatori per associare i due account.

Se non disponi di un account, puoi iscriverti con una carta di credito. Tuttavia, l'account è gratuito per la registrazione dell'applicazione e non verrà eseguito alcun addebito sulla carta di credito se si seguono solo le procedure indicate in questo argomento per registrare una o più applicazioni.Ulteriori informazioni:Dettagli prezzi di Active Directory
Fai clic su Active Directory nella colonna a sinistra della pagina. Potrebbe essere necessario scorrere la colonna sinistra per visualizzare l'icona e l'etichetta Active Directory.
Fai clic sulla directory tenant desiderata nell'elenco delle directory.

Se la directory tenant di Dynamics 365 non è disponibile nell'elenco delle directory, fai clic su Aggiungi e seleziona Utilizza directory esistente nella finestra di dialogo. Seguire le richieste e le istruzioni visualizzate e tornare al passaggio 1.
Con la directory di destinazione selezionata, fai clic su Applicazioni (nella parte superiore della pagina) e quindi su Aggiungi.
Nella finestra di dialogo Scegliere un'opzione fai clic su Aggiungi un'applicazione che l'organizzazione sta sviluppando.
Quando richiesto, immetti un nome per l'applicazione, ad esempio ‘SimpleSPA’, seleziona un tipo: Applicazione Web e/o API Web e quindi fai clic sulla freccia a destra per continuare. Fai clic su un punto interrogativo ? per ulteriori informazioni sui valori appropriati per ogni campo di input.
Immetti le informazioni seguenti:
- URL di accesso
  Questo è l'URL a cui l'utente viene reindirizzato dopo l'accesso. Per scopi di debug in Visual Studio deve essere https://localhost:####/SimpleSPA.html dove #### rappresenta il numero di porta ottenuto dal passaggio 4 della procedura Creare un progetto dell'applicazione Web.
- URI ID APP
  Deve essere un identificatore univoco dell'applicazione. Utilizza https://XXXX.onmicrosoft.com/SimpleSPA dove XXXX è il tenant di Active Directory.
Con la scheda dell'app appena registrata selezionata, fai clic su Configurare, individua l'ID client e copialo.

Imposta la variabile clientId nella pagina SimpleSPA.html su questo valore. Fai riferimento al passaggio 5 della procedura Creare un progetto dell'applicazione Web.
Scorri verso la fine della pagina e fai clic su Aggiungi applicazione. Nella finestra di dialogo seleziona Dynamics 365 Online e quindi chiudi la finestra di dialogo.
Nelle autorizzazioni di altre applicazioni, è presente una riga per Dynamics 365 Online e Autorizzazioni delegate: 0. Seleziona questa opzione e aggiungi Accedi a Dynamics 365 (online) come utente dell'organizzazione.
Salvare la registrazione dell'applicazione
Nella parte inferiore, seleziona Gestisci manifesto e seleziona Scarica manifesto.
Apri il file JSON scaricato e individua la riga: "oauth2AllowImplicitFlow": false, e modifica false in true e salva il file.
Torna di nuovo a Gestisci manifesto. Scegli Carica manifesto e carica il file JSON appena salvato.

Debug dell'applicazione

Imposta il browser per l'utilizzo di Microsoft Edge, Google Chrome o Mozilla Firefox.

Nota

Internet Explorer non funziona per il debug in questa situazione.
Premi F5 per iniziare il debug. Il comportamento previsto è descritto in Obiettivo di questa procedura dettagliata.

Se non ottieni i risultati desiderati, controlla i valori relativi impostati durante la registrazione dell'applicazione e la configurazione del codice SimpleSPA.html.

Vedere anche

Utilizzare OAuth con la condivisione di risorse tra origini per connettere un'applicazione su singola pagina a Microsoft Dynamics 365

Microsoft Dynamics 365

Last updated on 2017-03-03