diff --git a/docs/ConfigureAppAuthentication.md b/docs/ConfigureAppAuthentication.md index 0ef56e8b..e35082a1 100644 --- a/docs/ConfigureAppAuthentication.md +++ b/docs/ConfigureAppAuthentication.md @@ -11,97 +11,135 @@ This document provides step-by-step instructions to configure Azure App Registra We will add Microsoft Entra ID as an authentication provider to API and Web Application. -1. Add Authentication Provider in Web Application +1.1. Add Authentication Provider in Web Application 🌐 + + - Go to deployed Container App and select `ca--web` and click **Add Identity Provider** button in Authentication. - - Go to deployed Container App and select `ca--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. + > ⚠️ **Note:** If you encounter the following error message indicating that your organization's policy prohibits the automatic use of secrets, please refer to our [Manual App Registration Configuration](./ManualAppRegistrationConfiguration.md) for detailed manual setup instructions. + > ![add_auth_provider_web_3](./images/add_auth_provider_web_3.png) + + - Select **Microsoft** and set **Client secret expiration**, then click **Add** button. + ![add_auth_provider_web_2](./images/add_auth_provider_web_2.png) - - Set **Unauthenticated requests**, then click **Add** button. - ![add_auth_provider_api_3](./images/add_auth_provider_web_4.png) + - Set **Unauthenticated requests**, then click **Add** button. -> **Note:** If you encounter the following error message indicating that your organization's policy prohibits the automatic use of secrets, please refer to our [Manual App Registration Configuration](./ManualAppRegistrationConfiguration.md) for detailed manual setup instructions. -> ![add_auth_provider_web_3](./images/add_auth_provider_web_3.png) + ![add_auth_provider_api_3](./images/add_auth_provider_web_4.png) -1. Add Authentication Provider in API Service +1.2. Add Authentication Provider in API Service 🧩 - Go to deployed Container App and select `ca--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 +## Step 2: Configure Application Registration - Web Application 🌐 -1. Set Redirect URI in Single Page Application Platform +2.1. Set Redirect URI in Single Page Application Platform - Go to deployed Container App `ca--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. + - Select **Authentication**, then select **+ Add Redirect URI** menu. + ![configure_app_registration_web_2](./images/configure_app_registration_web_2.png) + (if using **old environment**) + + Select **Authentication**, then select **+ Add a platform** menu. + + ![configure_app_registration_web_2_without_preview](./images/configure_app_registration_web_2_without_preview.png) + - Select **Single-page application**. + ![configure_app_registration_web_3](./images/configure_app_registration_web_3.png) + (if using **old environment**) + + Select **Single-page application**. + + ![configure_app_registration_web_3_without_preview](./images/configure_app_registration_web_3_without_preview.png) + - Add Container App `ca--web`'s URL. + ![configure_app_registration_web_4](./images/configure_app_registration_web_4.png) + (if using **old environment**) + + Add Container App `ca--web`'s URL. + + ![configure_app_registration_web_4_without_preview](./images/configure_app_registration_web_4_without_preview.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 +2.2. Add Permission and Grant Permission - Add Permission for API application. Select **+ Add a permission** button, then search API application with name `ca--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. + - Click **Grant admin consent** to grant permissions. Then verify the permissions status should show as marked in **Green** + ![configure_app_registration_web_8](./images/configure_app_registration_web_8.png) > ⚠️ **Granting Admin Consent:** If you don't have permission or aren't able to grant admin consent for the API permissions, please follow one of the steps below:

_Option 1 - Reach out to your Tenant Administrator:_ Contact your administrator to let them know your Application Registration ID and what permissions you woud like to have them consent and approve.

