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

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.