Gennemgang: Registrere og konfigurere SimpleSPA-program med adal.js

Artikel
03/03/2017

Udgivet: januar 2017

Gælder for: Dynamics 365 (online), Dynamics 365 (on-premises), Dynamics CRM 2016, Dynamics CRM Online

I denne gennemgang beskrives processen for registrering og konfiguration af det enkleste Single Page Program (SPA) med henblik på at få adgang til data i Opdatering til Microsoft Dynamics CRM Online 2016 ved hjælp af adal.js og Cross-Origin Resource Sharing (CORS).Flere oplysninger:Bruge OAuth med Cross-Origin Resource Sharing til at oprette forbindelse til et enkelt side-program til Microsoft Dynamics 365.

Forudsætninger

Opdatering til Microsoft Dynamics CRM Online 2016
Du skal have en Microsoft Dynamics 365 (online)-systembrugerkonto med administratorrollen for Microsoft Office 365.
Et abonnement på Microsoft Azure til programregistrering. En prøveversionskonto vil også fungere.
Microsoft Visual Studio 2015

Målet med denne gennemgang

Når du har fuldført denne gennemgang, vil du kunne køre et enkelt SPA-program i Visual Studio, som giver en bruger mulighed for at godkende og hente data fra Microsoft Dynamics 365 (online). Dette program består af en enkelt HTML-side.

Når du foretager fejlfinding af programmet, vil der som udgangspunkt kun være en Logon-knap.

Klik på Logon , og bliv ført tilbage til en logonside, hvor du kan angive dine legitimationsoplysninger.

Når du har angivet dine legitimationsoplysninger, vender du tilbage til den HTML-side, hvor Logon-knappen er skjult, og en Log af-knap og en Hent konti-knap er synlige. Du kan også se en hilsen, som bruger oplysninger fra din brugerkonto.

Klik på knappen Hent konti for at hente 10 kontoposter fra din Microsoft Dynamics 365-organisation. Knappen Hent konti er deaktiveret, som vist på følgende skærmbillede:

SimpleSPA-siden

Bemærk

Den første indlæsning af data fra Microsoft Dynamics 365 kan være langsom, mens de handlinger, der understøtter godkendelse, udføres, men efterfølgende handlinger er meget hurtigere.

Til sidst kan du klikke på Log af-knappen for at logge af.

Bemærk

Dette SPA-program er ikke beregnet til at repræsentere et mønster for at udvikle robuste SPA-programmer. Det er blevet lettere at fokusere på processen for registrering og konfiguration af programmet.

Oprette et webprogramprojekt

Ved hjælp af Microsoft Visual Studio 2015 kan du oprette et nyt projekt i ASP.NET-webprogram og bruge skabelonen Tom. Du kan navngive projektet, som du ønsker.

Du vil også kunne bruge tidligere versioner af Microsoft Visual Studio, men disse trin beskriver brugen af Visual Studio 2015.

Tilføj en ny HTML-side med navnet SimpleSPA.html til projektet, og Indsæt følgende kode:

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

Angive denne side som startside for projektet
I egenskaberne for projektet skal du vælge Web, og under Servere skal du notere URL-Adressen til Project. Det vil være noget i stil med https://localhost:46575/. Bemærk det portnummer, der er genereret. Du har brug for navnet i næste trin.

Find følgende konfigurationsvariabler på siden SimpleSPA.html, og angiv dem i overensstemmelse hermed. Du kan angive clientId, når du har fuldført den næste del af gennemgangen.

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

Registrere programmet

Log på til Microsoft Azure-administrationsportalen ved hjælp af en konto med administratorrettigheder. Du skal bruge en konto i det samme Office 365-abonnement (lejer), som du vil registrere appen i. Du kan også få adgang til Microsoft Azure portalen via Office 365 Administration ved at udvide elementet ADMIN i den venstre navigationsrude og vælge Azure AD.