_Option 2 - Internal Microsoft Employees Only:_ Please refer to these detailed instructions on the admin consent granting process: [https://aka.ms/AzAdminConsentWiki](https://aka.ms/AzAdminConsentWiki) -3. Grab Scope Name for Impersonation +2.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_WEB_SCOPE**. + ![configure_app_registration_web_9](./images/configure_app_registration_web_9.png) -4. Grab Client Id for Web App +2.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_WEB_CLIENT_ID**. + ![configure_app_registration_web_10](./images/configure_app_registration_web_10.png) -## Step 3: Configure Application Registration - API Application +## Step 3: Configure Application Registration - API Application 🧩 -1. Grab Scope Name for Impersonation +3.1. Grab Scope Name for Impersonation - Go to deployed Container App `ca--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_API_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--api`, select **Authentication**, and then click **Edit**. +4.1. Go to the deployed Container App `ca--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. +4.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. +4.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 @@ -110,9 +148,11 @@ In previous steps for [Configure Application Registration - Web Application](#st Now, we will edit and deploy the Web Application Container with updated Environment variables. -1. Select **Containers** menu under **Application**. Then click **Environment variables** tab. +5.1. Select **Containers** menu under **Application**. Then click **Environment variables** tab. + ![update_env_app_1_1](./images/update_env_app_1_1.png) -2. Update 3 values which were taken in previous steps for **APP_WEB_CLIENT_ID**, **APP_WEB_SCOPE**, **APP_API_SCOPE**. + +5.2. Update 3 values which were taken in previous steps for **APP_WEB_CLIENT_ID**, **APP_WEB_SCOPE**, **APP_API_SCOPE**. Click on **Save as a new revision**. The updated revision will be activated soon. diff --git a/docs/ManualAppRegistrationConfiguration.md b/docs/ManualAppRegistrationConfiguration.md index a3826267..f1e75006 100644 --- a/docs/ManualAppRegistrationConfiguration.md +++ b/docs/ManualAppRegistrationConfiguration.md @@ -7,14 +7,14 @@ This guide provides detailed steps to manually register both front-end and backe - Necessary permissions to create and manage **App Registrations** in your Azure tenant ## Step 1: Register the Web Application -### 1. Create App Registration +### 1.1. Create App Registration - Go to **Azure Portal** > **Microsoft Entra ID** > **Manage** > **App registrations** - Click **+ New registration** - Name the app (e.g., `cps-app-web`) - Under **Redirect URI**, choose **Web** and enter: ``` - https://azurecontainerapps.io/auth/login/aad/callback + https://azurecontainerapps.io/.auth/login/aad/callback ``` To find your Web App URL: @@ -26,7 +26,7 @@ This guide provides detailed steps to manually register both front-end and backe ![manual_register_app_web_1](./images/manual_register_app_web_1.png) -### 2. Expose an API +### 1.2. Expose an API - Navigate to **Expose an API** - Click **+ Add a scope** @@ -40,7 +40,7 @@ This guide provides detailed steps to manually register both front-end and backe ![manual_register_app_web_2](./images/manual_register_app_web_2.png) -### 3. Configure Certificates and Secrets +### 1.3. Configure Certificates and Secrets - Go to **Certificates & secrets** - Click **+ New client secret** @@ -49,15 +49,16 @@ This guide provides detailed steps to manually register both front-end and backe - Start (Optional for custom range): Set the starting date of the secret's validity - End (Optional for custom range): Set the ending date of the secret's validity - Click **Add** and remember to copy and store the secret value securely as it will not be shown again -![manual_register_app_web_3](./images/manual_register_app_web_3.png) -### 3. Get Tenant ID + ![manual_register_app_web_3](./images/manual_register_app_web_3.png) + +### 1.4. Get Tenant ID - Go to **Tenant Properties** in [Azure Portal](https://portal.azure.com) - Copy the Tenant ID (will be used in next step) -![manual_register_app_web_6](./images/manual_register_app_web_6.png) + ![manual_register_app_web_6](./images/manual_register_app_web_6.png) -### 4. Set Up Authentication in Web Container App +### 1.5. Set Up Authentication in Web Container App - Go to your Web Container App - Go to **Authentication** @@ -72,10 +73,16 @@ This guide provides detailed steps to manually register both front-end and backe ![manual_register_app_web_4](./images/manual_register_app_web_4.png) +### 1.6. Enable ID Token for the Application + +- Go to **App registrations** and select your application +- Click **Authentication** , select **Settings** , check **ID tokens** and click **Save** + +![manual_register_app_web_7](./images/manual_register_app_web_7.png) ## Step 2: Register API Application -### 1. Create App Registration +### 2.1. Create App Registration - Go to **Azure Portal** > **Microsoft Entra ID** > **Manage** > **App registrations** - Click **+ New registration** - Name the app (e.g., `cps-app-api`) @@ -93,7 +100,7 @@ This guide provides detailed steps to manually register both front-end and backe - Click **Register** ![manual_register_app_api_1](./images/manual_register_app_api_1.png) - ### 2. Expose an API + ### 2.2. Expose an API - Go to **Expose an API** - Click **+ Add a scope** @@ -104,7 +111,7 @@ This guide provides detailed steps to manually register both front-end and backe - Click **Add scope** ![manual_register_app_api_2](./images/manual_register_app_api_2.png) -### 3. Configure Certificates and Secrets +### 2.3. Configure Certificates and Secrets - Go to **Certificates & secrets** - Click **+ New client secret** @@ -115,7 +122,7 @@ This guide provides detailed steps to manually register both front-end and backe - Click **Add** and remember to copy and store the secret value securely as it will not be shown again ![manual_register_app_api_3](./images/manual_register_app_api_3.png) -### 4. Set Up Authentication in API Container App +### 2.4. Set Up Authentication in API Container App - Navigate to your API Container App - Go to **Authentication** diff --git a/docs/images/add_auth_provider_web_3.png b/docs/images/add_auth_provider_web_3.png index 2da9f441..d4ed429b 100644 Binary files a/docs/images/add_auth_provider_web_3.png and b/docs/images/add_auth_provider_web_3.png differ diff --git a/docs/images/configure_app_registration_web_2.png b/docs/images/configure_app_registration_web_2.png index 77606c32..46862c95 100644 Binary files a/docs/images/configure_app_registration_web_2.png and b/docs/images/configure_app_registration_web_2.png differ diff --git a/docs/images/configure_app_registration_web_2_without_preview.png b/docs/images/configure_app_registration_web_2_without_preview.png new file mode 100644 index 00000000..77606c32 Binary files /dev/null and b/docs/images/configure_app_registration_web_2_without_preview.png differ diff --git a/docs/images/configure_app_registration_web_3.png b/docs/images/configure_app_registration_web_3.png index 456b2020..8c84ddda 100644 Binary files a/docs/images/configure_app_registration_web_3.png and b/docs/images/configure_app_registration_web_3.png differ diff --git a/docs/images/configure_app_registration_web_3_without_preview.png b/docs/images/configure_app_registration_web_3_without_preview.png new file mode 100644 index 00000000..456b2020 Binary files /dev/null and b/docs/images/configure_app_registration_web_3_without_preview.png differ diff --git a/docs/images/configure_app_registration_web_4.png b/docs/images/configure_app_registration_web_4.png index 83cff5a1..df08cea7 100644 Binary files a/docs/images/configure_app_registration_web_4.png and b/docs/images/configure_app_registration_web_4.png differ diff --git a/docs/images/configure_app_registration_web_4_without_preview.png b/docs/images/configure_app_registration_web_4_without_preview.png new file mode 100644 index 00000000..83cff5a1 Binary files /dev/null and b/docs/images/configure_app_registration_web_4_without_preview.png differ diff --git a/docs/images/manual_register_app_web_1.png b/docs/images/manual_register_app_web_1.png index 8e5ea96f..2c5bad27 100644 Binary files a/docs/images/manual_register_app_web_1.png and b/docs/images/manual_register_app_web_1.png differ diff --git a/docs/images/manual_register_app_web_7.png b/docs/images/manual_register_app_web_7.png new file mode 100644 index 00000000..58e8dcbc Binary files /dev/null and b/docs/images/manual_register_app_web_7.png differ