Api Key issues

DeanWilson

I was going through this particular tutorial:
https://developers.arcgis.com/calcite-design-system/tutorials/create-a-mapping-app/

And it's got the information about using api keys. I built an api key for my test app (using vite) and after I setup the information to allow use of my enterprise portal (which is on version 11.4) and using 4.33 api, it's still prompting me for a login, even though I've selected the items in the webmap that I'm using the key to authenticate for. Here's my current page code (remember this is to test api key authentication):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calcite Web Map</title>
    <script src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js" type="module"></script>
    <script src="https://js.arcgis.com/4.33/"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css" />
    <script type="module">
      const esriConfig = await $arcgis.import('@arcgis/core/config.js')
      esriConfig.portalUrl = '<my enterprise portal>'
      esriConfig.apiKey = '<my api key>'
    </script>
    <script type="module" src="https://js.arcgis.com/4.33/map-components"></script>
  </head>
  <style>
    html,
    body,
    #webMap {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      display: flex;
    }
    </style>
  <body>
    <arcgis-map id="webMap" item-id="4f48ecb117874273a5f3a8bdc4d440f5">
      <arcgis-zoom position="top-right"></arcgis-zoom>
    </arcgis-map>
  </body>
</html>

Thoughts? I've been dealing with this all day and have been waiting for api keys to be available to enterprise users for authentication purposes for a while now.

Thanks!

Dean Wilson

DeanWilson

@Noah-Sager - Nevermind Noah. I did get it to display the map via the api keys. This worked, even with the web component arcgis-map:

<script type="module">
      const esriConfig = await $arcgis.import('@arcgis/core/config.js')

      const portalUrl = <my portal url>
      const serverUrl = <my server url>

      esriConfig.portalUrl = portalUrl
      esriConfig.apiKeys.scopes = [{
        token: <my api key>,
        urls: [portalUrl, serverUrl]
      }]
    </script>

Thanks for your help with this.

View solution in original post

Noah-Sager

Does it pass the API key as a token in the network traffic? If so, are there any errors or warnings in the console?

It's possible the API key is not set-up with the correct, permissions, or you might be running into a known limitation with Enterprise:
https://developers.arcgis.com/documentation/security-and-authentication/api-key-authentication/#arcg...

DeanWilson

Thanks for replying @Noah-Sager !

I'm actually NOT seeing the token get passed, neither in the url as a query string parameter or in the request headers as a token. What am I missing?

Noah-Sager

Ah ha, that's the problem, no API Key is getting sent. I think it's either the placement and/or the property value name. It's new at 4.33. For Enterprise, you want to use `apiKeys`, not `apiKey`.

https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#apiKeys

Here is a sample I tried to put together. The issue may be that the javascript logic needs to go after the html components logic.
https://codepen.io/noash/pen/XJbQZde?editors=1000

DeanWilson

Hey Noah. I see where this apiKeys property is being used in the api docs, but I'm trying to figure out how to use it similar to how you used it in your codepen because I have my code set like below and it's still asking me for a portal login. I need to point to my enterprise portal and use items from there, so would my esriConfig code look like this?

<script type="module">
  const esriConfig = await $arcgis.import("@arcgis/core/config.js")
  esriConfig.portalUrl = '<My portal url>'
  //Do I need to set esriConfig.serverUrl ??
  esriConfig.apiKeys.scopes = [{
    token: "API_KEY_FOR_SERVICE",
    //do I need serverUrl in urls array?
    urls: [portalURL]
  }];
</script>

Thanks!

Noah-Sager

Hey @DeanWilson, I'm running into issues with how to define the portal URL and use arcgis-map with the new apiKeys.

However, I tested this with core and it works for me. Try this with your portal and services and API Key and webmap: https://codepen.io/noash/pen/xbGeoeG?editors=1000

DeanWilson

Hey @Noah-Sager ,

Yeah it's still prompting me for credentials. Now, when I build my api keys credentials through the enterprise portal, I get to the privileges page and I leave that with nothing selected. I hit next and go to the items selection and select the webmap (and participating layers) that I'm trying to access. Is there a disconnect maybe that way? Here's the privileges page (I'm building the credential with the portal admin account):

Mine looks nothing like what is in the docs.

Noah-Sager

@DeanWilson - yeah, that doesn't look right to me. I use AGO, not Enterprise, but this is what it looks like for me.

Try this tutorial and make sure you select the ArcGIS Enterprise workflow on the right. Also ensure you have the correct user roles and permissions.

https://developers.arcgis.com/documentation/security-and-authentication/api-key-authentication/tutor...

Lastly, check out the doc for privileges and roles:

https://developers.arcgis.com/documentation/security-and-authentication/reference/privileges/#list-o...

DeanWilson

@Noah-Sager - I went through that tutorial. As far as the user account and roles, I'm actually using the portal administrator account so I would assume it has the privileges to do anything and everything right? But it doesn't give me the privileges options you show in AGOL.

Thoughts?

DeanWilson

@Noah-Sager - Nevermind Noah. I did get it to display the map via the api keys. This worked, even with the web component arcgis-map:

<script type="module">
      const esriConfig = await $arcgis.import('@arcgis/core/config.js')

      const portalUrl = <my portal url>
      const serverUrl = <my server url>

      esriConfig.portalUrl = portalUrl
      esriConfig.apiKeys.scopes = [{
        token: <my api key>,
        urls: [portalUrl, serverUrl]
      }]
    </script>

Thanks for your help with this.