fix(arcgis-rest-request): add support for server credentials (#965)

* fix(arcgis-rest-request): add support for server credentials * chore: Apply suggestions from code review Co-authored-by: Gavin Rehkemper <gavinr@users.noreply.github.com> * chore: remove old exports * chore: force latest package versions * chore: force update deps * chore: merge latest, fix auth reference * chore: doc fix Co-authored-by: Gavin Rehkemper <gavinr@users.noreply.github.com>
Esri · Mar 22, 2022 · b063bcc · b063bcc
1 parent 3fd5712
commit b063bcc
Show file tree

Hide file tree

Showing 9 changed files with 308 additions and 732 deletions.
diff --git a/demos/jsapi-integration/README.md b/demos/jsapi-integration/README.md
@@ -19,7 +19,10 @@ session.getToken("https://www.arcgis.com/sharing/rest").then(() => {
 
 // from jsapi
 esriId.getCredential("https://www.arcgis.com/sharing/rest").then((cred) => {
-  const session = UserSession.fromCredential(cred);
+  const serverInfo = esriId.findServerInfo(
+    "https://www.arcgis.com/sharing/rest"
+  );
+  const session = UserSession.fromCredential(cred, serverInfo);
 });
 ```
 

diff --git a/demos/jsapi-integration/authenticate.html b/demos/jsapi-integration/authenticate.html
@@ -6,24 +6,12 @@
   </head>
   <body>
     <script src="@esri/arcgis-rest-request/dist/bundled/request.umd.js"></script>
+    <script src="./config.js"></script>
     <script>
-      /* in a production app, clientId could be hardcoded. here we're using a regex to extract it from the state parameter in the OAuth2 server response to make the demo more interchangeable.
-
-      this relies on the fact that the ClientId is associated with the state parameter internally when another value isn't supplied manually.
-      */
-      const match = window.location.href.match(
-        /&state=([^&]+)/
-      );
-      const clientId = match[1];
-      let session;
-      function processAuthentication() {
-        window.location.href = './';
-        session = arcgisRest.UserSession.completeOAuth2({
-          clientId: clientId,
-        });
-        localStorage.setItem('__ARCGIS_REST_USER_SESSION__', session.serialize());
-      }
-      processAuthentication();
+        arcgisRest.ArcGISIdentityManager.completeOAuth2({
+          clientId: config.clientId,
+          redirectUrl: config.redirectUri
+        })
     </script>
   </body>
 </html>
diff --git a/demos/jsapi-integration/config.js b/demos/jsapi-integration/config.js
@@ -3,4 +3,7 @@ You can generate your own clientid by creating an application on the ArcGIS for
 
 once you have a clientid of your own, copy/paste it here and rename this file 'config.js'
 */
-let clientId = "S19JZF92TRf2HZit";
+const config = {
+  clientId: "3CiiHWyTNMIRNyF1",
+  redirectUri: "http://localhost:8080/authenticate.html"
+};
diff --git a/demos/jsapi-integration/index.html b/demos/jsapi-integration/index.html
@@ -33,23 +33,27 @@
   <body>
     <div id="viewDiv"></div>
     <script>
-      // First, log in
-      const redirect_uri = window.location.origin + window.location.pathname + "authenticate.html";
-
-      arcgisRest.UserSession.beginOAuth2({
-          clientId: clientId,
-          redirectUri: redirect_uri,
+      // create a variable to store our session.
+      let session;
+      arcgisRest.ArcGISIdentityManager.beginOAuth2({
+          clientId: config.clientId,
+          redirectUri: config.redirectUri,
           popup: true
-      }).then(session => {
-        // Next, fetch a private item's data (not just the metadata)
-        // 
-        // Change this to an itemId of a private webmap that you have access too.
-        const itemId = "75f08b51fa714d9c863aaf002dfba0c6";
-
-        return arcgisRest.getItemData(itemId, { authentication: session })
-      }).then(response => {
+      }).then(s => {
+        session = s;
+        // fetch the users items (up to 100)
+        return arcgisRest.getUserContent({ authentication: session, num: 100 })
+      }).then(userContent =>{
+        // find a web map in the users items
+        const webMapItem = userContent.items.find(t => t.type === "Web Map");
+        return webMapItem;
+      } ).then(webMapItem => {
+        if(!webMapItem) {
+          alert("No web map found in first 100 items");
+          return
+        }
 
-        // once we have the private item, we can create a map
+        // once we have the item, we can create a map
         // NOTE: this is where you would lazy-load the ArcGIS API for JavaScript
         require([
           "esri/identity/IdentityManager",
@@ -62,14 +66,15 @@
           // JavaScript Identity Manager
           esriId.registerToken(session.toCredential());
 
-          // display the title of its basemap
-          console.debug(response);
-          console.debug('baseMap title:', response.baseMap.title);
+          console.debug('Web map:', webMapItem);
 
           // create a map with the item
+          // the JS API will automatically discover all portals and severs associated with the webmap.
+          // this most likly will include https://arcgis.com/sharing/rest/ which is the ArGIS Online portal 
+          // due to the map has a basemap.
           var webmap = new WebMap({
             portalItem: {
-              id: itemId
+              id: webMapItem.id
             }
           });
 
@@ -79,11 +84,18 @@
             container: "viewDiv"
           });
 
-          // you can also pass credentials in the other direction if you have credentials in teh JS API IdentityManager class
-          esriId.getCredential("https://arcgis.com/sharing/rest/")
-            .then(cred => {
-              const session2 = arcgisRest.UserSession.fromCredential(cred);
-            });
+          // Once the web map loads the JS API should be "aware" of the ArcGIS.com portal at https://arcgis.com/sharing/rest/.
+          // Using the findCredential and findServerInfo methods we can create an ArcGISIdentityManager
+          // for use in REST JS from the JS API. You could also call `esriId.getCredential("https://arcgis.com/sharing/rest/")`
+          // to forece this.
+          webmap.watch("loaded", function (loaded) {
+            if(loaded) {
+              const credential = esriId.findCredential("https://arcgis.com/sharing/rest/");
+              const serverInfo = esriId.findServerInfo("https://arcgis.com/sharing/rest/");
+              const session2 = arcgisRest.ArcGISIdentityManager.fromCredential(credential, serverInfo);
+              console.log('Session from ArcGIS REST JS:', session2);
+            }
+          });
         });
       });
     </script>