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:
+          REACT_APP_STATIC_WEB_APP_CLIENT_ID: ${{ secrets.STATIC_WEB_APP_CLIENT_ID }}
+          REACT_APP_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,13 +50,83 @@ 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/expose_api.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/api_permissions.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:
 
-- **AZURE_CLIENT_ID**: Used to authenticate the service principal in order to deploy the static web app
+- **AZURE_GITHUB_SP_CLIENT_ID**: Used to authenticate the service principal in order to deploy the static web app
 - **AZURE_SUBSCRIPTION_ID**: Used to authenticate the service principal in order to deploy the static web app
-- **AZURE_TENANT_ID**: Used to authenticate the service principal in order to deploy the static web app
+- **AZURE_TENANT_ID**: Used to authenticate the service principal and for the OIDC flow in the React SPA
 - **PUBLISH_PROFILE**: Used to deploy our two functions to the Azure Function App
+- **STATIC_WEB_APP_CLIENT_ID**: Used in the React SPA for OIDC authentication
+
+### Subscription and Tenant ID
+The **subscription ID** and **tenant ID** is found by running the following Azure CLI command:
+
+```bash
+az account show --query id
+az account show --query tenantId
+```
+
+### Publish Profile
+The publish profile may be obtained by navigating to the Azure Portal, selecting the Azure Function App, and clicking on **Get publish profile**.
+
+### Azure GitHub Service Principal
+The service principal used for GitHub Actions is created as part of our resource provisioning script and
+as thus should be displayed in the terminal output as such:
+
+![sp_terminal.png](images/sp_terminal.png)
+
+### Static Web App Client ID
+Similarly, the **client ID** for the static web app is created as part of our resource provisioning script and outputted to the terminal as such:
+
+![spa_terminal.png](images/spa_terminal.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:
+
+
+https://hvalfangststorageaccount.z6.web.core.windows.net, which results in the following.
+
+![csv_uploader.png](images/csv_uploader.png)
+
+Click on **Sign In** to initiate the OIDC flow - which redirects to the Azure AD permission consent screen.
+
+![oidc.png](images/oidc_sign_in.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.
+
+![choose_file.png](images/choose_file.png)
+
+![file_chosen.png](images/file_chosen.png)
+
+The file name will be displayed in the input field. Click on **Upload** to attempt to upload the file to the storage blob.
+
+If the upload was successful, the following message will be displayed.
 
-![img_1.png](images/img_1.png)
+![upload_successful.png](images/upload_successful.png)

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.REACT_APP_STATIC_WEB_APP_CLIENT_ID,
+        authority: `https://login.microsoftonline.com/${process.env.REACT_APP_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;

hvalfangst_function/function_app.py

@@ -96,7 +96,7 @@ def upload_csv(req: func.HttpRequest, outbound: func.Out[str]) -> HttpResponse:
 
         token = auth_header.split(" ")[1]  # Extract Bearer token
         audience = os.environ.get("FUNCTION_APP_CLIENT_ID")
-        required_scopes = ["Csv.Write"]
+        required_scopes = ["Csv.Writer"]
 
         if not validate_jwt(token, audience, required_scopes):
             return HttpResponse("Unauthorized", status_code=401)