Hvis du ikke har en Azure-lejer (firma), eller du har en, men dit Office 365 abonnement på Microsoft Dynamics 365 (online) ikke er tilgængeligt i dit Azure-abonnement, skal du følge instruktionerne i emnet Konfigurere Azure Active Directory-adgang til dit udviklerwebsted for at tilknytte to konti.

Hvis du ikke har en konto, kan du tilmelde dig en ved hjælp af et kreditkort. Kontoen er gratis, når du registrerer dit program, og dit kreditkort debiteres ikke, hvis du blot følger de procedurer, der er vist i dette emne, til registrering af en eller flere apps.Flere oplysninger:Active Directory-prissætningsdetaljer
Klik på Active Directory i kolonnen til venstre på siden. Du skal muligvis rulle den venstre kolonne for at se Active Directory-ikonet og etiketten.
Klik på den ønskede lejermappe i mappevisningen.

Hvis din Dynamics 365-lejermappe ikke vises i mappelisten, skal du klikke på Tilføj og derefter vælge Brug eksisterende mappe i dialogboksen. Følg vejledningen og instruktionerne, og gå derefter tilbage til trin 1.
Med destinationsmappen valgt skal du klikke på Programmer (næsten øverst på siden) og derefter klikke på Tilføj.
Klik på Tilføj et program, som organisationen udvikler i dialogboksen Hvad vil du foretage dig?.
Angiv et navn til dit program, når du bliver bedt om det, f.eks. "SimpleSPA", og vælg typen: Webprogram og/eller Web-API, og klik derefter på højrepilen for at fortsætte. Klik på et spørgsmålstegn ? for at få flere oplysninger om de relevante værdier for hvert input felt.
Angiv følgende oplysninger:
- URL-adresse til logon
  Dette er den URL-adresse, som brugeren omdirigeres til, når der logges på. I Visual Studio skal den i forbindelse med fejlfinding være https://localhost:####/SimpleSPA.html, hvor ### repræsenterer det portnummer, du fik fra trin 4 i proceduren Oprette et webprogramprojekt.
- URI for APP-ID
  Dette skal være et entydig id for programmet. Brug https://XXXX.onmicrosoft.com/SimpleSPA, hvor XXXX er Active Directory-lejeren.
Når fanen for den nyligt registrerede app er valgt, skal du klikke på Konfigurer, finde Klient-id og kopiere det.

Angiv variablen clientId på siden SimpleSPA.html til denne værdi. Se trin 5 i proceduren Oprette et webprogramprojekt.
Rul til bunden af siden, og klik på Tilføj program. Vælg Dynamics 365 Online i dialogboksen, og luk dialogboksen.
Under tilladelser til andre programmer kan du finde en række for Dynamics 365 Online og Delegerede tilladelser: 0. Vælg denne indstilling, og tilføj Få adgang til Dynamics 365 (online) som organisationsbrugere.
Gemme registreringen af programmet
Nederst skal du vælge Administrer manifest og Hent manifest.
Åbn den JSON-fil, du hentede, find linjen: "oauth2AllowImplicitFlow": false,, skift false til true, og gem filen.
Gå tilbage til Administrer manifest igen. Vælg Overfør manifest, og overfør den JSON-fil, du lige har gemt.

Fejlfinding af programmet

Indstil browseren til at bruge Microsoft Edge, Google Chrome eller Mozilla Firefox.

Bemærk

Internet Explorer fungerer ikke til fejlfinding i denne situation.
Tryk på F5 for at starte fejlfindingen. Du skal forvente den funktionsmåde, der er beskrevet i Målet med denne gennemgang.

Hvis du ikke får de forventede resultater, skal du dobbelttjekke de værdier, du angav ved registrering af programmet og konfiguration af SimpleSPA.html-koden.

Se også

Bruge OAuth med Cross-Origin Resource Sharing til at oprette forbindelse til et enkelt side-program til Microsoft Dynamics 365

Microsoft Dynamics 365

Del via