feat: Updated Readme and fixed AZ template issue

Author: Prajwal-Microsoft

docs/AppAuthentication.md

@@ -1,99 +1,109 @@
-# Azure App Registrations Setup
+# Set up Authentication in Azure Container App
 
 This document provides step-by-step instructions to configure Azure App Registrations for a front-end and back-end application.
 
 ## Prerequisites
+
 - Access to **Azure Active Directory (Azure AD)**
 - Necessary permissions to create and manage **App Registrations**
 
-## Step 1: Create Back-End App Registration
-1. Go to the [Azure Portal](https://portal.azure.com/).
-1. Navigate to **App registrations**.
-1. Click **New registration**.
-1. Provide a **Name** for the back-end app (e.g., `cps-backend-<env_name>-app`).
-1. Choose **Supported account types**.
-1. Click **Register**.
-
-### Step 1.1: Expose an API for the Back-End App
-1. In the back-end app registration, go to **Expose an API**.
-1. Click **Add a scope**.
-1. Click **Save and Continue**.
-1. Set the **Scope name** to `user_impersonation`.
-1. Set the **Admin consent display name** to `user_impersonation`. 
-1. Provide a description and enable **Admin consent**.
-1. Click **Add Scope**.
-1. Copy the **Scope value**.
-1. Go to the **Overview** section and copy the **Client ID** of the back-end app.
-
-### Step 1.2: Generate Client Secret
-1. In the back-end app registration, go to **Certificates & secrets**.
-1. Click **New Client Secret**.
-1. Enter a **Description**.
-1. Select the **Expiration time** for the secret.
-1. Click **Add**.
-1. Copy the **Secret value**.
-
-## Step 2: Copy Front-End App URL from Azure Container Apps
-1. Navigate to the **Resource Group** where your Azure resources are deployed.
-1. Select the deployed front-end application named **ca-cps-<env_name>-web**.
-1. Copy the **Front-End Application URL** displayed under the **Overview** section.
-
-## Step 3: Create Front-End App Registration
-1. Navigate to **App registrations**.
-1. Click **New registration**.
-1. Provide a **Name** for the front-end app (e.g., `cps-frontend-<env_name>-app`).
-1. Choose **Supported account types** as per your requirement.
-1. In the **Redirect URI** section, select **Single-page application** and paste the copied **Front-End Application URL** from Step 2 in the textbox next to it.
-1. Click **Register**.
-
-### Step 3.1: Expose an API for the Front-End App
-1. In the front-end app registration, go to **Expose an API**.
-1. Click **Add a scope**.
-1. Click **Save and Continue**.
-1. Set the **Scope name** to `user_impersonation`.
-1. Set the **Admin consent display name** to `user_impersonation`. 
-1. Provide a description and enable **Admin consent**.
-1. Click **Add Scope**.
-1. Copy the **Scope value**.
-1. Go to the **Overview** section and copy the **Client ID** of the app.
-
-### Step 3.2: Configure API Permissions in the Front-End App
-1. In the front-end app registration, go to **API permissions**.
-1. Click **Add a permission**.
-1. Select **My APIs**.
-1. Select the back-end app registration created in Step 1.
-1. If you don’t find it under **My APIs**, search under **APIs My organization uses**.
-1. Choose the `user_impersonation` permission.
-1. Click **Add permissions**.
-1. Click **Grant admin consent**.
-
-## Step 4: Configure Authentication Settings in the Front-End Container App (Web)
-1. Navigate to the **Resource Group** where your Azure resources are deployed.
-1. Select the deployed front-end application named **ca-cps-<env_name>-web**.
-1. Click **Containers** under **Application** from the left-side menu.
-1. Click **Environment variables**.
-1. For the key **APP_MSAL_AUTH_CLIENT_ID**, add the front-end app **Client ID** copied from Step 3.1.
-1. For the key **APP_MSAL_AUTH_SCOPE**, add the scope copied from Step 3.1.
-1. For the key **APP_MSAL_TOKEN_SCOPE**, add the scope copied from Step 1.1.
-1. Click **Save as a new revision**.
-
-## Step 5: Configure Identity Provider in the Back-End Container App (API)
-1. Navigate to the **Resource Group** where your Azure resources are deployed.
-1. Select the deployed back-end application named **ca-cps-<env_name>-api**.
-1. Under **Settings**, go to **Authentication**.
-1. Click **Add Identity Provider**.
-1. Select the **Identity Provider** as **Microsoft**.
-1. Select **Provide the details of an existing app registration**.
-1. Enter the **Back-End API App Client ID** copied from Step 1.1 into the **Application (client) ID** field.
-1. Enter the **Client Secret** generated in Step 1.2 into the **Client secret (recommended)** field.
-1. Under **Allowed token audiences**, add the value **api://<Back-End App Client ID>**.
-1. Under **Client application requirement**, select **Allow requests from specific client applications**.
-1. Click the **Edit** icon under the **Allowed client applications** section.
-1. Add the **Client ID of the Back-End App** copied from Step 1.1.
-1. Add the **Client ID of the Front-End App** copied from Step 3.1.
-1. Click **OK**.
-1. Under the **Unauthenticated requests** section, select **HTTP 401 Unauthorized: recommended for APIs**.
-1. Click **Add**.
+## Step 1: Add Authentication Provider
+
+We will add Microsoft Entra ID as an authentication provider to API and Web Application.
+
+1. Add Authentication Provider in Web Application
+
+   - Go to deployed Container App and select `ca-<your environment>-<randomname>-web` and click **Add Identity Provider** button in Authentication.  
+     ![add_auth_provider_web_1](./Images/add_auth_provider_web_1.png)
+
+   - Select **Microsoft** and set **Client secret expiration**, then click **Add** button.  
+     ![add_auth_provider_web_2](./Images/add_auth_provider_web_2.png)
+
+2. Add Authentication Provider in API Service
+
+   - Go to deployed Container App and select `ca-<your environment>-<randomname>-api` and click **Add Identity Provider** button in Authentication.  
+     ![add_auth_provider_api_1](./Images/add_auth_provider_api_1.png)
+
+   - Select **Microsoft** and set **Client secret expiration**.  
+     ![add_auth_provider_api_2](./Images/add_auth_provider_api_2.png)
+
+   - Set **Unauthenticated requests**, then click **Add** button.  
+     ![add_auth_provider_api_3](./Images/add_auth_provider_api_3.png)
+
+## Step 2: Configure Application Registration - Web Application
+
+1. Set Redirect URI in Single Page Application Platform
+
+   - Go to deployed Container App `ca-<your environment>-<randomname>-web` and select **Authentication** menu, then select created Application Registration.  
+     ![configure_app_registration_web_1](./Images/configure_app_registration_web_1.png)
+
+   - Select **Authentication**, then select **+ Add a platform** menu.  
+     ![configure_app_registration_web_2](./Images/configure_app_registration_web_2.png)
+
+   - Select **Single-page application**.  
+     ![configure_app_registration_web_3](./Images/configure_app_registration_web_3.png)
+
+   - Add Container App `ca-<your environment>-<randomname>-web`'s URL.  
+     ![configure_app_registration_web_4](./Images/configure_app_registration_web_4.png)
+
+   - You may get this URL from here in your Container App.  
+     ![configure_app_registration_web_5](./Images/configure_app_registration_web_5.png)
+
+2. Add Permission and Grant Permission
+
+   - Add Permission for API application. Select **+ Add a permission** button, then search API application with name `ca-<your environment name>-<unique string>-api`.  
+     ![configure_app_registration_web_6](./Images/configure_app_registration_web_6.png)  
+     ![configure_app_registration_web_7](./Images/configure_app_registration_web_7.png)
+
+   - Grant admin consent to permissions.  
+     ![configure_app_registration_web_8](./Images/configure_app_registration_web_8.png)
+
+3. Grab Scope Name for Impersonation
+
+   - Select **Expose an API** in the left menu. Copy the Scope name, then paste it in some temporary place.  
+     The copied text will be used for Web Application Environment variable - **APP_MSAL_AUTH_SCOPE**.  
+     ![configure_app_registration_web_9](./Images/configure_app_registration_web_9.png)
+
+4. Grab Client Id for Web App
+
+   - Select **Overview** in the left menu. Copy the Client Id, then paste it in some temporary place.  
+     The copied text will be used for Web Application Environment variable - **APP_MSAL_AUTH_CLIENT_ID**.  
+     ![configure_app_registration_web_10](./Images/configure_app_registration_web_10.png)
+
+## Step 3: Configure Application Registration - API Application
+
+1. Grab Scope Name for Impersonation
+
+   - Go to deployed Container App `ca-<your environment>-<randomname>-api` and select **Authentication** menu, then select created Application Registration.  
+     ![configure_app_registration_api_1](./Images/configure_app_registration_api_1.png)
+
+   - Select **Expose an API** in the left menu. Copy the Scope name, then paste it in some temporary place.  
+     The copied text will be used for Web Application Environment variable - **APP_MSAL_TOKEN_SCOPE**.  
+     ![configure_app_registration_api_2](./Images/configure_app_registration_api_2.png)
+
+## Step 4: Add Web Application's Client Id to Allowed Client Applications List in API Application Registration
+
+1. Go to the deployed Container App `ca-<your environment>-<randomname>-api`, select **Authentication**, and then click **Edit**.  
+   ![add_client_id_to_api_1](./Images/add_client_id_to_api_1.png)
+
+2. Select **Allow requests from specific client applications**, then click the **pencil** icon to add the Client Id.  
+   ![add_client_id_to_api_2](./Images/add_client_id_to_api_2.png)
+
+3. Add the **Client Id** obtained from [Step 2: Configure Application Registration - Web Application](#step-2-configure-application-registration---web-application), then save.  
+   ![add_client_id_to_web_3](./Images/add_client_id_to_web_3.png)
+
+## Step 5: Update Environment Variable in Container App for Web Application
+
+In previous steps for [Configure Application Registration - Web Application](#step-2-configure-application-registration---web-application) and [Configure Application Registration - API Application](#step-3-configure-application-registration---api-application), we grabbed Client Id for Web App's Application Registration and Scopes for Web and API's Application Registration.
+
+Now, we will edit and deploy the Web Application Container with updated Environment variables.
+
+1. Select **Containers** menu under **Application**, then click **Edit and Deploy** menu.  
+   ![update_env_app_1](./Images/update_env_app_1.png)
+
+2. Select Container image and click **Edit**. Under **Environment variables** section, update 3 values which were taken in previous steps for **APP_MSAL_AUTH_CLIENT_ID**, **APP_MSAL_AUTH_SCOPE**, **APP_MSAL_TOKEN_SCOPE**.  
+   The updated revision will be activated soon.
 
 ## Conclusion
+
 You have successfully configured the front-end and back-end Azure App Registrations with proper API permissions and security settings.

docs/ConfigureAppAuthentication.md

@@ -247,7 +247,7 @@ This will rebuild the source code, package it into a container, and push it to t
         ```
 
 3. **Add Authentication Provider**  
-    - Follow steps in [App Authentication](./ConfigureAppAuthentication_withImage.md) to configure authenitcation in app service. Note that Authentication changes can take up to 10 minutes.  
+    - Follow steps in [App Authentication](./ConfigureAppAuthentication.md) to configure authenitcation in app service. Note that Authentication changes can take up to 10 minutes.  
 
 4. **Deleting Resources After a Failed Deployment**  
 

docs/ConfigureAppAuthentication_withImage.md

@@ -1,7 +1,6 @@
 // Creates Azure dependent resources for Azure AI studio
 param solutionName string
 param solutionLocation string
-@secure()
 param keyVaultName string
 param cuLocation string
 param deploymentType string
@@ -10,11 +9,8 @@ param gptModelVersion string
 param gptDeploymentCapacity int
 // param embeddingModel string
 // param embeddingDeploymentCapacity int
-@secure()
 param managedIdentityObjectId string
-@secure()
 param applicationInsightsId string
-@secure()
 param containerRegistryId string
 
 // Load the abbrevations file required to name the azure resources.