Overzicht: SimpleSPA-toepassing aanmelden en configureren met adal.js

Artikel
03/03/2017

Gepubliceerd: januari 2017

Is van toepassing op: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2016, Dynamics CRM Online

Dit overzicht beschrijft het proces van het registreren en configureren van een eenvoudige Single Page Application (SPA) om toegang te krijgen tot gegevens in Update voor Microsoft Dynamics CRM Online 2016 met adal.js en CORS (Cross-origin Resource Sharing).Meer informatie:Een toepassing met één pagina door middel van OAuth met Cross-Origin Resource Sharing verbinding laten maken met Microsoft Dynamics 365.

Vereisten

Update voor Microsoft Dynamics CRM Online 2016
U moet een Microsoft Dynamics 365 (online)-systeemgebruikersaccount met beheerdersrol hebben voor Microsoft Office 365.
Een Microsoft Azure-abonnement voor toepassingsregistratie. Een proefaccount werkt eveneens.
Microsoft Visual Studio 2015

Doel van dit overzicht

Als u dit overzicht voltooit, kunt u een SPA-toepassing uitvoeren in Visual Studio die het voor een gebruiker mogelijk maakt om gegevens te verifiëren en op te halen uit Microsoft Dynamics 365 (online). Deze toepassing bestaat uit één HTML-pagina.

Als u de eerste keer fouten opspoort in de toepassing, is er alleen een knop Aanmelden.

Klik op Aanmelden waarna u wordt omgeleid naar een aanmeldpagina om uw gegevens in te voeren.

Nadat u uw gegevens hebt ingevoerd, gaat u terug naar de HTML-pagina waar u ziet dat de knop Aanmelden is verborgen. Nu zijn echter de knoppen Afmelden en Accounts ophalen zichtbaar. U ziet ook een welkomstbericht met informatie uit uw gebruikeraccount.

Klik op de knop Accounts ophalen om 10 accountrecords op te halen uit uw Microsoft Dynamics 365-organisatie. De knop Accounts ophalen wordt uitgeschakeld zoals in de onderstaande schermafbeelding:

De pagina SimpleSPA

Notitie

Het initiële laden van gegevens uit Microsoft Dynamics 365 kan langzaam verlopen omdat er verificatietaken worden uitgevoerd, maar de volgende bewerkingen zullen veel sneller verlopen.

Ten slotte kunt u op de knop Afmelden klikken.

Notitie

Deze SPA-toepassing is niet bedoeld om een patroon weer te geven voor het ontwikkelen van robuuste SPA-toepassingen. Het is vereenvoudigd met als doel het registreren en configureren van het proces.

Een webtoepassingsproject maken

Maak met Microsoft Visual Studio 2015 een nieuw ASP.NET-webtoepassingsproject en gebruik de sjabloon Leeg. U kunt een willekeurige naam gebruiken voor het project.

U zou ook vroegere versies van Microsoft Visual Studio moeten kunnen gebruiken, maar in deze stappen wordt het gebruik van Visual Studio 2015 beschreven.

Voeg een nieuwe HTML-pagina met de naam SimpleSPA.html toe aan het project en plak de volgende code:

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

Stel deze pagina in als de startpagina voor het project
Selecteer Web in de eigenschappen van het project en bekijk onder Servers de Project URL. Het zou eruit moeten zien als https://localhost:46575/. Let op het poortnummer dat wordt gegenereerd. U hebt dit in de volgende stap nodig.

Zoek binnen de pagina SimpleSPA.html de volgende configuratievariabelen en stel deze overeenkomstig in. U kunt de clientId instellen nadat u het volgende gedeelte voor het overzicht hebt voltooid.

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

De toepassing registreren

Meld u aan bij de Microsoft Azure-beheerportal door een account te gebruiken met beheerdersmachtiging. U moet gebruikmaken van een account in hetzelfde Office 365-abonnement (houder) waarmee u de app wilt registreren. U kunt ook toegang krijgen tot de Microsoft Azure-portal via het Office 365-beheercentrum door het item BEHEER in het linkernavigatievenster uit te vouwen en Azure AD te selecteren.

