Updated resource provisioning script with creation and assignment of Oauth roles associated with app registrations governing our function app and static website

Author: hvalfangst

.github/workflows/deploy_to_azure.yml

@@ -89,6 +89,9 @@ jobs:
       - name: Build React app
         run: npm run build
         working-directory: ./client
+        env:
+          STATC_WEB_APP_CLIENT_ID: ${{ secrets.STATC_WEB_APP_CLIENT_ID }}
+          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
 
       - name: Zip build folder
         run: zip -r build.zip ./client/build
@@ -117,7 +120,7 @@ jobs:
       - name: Login to Azure with OIDC
         uses: azure/login@v2
         with:
-          client-id: ${{ secrets.AZURE_CLIENT_ID }}
+          client-id: ${{ secrets.AZURE_GITHUB_SP_CLIENT_ID }}
           tenant-id: ${{ secrets.AZURE_TENANT_ID }}
           subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
 

README.md

@@ -6,6 +6,9 @@ Once the CSV has been uploaded to the storage blob, another, blob-triggered Azur
 The computed statistics are then stored in a new blob container, which is used to serve the results to the user.
 These two functions are defined in the python script [function_app.py](hvalfangst_function/function_app.py) - which is the main entrypoint of our Azure Function App instance.
 
+The SPA is protected with Oauth2.0 authorization code flow with PKCE and OIDC. The user is redirected to the Azure AD login page, where they must authenticate before being redirected back to the SPA.
+
+
 The associated Azure infrastructure is deployed with a script (more on that below).
 
 A branch-triggered pipeline has been set up to deploy our code to the respective Azure resources using a GitHub Actions Workflows [script](.github/workflows/deploy_to_azure.yml). 
@@ -24,7 +27,7 @@ Thus, deploying the website is simply a matter of uploading the static files to
 
 ## Allocate resources
 
-The shell script [allocate_resources](infra/allocate_resources.sh) creates Azure resources using the Azure CLI and a
+The shell script [allocate_resources](infra/allocate_resources.sh) creates Azure resources using the Azure CLI in conjunction with a
 [Bicep](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/overview?tabs=bicep) template [file](infra/main.bicep). 
 
 It will create the following hierarchy of resources:
@@ -47,6 +50,26 @@ graph TD
     B -->|Contains| F
 ```
 
+## Registrations
+In addition to the resources listed above, the script will also create a **service principal** and two Microsoft Entra ID **app registrations.** 
+
+### Service Principal for GitHub Actions
+The service principal has been assigned contributor role to our resource group, which is sufficient in order to deploy the static web app to the storage blob.
+It has been assigned a federated credential configured to work with this repository as it is utilized in our CI/CD [GitHub Actions Workflow script](.github/workflows/deploy_to_azure.yml).
+
+### App Registration for Azure Function App
+
+Exposes the scopes **Csv.Writer** and **Csv.Reader** under URI **api://hvalfangst-function-app**
+
+![img.png](images/img.png)
+
+### App Registration for SPA
+
+Has a redirect URI configured to the static web app's URL and the permissions **Csv.Writer** and the OIDC ones.
+
+![img_1.png](images/img_1.png)
+
+
 ## GitHub secrets
 Four secrets are required in order for the GitHub Actions Workflow script to deploy the code to the Azure resources. 
 As may be observed in the [script](.github/workflows/deploy_to_azure.yml), these are:
@@ -56,4 +79,33 @@ As may be observed in the [script](.github/workflows/deploy_to_azure.yml), these
 - **AZURE_TENANT_ID**: Used to authenticate the service principal in order to deploy the static web app
 - **PUBLISH_PROFILE**: Used to deploy our two functions to the Azure Function App
 
-![img_1.png](images/img_1.png)
+![secrets.png](images/secrets.png)
+
+## Usage
+After provisioning resources, setting up secrets, and pushing the code to the repository, one
+may access the static web app by navigating to the following URL:
+
+```plaintext
+https://<storage_account_name>.z6.web.core.windows.net
+```
+
+You will be presented with the following.
+
+![img_2.png](images/img_2.png)
+
+Click on **Sign In** to initiate the OIDC flow - which redirects to the Azure AD permission consent screen.
+
+![oidc.png](images/oidc.png)
+
+Clik on **Accept** and check off the **Consent on behalf of your organization** box to be redirected back to the SPA, where you will be greeted with the following.
+
+![authenticated_user.png](images/authenticated_user.png)
+
+Proceed to click on **Upload** to choose a file to upload. Pick the CSV file named [input](input.csv) which has been provided for this purpose.
+
+![img_5.png](images/img_5.png)
+
+![img_6.png](images/img_6.png)
+
+The file name will be displayed in the input field. Click on **Upload** to attempt to upload the file to the storage blob.
+

client/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { PublicClientApplication } from '@azure/msal-browser';
 import { Buffer } from 'buffer';
 
@@ -7,19 +7,20 @@ window.Buffer = Buffer;
 // MSAL Configuration
 const msalConfig = {
     auth: {
-        clientId: 'x',
-        authority: 'https://login.microsoftonline.com/x',
+        clientId: process.env.STATIC_WEB_APP_CLIENT_ID,
+        authority: `https://login.microsoftonline.com/${process.env.AZURE_TENANT_ID}`,
         redirectUri: window.location.origin,
     },
 };
 
 const msalInstance = new PublicClientApplication(msalConfig);
 
