Update blog 5.8: use real Azure/GitHub Pages URLs, fix CORS step, add GitHub Pages to identityserverdata.json

Author: workcontrolgit

blogs/series-5-devops-data/5.8-azure-post-deployment-config.md

@@ -31,7 +31,7 @@ This article is part of the **AngularNetTutorial** series. The full-stack tutori
 **Before following this article, you should have:**
 
 * **Article 5.6 complete** — IdentityServer deployed at `https://app-talent-ids-dev.azurewebsites.net`
-* **Article 5.7 complete** — Angular deployed at the Static Web App URL (e.g., `https://agreeable-desert-01234567.azurestaticapps.net`)
+* **Article 5.7 complete** — Angular deployed at the Static Web App URL (e.g., `https://mango-flower-0ced4011e.4.azurestaticapps.net`)
 * **The three Azure URLs** — retrieve them:
 
 ```bash
@@ -58,7 +58,7 @@ az staticwebapp show \
 
 ## 🎯 The Problem
 
-OAuth 2.0 authorization codes and tokens can only flow to URLs that are explicitly registered in the authorization server (IdentityServer). If the Angular application running at `https://agreeable-desert-01234567.azurestaticapps.net` sends an authorization request asking IdentityServer to redirect the browser back to that URL, IdentityServer checks its registered `RedirectUris` for the `TalentManagement` client. If the production URL isn't there, IdentityServer rejects the request immediately with `invalid_redirect_uri`.
+OAuth 2.0 authorization codes and tokens can only flow to URLs that are explicitly registered in the authorization server (IdentityServer). If the Angular application running at `https://mango-flower-0ced4011e.4.azurestaticapps.net` sends an authorization request asking IdentityServer to redirect the browser back to that URL, IdentityServer checks its registered `RedirectUris` for the `TalentManagement` client. If the production URL isn't there, IdentityServer rejects the request immediately with `invalid_redirect_uri`.
 
 Similarly, the API's CORS policy controls which origins can call the API from a browser. If the Angular app's domain is not in the allowed origins list, the browser blocks the API response before Angular can read it — even though the API returned HTTP 200.
 
@@ -123,7 +123,7 @@ Open `TokenService/Duende-IdentityServer/shared/identityserverdata.json`. Find t
 }
 ```
 
-Add the production Azure URLs to each list. Replace `https://agreeable-desert-01234567.azurestaticapps.net` with your actual Static Web App URL:
+Add the production Azure URLs to each list. Replace `https://mango-flower-0ced4011e.4.azurestaticapps.net` with your actual Static Web App URL:
 
 ```json
 {
@@ -136,19 +136,24 @@ Add the production Azure URLs to each list. Replace `https://agreeable-desert-01
     "https://localhost:4200/silent-refresh.html",
     "http://localhost:4200/callback",
     "https://localhost:4200/callback",
-    "https://agreeable-desert-01234567.azurestaticapps.net",
-    "https://agreeable-desert-01234567.azurestaticapps.net/silent-refresh.html",
-    "https://agreeable-desert-01234567.azurestaticapps.net/callback"
+    "https://mango-flower-0ced4011e.4.azurestaticapps.net",
+    "https://mango-flower-0ced4011e.4.azurestaticapps.net/silent-refresh.html",
+    "https://mango-flower-0ced4011e.4.azurestaticapps.net/callback",
+    "https://workcontrolgit.github.io/AngularNetTutorial",
+    "https://workcontrolgit.github.io/AngularNetTutorial/silent-refresh.html",
+    "https://workcontrolgit.github.io/AngularNetTutorial/callback"
   ],
   "PostLogoutRedirectUris": [
     "http://localhost:4200",
     "https://localhost:4200",
-    "https://agreeable-desert-01234567.azurestaticapps.net"
+    "https://mango-flower-0ced4011e.4.azurestaticapps.net",
+    "https://workcontrolgit.github.io/AngularNetTutorial"
   ],
   "AllowedCorsOrigins": [
     "http://localhost:4200",
     "https://localhost:4200",
-    "https://agreeable-desert-01234567.azurestaticapps.net"
+    "https://mango-flower-0ced4011e.4.azurestaticapps.net",
+    "https://workcontrolgit.github.io"
   ]
 }
 ```
@@ -170,23 +175,20 @@ For this tutorial, Option A (commit and push) is preferred — the source file r
 
 ### Step 4: Update API CORS Settings
 
-The API allows CORS origins configured in `appsettings.json`. Locate the CORS section:
-
-```bash
-grep -n "CorsOrigins\|AllowedOrigins\|Cors" \
-  ApiResources/TalentManagement-API/TalentManagementAPI.WebApi/appsettings.json
-```
-
-Add the Static Web App URL to the allowed origins, then push the change or set it as an App Service setting:
+The API allows CORS origins configured via App Service settings using the `Cors__AllowedOrigins__` array pattern. Two origins are needed — the Azure Static Web App and GitHub Pages:
 
 ```bash
 az webapp config appsettings set \
   --resource-group rg-talent-dev \
   --name app-talent-api-dev \
-  --settings "CorsOrigins=https://agreeable-desert-01234567.azurestaticapps.net"
+  --settings \
+    "Cors__AllowedOrigins__0=https://mango-flower-0ced4011e.4.azurestaticapps.net" \
+    "Cors__AllowedOrigins__1=https://workcontrolgit.github.io"
 ```
 
-The API middleware reads this setting at startup and adds the origin to the allowed list.
+**Note:** Replace `https://mango-flower-0ced4011e.4.azurestaticapps.net` with your actual Static Web App URL. The GitHub Pages origin is the host only — no path suffix. This is handled automatically by the `deploy-api.yml` workflow on every deployment, so this manual step is only needed if you are configuring the API outside of a workflow run.
+
+The API's CORS middleware reads `Cors:AllowedOrigins` from `IConfiguration` at startup. The `__` double-underscore in the setting name maps to the `:` separator, and the `__0` / `__1` suffixes create an array in .NET configuration.
 
 ### Step 5: Validate Each Layer in Order
 
@@ -240,12 +242,18 @@ After completing Steps 1–4, run through the Layer 1–6 validation in order. E
 **Quick CORS verification from the browser console:**
 
 ```javascript
+// From Azure SWA
+fetch('https://app-talent-api-dev.azurewebsites.net/api/v1/health', {
+  headers: { 'Origin': 'https://mango-flower-0ced4011e.4.azurestaticapps.net' }
+}).then(r => console.log('Status:', r.status, 'CORS:', r.headers.get('access-control-allow-origin')))
+
+// From GitHub Pages
 fetch('https://app-talent-api-dev.azurewebsites.net/api/v1/health', {
-  headers: { 'Origin': 'https://agreeable-desert-01234567.azurestaticapps.net' }
+  headers: { 'Origin': 'https://workcontrolgit.github.io' }
 }).then(r => console.log('Status:', r.status, 'CORS:', r.headers.get('access-control-allow-origin')))
 ```
 
-Expected: `Status: 200 CORS: https://agreeable-desert-01234567.azurestaticapps.net`
+Expected for both: `Status: 200 CORS: <the origin you sent>`
 
 ---