Als u geen Azure-houder (account) hebt of er wel één hebt maar uw Office 365-abonnement met Microsoft Dynamics 365 (online) is niet beschikbaar in uw Azure-abonnement, volgt u de instructies in het onderwerp Toegang tot Azure Active Directory opzetten voor uw ontwikkelaarssite om de twee accounts te koppelen.

Als u geen account hebt, kunt u zich voor een account aanmelden met een creditcard. Het account is echter gratis voor toepassingsregistratie en er zal niets in rekening worden gebracht als u de procedures in dit onderwerp volgt voor het registeren van een of meer apps.Meer informatie:Active Directory-prijsgegevens
Klik op Active Directory in de linkerkolom van de pagina. U moet de linkerkolom misschien scrollen om het pictogram en label van Active Directory te zien.
Klik op de gewenste tenantdirectory in de directorylijst.

Als de map voor uw Dynamics 365-houder niet wordt weergegeven in de mappenlijst, klikt u op Toevoegen en selecteert u vervolgens Bestaande map gebruiken in het dialoogvenster. Volg de aanwijzingen en instructies, en ga daarna terug naar stap 1.
Met de doelmap geselecteerd klikt u op Toepassingen (bijna boven aan de pagina) en klikt u vervolgens op Toevoegen.
Klik in het dialoogvenster Wat wilt u doen? vervolgens op de optie Voeg een toepassing toe die mijn organisatie ontwikkelt.
Als hierom wordt gevraagd, geeft u een naam als ‘SimpleSPA’ op voor de toepassing en kiest u op type: Webtoepassing en/of Web-API en klikt u op de pijl-rechts om door te gaan. Klik op een vraagteken ? voor meer informatie over de juiste waarden voor elk invoerveld.
Voer de volgende informatie in:
- Aanmeldings-URL
  Dit is de URL waarnaar de gebruiker na het aanmelden moet worden omgeleid. Voor foutopsporingdoeleinden in Visual Studio moet dit https://localhost:####/SimpleSPA.html zijn waarbij #### het poortnummer is dat u hebt ontvangen in stap 4 van de procedureEen webtoepassingproject maken.
- APP ID URI
  Dit moet een unieke id voor de toepassing zijn. Gebruik https://XXXX.onmicrosoft.com/SimpleSPA waarbij XXXX de Active Directory-tenant is.
Klik in het tabblad van de zojuist geregistreerde app op Configureren, zoek de Client-ID en kopieer deze.

Stel de variabele clientId op de SimpleSPA.html-pagina in op deze waarde. Raadpleeg stap 5 van de procedure Een webtoepassingproject maken.
Schuif naar het einde van de pagina en klik Toepassing toevoegen. Selecteer in het dialoogvenster Dynamics 365 Online en sluit het dialoogvenster.
Onder machtigingen voor andere toepassingen vindt u een rij voor Dynamics 365 Online en Gedelegeerde machtigingen: 0. Selecteer deze en Toegang tot Dynamics 365 (online) verkrijgen als organisatiegebruikers.
De toepassingregistratie opslaan
Selecteer onderaan Manifest beheren en kies Manifest downloaden.
Open het JSON-bestand dat u hebt gedownload en zoek de regel: "oauth2AllowImplicitFlow": false,, wijzig false in true en sla het bestand op.
Ga weer terug naar Manifest beheren. Kies Manifest uploaden en upload het JSON-bestand dat u zojuist hebt opgeslagen.

Foutopsporing in toepassing

Stel de browser in om Microsoft Edge, Google Chrome of Mozilla Firefox te gebruiken.

Notitie

Internet Explorer werkt niet voor foutopsporing in deze situatie.
Druk op F5 om foutopsporing te starten. U kunt het gedrag verwachten dat wordt beschreven in Doel van dit overzicht.

Als u niet de verwachte resultaten krijgt, worden de waarden die u hebt ingesteld bij het registreren van de toepassing en het configureren van de SimpleSPA.html-code, nogmaals gecontroleerd.

Zie ook

Een toepassing met één pagina door middel van OAuth met Cross-Origin Resource Sharing verbinding laten maken met Microsoft Dynamics 365

Microsoft Dynamics 365

Delen via