-
 const App = () => {
     const [file, setFile] = useState(null);
     const [error, setError] = useState('');
     const [modalVisible, setModalVisible] = useState(false);
+    const [user, setUser] = useState(null);
+    const [isInitialized, setIsInitialized] = useState(false);
 
     const handleFileChange = (e) => {
         setError('');
@@ -42,13 +43,15 @@ const App = () => {
             }
 
             const tokenResponse = await msalInstance.acquireTokenSilent({
-                scopes: ["api://61b4a548-3979-48df-b2df-37dc4e5e0e02/.default"],
+                scopes: ['api://hvalfangst-function-app/Csv.Writer'],
                 account
             });
 
+            console.log('Token response:', tokenResponse);
+
             const token = tokenResponse.accessToken;
 
-            const endpoint = 'x';
+            const endpoint = 'https://hvalfangstlinuxfunctionapp.azurewebsites.net/api/upload_csv';
 
             // Read the file as a text string
             const fileContent = await file.text();
@@ -67,6 +70,8 @@ const App = () => {
                 throw new Error(`Failed to upload: ${errorMessage}`);
             }
 
+            console.log('Response:', response)
+
             console.log('File uploaded successfully');
             setModalVisible(true); // Show success modal
         } catch (error) {
@@ -90,25 +95,52 @@ const App = () => {
     const handleSignIn = async () => {
         try {
             await msalInstance.initialize();
-            await msalInstance.loginPopup({
-                scopes: ['x'],
+            setIsInitialized(true);
+            const response = await msalInstance.loginPopup({
+                scopes: ['openid'],
             });
+            console.log('Sign in response:', response);
             console.log('User signed in successfully');
+            setUser(response.account);
         } catch (error) {
             console.error('Error signing in:', error);
             setError(`Error signing in: ${error.message}`);
         }
     };
 
-    const handleSignOut = () => {
-        msalInstance.logoutPopup();
+    const handleSignOut = async () => {
+        if (!isInitialized) {
+            console.error('MSAL instance is not initialized.');
+            return;
+        }
+        await msalInstance.logoutPopup();
+        setUser(null);
     };
 
+    useEffect(() => {
+        const initializeMsal = async () => {
+            await msalInstance.initialize();
+            setIsInitialized(true);
+            const accounts = msalInstance.getAllAccounts();
+            if (accounts.length > 0) {
+                setUser(accounts[0]);
+            }
+        };
+
+        initializeMsal();
+    }, []);
+
     return (
         <div className="csv-uploader">
             <h1>CSV Uploader</h1>
-            <button onClick={handleSignIn}>Sign In</button>
-            <button onClick={handleSignOut}>Sign Out</button>
+            {user ? (
+                <div>
+                    <p>Welcome, {user.name}</p>
+                    <button onClick={handleSignOut}>Sign Out</button>
+                </div>
+            ) : (
+                <button onClick={handleSignIn}>Sign In</button>
+            )}
 
             <input type="file" accept=".csv" onChange={handleFileChange} />
             <button onClick={handleFileUpload}>Upload</button>
@@ -127,4 +159,4 @@ const App = () => {
     );
 };
 
-export default App;
+export default App;

images/authenticated_user.png

@@ -108,37 +108,133 @@ if [ $? -ne 0 ]; then
     exit 1
 fi
 
-# Set up app registration for function app
+
+# Set up app registration for the function app
 echo -e "${YELLOW}Setting up app registration for function app...${RESET}"
 FUNCTION_APP_CLIENT_ID=$(az ad app create \
   --display-name "hvalfangst-function-app" \
+  --identifier-uris "api://hvalfangst-function-app" \
   --query appId -o tsv)
-
 if [ $? -ne 0 ] || [ -z "$FUNCTION_APP_CLIENT_ID" ]; then
     echo -e "${RED}Failed to set up app registration or retrieve the app ID.${RESET}"
     exit 1
 fi
 
-# Set up app settings for the function app
-echo -e "${YELLOW}Setting up app settings for function app...${RESET}"
-az functionapp config appsettings set \
-    --name ${FUNCTION_APP_NAME} \
-    --resource-group ${RESOURCE_GROUP} \
-    --settings TENANT_ID=${TENANT_ID} FUNCTION_APP_CLIENT_ID=${FUNCTION_APP_CLIENT_ID}
-if [ $? -ne 0 ]; then
-    echo -e "${RED}Failed to set up app settings for function app.${RESET}"
+# Get the object ID of the app registration
+FUNCTION_APP_OBJECT_ID=$(az ad app show --id $FUNCTION_APP_CLIENT_ID --query id -o tsv)
+
+# Get an access token for the Microsoft Graph API to be used for patching app regs associated with function app and static website
+TOKEN=$(az account get-access-token --resource https://graph.microsoft.com --query accessToken -o tsv)
+if [ $? -ne 0 ] || [ -z "$TOKEN" ]; then
+    echo -e "${RED}Failed to get access token for Microsoft Graph API.${RESET}"
     exit 1
 fi
 
+# Generate UUIDs for the permissions
+CSV_READER_UUID=$(python -c 'import uuid; print(str(uuid.uuid4()))')
+CSV_WRITER_UUID=$(python -c 'import uuid; print(str(uuid.uuid4()))')
+
+# Add permissions to the app registration by calling the Microsoft Graph API with a PATCH request
+echo -e "${YELLOW}Creating scopes for the Function App...${RESET}"
+curl -X PATCH -H "Authorization: Bearer $TOKEN" \
+     -H "Content-Type: application/json" \
+     -d "{
+           \"api\": {
+               \"oauth2PermissionScopes\": [
+                   {
+                       \"id\": \"$CSV_READER_UUID\",
+                       \"adminConsentDescription\": \"Allows downloading of CSV files\",
+                       \"adminConsentDisplayName\": \"Allows downloading of CSV files\",
+                       \"isEnabled\": true,
+                       \"type\": \"Admin\",
+                       \"value\": \"Csv.Reader\"
+                   },
+                   {
+                       \"id\": \"$CSV_WRITER_UUID\",
+                       \"adminConsentDescription\": \"Allows uploading of CSV files\",
+                       \"adminConsentDisplayName\": \"Allows uploading of CSV files\",
+                       \"isEnabled\": true,
+                       \"type\": \"Admin\",
+                       \"value\": \"Csv.Writer\"
+                   }
+               ]
+           }
+       }" \
+     "https://graph.microsoft.com/v1.0/applications/$FUNCTION_APP_OBJECT_ID"
+
 # Set up app registration for the static web app
 echo -e "${YELLOW}Setting up app registration for static web app...${RESET}"
-STATIC_WEB_APP_CLIENT_ID=$(az ad app create \
+app_registration=$(az ad app create \
   --display-name "hvalfangst-static-web-app" \
-  --query appId -o tsv)
+  --query '{objectId: id, appId: appId}' -o json)
+
+# Extract the object ID and client ID
+STATIC_WEB_APP_OBJECT_ID=$(echo $app_registration | jq -r '.objectId')
+STATIC_WEB_APP_CLIENT_ID=$(echo $app_registration | jq -r '.appId')
 
-if [ $? -ne 0 ] || [ -z "STATIC_WEB_APP_CLIENT_ID" ]; then
+if [ $? -ne 0 ] || [ -z "$STATIC_WEB_APP_OBJECT_ID" ] || [ -z "$STATIC_WEB_APP_CLIENT_ID" ]; then
     echo -e "${RED}Failed to set up app registration or retrieve the app ID.${RESET}"
     exit 1
 fi
 
+echo -e "${GREEN}Static Web App registration set up successfully.${RESET}"
+echo -e "${GREEN}Static Web App Object ID: $STATIC_WEB_APP_OBJECT_ID${RESET}"
+echo -e "${GREEN}Static Web App Client ID: $STATIC_WEB_APP_CLIENT_ID${RESET}"
+
+echo -e "${YELLOW}Setting redirect URIs for the static web app...${RESET}"
+az rest --method PATCH \
+  --uri "https://graph.microsoft.com/v1.0/applications/${STATIC_WEB_APP_OBJECT_ID}" \
+  --headers 'Content-Type=application/json' \
+  --body '{
+    "spa": {
+      "redirectUris": [
+        "http://localhost:3000",
+        "https://hvalfangststorageaccount.z6.web.core.windows.net"
+      ]
+    }
+  }'
+
+# Add permissions to the app registration associated with website by calling the Microsoft Graph API with a PATCH request
+echo -e "${YELLOW}Adding OpenID permissions for Microsoft Graph API to Static Website${RESET}"
+curl -X PATCH -H "Authorization: Bearer $TOKEN" \
+     -H "Content-Type: application/json" \
+     -d "{
+           \"requiredResourceAccess\": [
+               {
+                   \"resourceAppId\": \"00000003-0000-0000-c000-000000000000\",
+                   \"resourceAccess\": [
+                       {
+                           \"id\": \"e1fe6dd8-ba31-4d61-89e7-88639da4683d\",
+                           \"type\": \"Scope\"
+                       },
+                       {
+                           \"id\": \"14dad69e-099b-42c9-810b-d002981feec1\",
+                           \"type\": \"Scope\"
+                       }
+                   ]
+               },
+               {
+                   \"resourceAppId\": \"$FUNCTION_APP_CLIENT_ID\",
+                   \"resourceAccess\": [
+                       {
+                           \"id\": \"$CSV_WRITER_UUID\",
+                           \"type\": \"Scope\"
+                       }
+                   ]
+               }
+           ]
+       }" \
+     "https://graph.microsoft.com/v1.0/applications/$STATIC_WEB_APP_OBJECT_ID"
+
+# Set up app settings for the function app
+echo -e "${YELLOW}Setting up app settings for function app...${RESET}"
+az functionapp config appsettings set \
+    --name ${FUNCTION_APP_NAME} \
+    --resource-group ${RESOURCE_GROUP} \
+    --settings TENANT_ID=${TENANT_ID} FUNCTION_APP_CLIENT_ID=${FUNCTION_APP_CLIENT_ID}
+if [ $? -ne 0 ]; then
+    echo -e "${RED}Failed to set up app settings for function app.${RESET}"
+    exit 1
+fi
+
 echo -e "${GREEN}All resources have been provisioned.${RESET}"