use sharedkey mechanism for authenticating to AzMaps (#507)

* use sharedkey mechanism for authenticating to AzMaps

* Add Azure Maps subscription key configuration to environment files

* Add escape key functionality to close import dialog in explorer tests

Author: srijan55

.env.sample

@@ -16,5 +16,8 @@ REACT_APP_IMAGE_API_ROOT=https://planetarycomputer-staging.microsoft.com/api/f
 # Client Id for Azure Maps
 REACT_APP_AZMAPS_CLIENT_ID=8f49b6d6-5845-4e20-9015-9630df1ca8d2
 
+# Subscription Key for Azure Maps
+REACT_APP_AZMAPS_KEY=
+
 # URL for JHub cloned repo launch (including 'git-pull')
 REACT_APP_HUB_URL=

.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml

@@ -25,6 +25,7 @@ jobs:
       REACT_APP_AZMAPS_CLIENT_ID: ${{ secrets.AZMAPS_CLIENT_ID }}
       REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }}
       REACT_APP_HUB_URL: ${{ secrets.HUB_URL }}
+      REACT_APP_AZMAPS_KEY: ${{ secrets.AZMAPS_KEY }}
     steps:
       - uses: actions/checkout@v3
         with:

.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml

@@ -25,6 +25,7 @@ jobs:
       REACT_APP_AZMAPS_CLIENT_ID: ${{ secrets.AZMAPS_CLIENT_ID }}
       REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }}
       REACT_APP_HUB_URL: ${{ secrets.HUB_URL }}
+      REACT_APP_AZMAPS_KEY: ${{ secrets.AZMAPS_KEY }}
     steps:
       - uses: actions/checkout@v3
         with:

.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml

@@ -25,6 +25,7 @@ jobs:
       REACT_APP_AZMAPS_CLIENT_ID: ${{ secrets.AZMAPS_CLIENT_ID }}
       REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }}
       REACT_APP_HUB_URL: ${{ secrets.HUB_URL }}
+      REACT_APP_AZMAPS_KEY: ${{ secrets.AZMAPS_KEY }}
     steps:
       - uses: actions/checkout@v3
         with:

api/map-token/__init__.py

@@ -25,14 +25,17 @@ class TokenResponse(TypedDict):
 def main(req: func.HttpRequest) -> func.HttpResponse:
 
     logger.debug("Python HTTP trigger function processed a request.")
-    try:
-        logger.debug("Getting azure maps token")
-        token = credential.get_token("https://atlas.microsoft.com/.default")
-        logger.debug("Token acquired")
-
-        resp: TokenResponse = {"token": token.token, "expires_on": token.expires_on}
-
-        return func.HttpResponse(status_code=200, body=json.dumps(resp))
-    except ClientAuthenticationError:
-        logger.exception(f"Error getting azure maps token")
-        return func.HttpResponse("Error getting token", status_code=500)
+    # Comment out the implementation below and fail this call forcibly
+    return func.HttpResponse("This API is not implemented yet", status_code=501)
+    # Uncomment the implementation below to enable token retrieval
+    # try:
+    #     logger.debug("Getting azure maps token")
+    #     token = credential.get_token("https://atlas.microsoft.com/.default")
+    #     logger.debug("Token acquired")
+
+    #     resp: TokenResponse = {"token": token.token, "expires_on": token.expires_on}
+
+    #     return func.HttpResponse(status_code=200, body=json.dumps(resp))
+    # except ClientAuthenticationError:
+    #     logger.exception(f"Error getting azure maps token")
+    #     return func.HttpResponse("Error getting token", status_code=500)

cypress/e2e/explorer/selector.cy.js

@@ -75,6 +75,8 @@ describe("Explorer selector tests", () => {
     cy.contains("import planetary_computer");
     cy.contains("Copy");
 
+    // Close the dialog with escape
+    cy.get("body").type("{esc}");
     // Typing escape has closed the dialog
     cy.contains("import planetary_computer").should("not.exist");
 

docker-compose.yml

@@ -17,6 +17,7 @@ services:
       - REACT_APP_AZMAPS_CLIENT_ID
       - REACT_APP_ONEDS_TENANT_KEY
       - REACT_APP_HUB_URL
+      - REACT_APP_AZMAPS_KEY
     volumes:
       - .:/usr/src
       - ~/.npm:/root/.npm

src/pages/Explore/components/Map/index.tsx

@@ -59,9 +59,8 @@ const ExploreMap = () => {
         style: DEFAULT_MAP_STYLE,
         renderWorldCopies: true,
         authOptions: {
-          authType: atlas.AuthenticationType.anonymous,
-          clientId: AZMAPS_CLIENT_ID,
-          getToken: fetchMapToken,
+          authType: atlas.AuthenticationType.subscriptionKey,
+          subscriptionKey: process.env.REACT_APP_AZMAPS_KEY,
         },
         transformRequest: addEntityHeader,
       });