feat: migrate to multi tenant sso AB#27356

.github/actions/build-interface/action.yml

@@ -27,7 +27,7 @@ inputs:
     description: Value of the environment-specific Content-Security-Policy to __not override__, but __append to__ the base. (All lines should end with a ";"!)
     required: false
     default: >-
-      connect-src 'self' https://*.121.global https://*.in.applicationinsights.azure.com https://westeurope.livediagnostics.monitor.azure.com https://*.ciamlogin.com;
+      connect-src 'self' https://*.121.global https://*.in.applicationinsights.azure.com https://westeurope.livediagnostics.monitor.azure.com https://login.microsoftonline.com;
       form-action https://*.121.global;
       frame-src blob: 'self';
       frame-ancestors 'self';

.github/workflows/deploy_client-demo_portal.yml

@@ -32,9 +32,9 @@ jobs:
           interfacePath: ${{ env.workingDirectory }}
           envIcon: 'AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAFCPkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABERAAAAAAAAEREAAAAAAAAREQAAAAAAABERAAAAABEREREREQAAERERERERAAAREREREREAABEREREREQAAAAAREQAAAAAAABERAAAAAAAAEREAAAAAAAAREQAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAPw/AAD8PwAA/D8AAPw/AADAAwAAwAMAAMADAADAAwAA/D8AAPw/AAD8PwAA/D8AAP//AAD//wAA'
           envContentSecurityPolicy: >-
-            connect-src 'self' https://demo.121.global https://westeurope-5.in.applicationinsights.azure.com https://westeurope.livediagnostics.monitor.azure.com https://*.ciamlogin.com;
+            connect-src 'self' https://demo.121.global https://westeurope-5.in.applicationinsights.azure.com https://westeurope.livediagnostics.monitor.azure.com https://login.microsoftonline.com;
             form-action https://demo.121.global;
-            frame-src blob: 'self' https://app.powerbi.com https://*.ciamlogin.com;
+            frame-src blob: 'self' https://app.powerbi.com https://login.microsoftonline.com;
             frame-ancestors 'self' https://flex.twilio.com;
         env:
           NG_ENV_NAME: 'Demo'
@@ -43,6 +43,8 @@ jobs:
           USE_SSO_AZURE_ENTRA: ${{ vars.USE_SSO_AZURE_ENTRA }}
           AZURE_ENTRA_CLIENT_ID: ${{ vars.AZURE_ENTRA_CLIENT_ID }}
           AZURE_ENTRA_TENANT_ID: ${{ vars.AZURE_ENTRA_TENANT_ID }}
+          AZURE_ENTRA_DOMAINS: ${{ vars.AZURE_ENTRA_DOMAINS }}
+          AZURE_ENTRA_URL: ${{ vars.AZURE_ENTRA_URL }}
           NG_AI_IKEY: '2aad0652-5b2a-4c01-8533-e1416879c7ac'
           NG_AI_ENDPOINT: 'https://westeurope-5.in.applicationinsights.azure.com/'
           APPLICATIONINSIGHTS_CONNECTION_STRING: 'InstrumentationKey=2aad0652-5b2a-4c01-8533-e1416879c7ac;IngestionEndpoint=https://westeurope-5.in.applicationinsights.azure.com/;LiveEndpoint=https://westeurope.livediagnostics.monitor.azure.com/'

.github/workflows/deploy_client-nlrc_portal.yml

@@ -32,9 +32,9 @@ jobs:
           interfacePath: ${{ env.workingDirectory }}
           envIcon: 'AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////ACgcrgCLRiEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzEREREREREREREREREREREREREREREREREREREREREREiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIgAAAAAAAAAAAAAAAAAAAAD//wAA//8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//AAD//wAA'
           envContentSecurityPolicy: >-
-            connect-src 'self' https://nlrc.121.global https://westeurope-1.in.applicationinsights.azure.com https://westeurope.livediagnostics.monitor.azure.com https://*.ciamlogin.com;
+            connect-src 'self' https://nlrc.121.global https://westeurope-1.in.applicationinsights.azure.com https://westeurope.livediagnostics.monitor.azure.com https://login.microsoftonline.com;
             form-action https://nlrc.121.global;
-            frame-src blob: https://*.ciamlogin.com;
+            frame-src blob: https://login.microsoftonline.com;
             frame-ancestors 'self' https://flex.twilio.com;
         env:
           NG_ENV_NAME: ''
@@ -46,6 +46,8 @@ jobs:
           USE_SSO_AZURE_ENTRA: ${{ vars.USE_SSO_AZURE_ENTRA }}
           AZURE_ENTRA_CLIENT_ID: ${{ vars.AZURE_ENTRA_CLIENT_ID }}
           AZURE_ENTRA_TENANT_ID: ${{ vars.AZURE_ENTRA_TENANT_ID }}
+          AZURE_ENTRA_DOMAINS: ${{ vars.AZURE_ENTRA_DOMAINS }}
+          AZURE_ENTRA_URL: ${{ vars.AZURE_ENTRA_URL }}
 
       # More information on Static Web App workflow configurations,
       # See: https://aka.ms/swaworkflowconfig

.github/workflows/deploy_staging_portal.yml

@@ -31,9 +31,9 @@ jobs:
         with:
           interfacePath: ${{ env.workingDirectory }}
           envContentSecurityPolicy: >-
-            connect-src 'self' https://staging.121.global https://westeurope-1.in.applicationinsights.azure.com https://westeurope.livediagnostics.monitor.azure.com https://*.ciamlogin.com;
+            connect-src 'self' https://staging.121.global https://westeurope-1.in.applicationinsights.azure.com https://westeurope.livediagnostics.monitor.azure.com https://login.microsoftonline.com;
             form-action https://staging.121.global;
-            frame-src blob: 'self' https://app.powerbi.com https://*.ciamlogin.com;
+            frame-src blob: 'self' https://app.powerbi.com https://login.microsoftonline.com;
             frame-ancestors 'self' https://flex.twilio.com;
         env:
           NG_ENV_NAME: 'staging'
@@ -45,6 +45,8 @@ jobs:
           USE_SSO_AZURE_ENTRA: ${{ vars.USE_SSO_AZURE_ENTRA }}
           AZURE_ENTRA_CLIENT_ID: ${{ vars.AZURE_ENTRA_CLIENT_ID }}
           AZURE_ENTRA_TENANT_ID: ${{ vars.AZURE_ENTRA_TENANT_ID }}
+          AZURE_ENTRA_DOMAINS: ${{ vars.AZURE_ENTRA_DOMAINS }}
+          AZURE_ENTRA_URL: ${{ vars.AZURE_ENTRA_URL }}
 
       # More information on Static Web App workflow configurations,
       # See: https://aka.ms/swaworkflowconfig

.github/workflows/deploy_test_portal.yml

@@ -53,9 +53,9 @@ jobs:
           interfacePath: ${{ env.workingDirectory }}
           envIcon: 'AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////AAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAiIiIiIiIiAiIiIiIiIiIiIhERERERIiIiEREREREiIiISERERESIiIhIhEiIhIiIiERIREREiIiIRERERESIiIhISERERIiIiESESIiEiIiISEhERESIiIhERERERIiIiEREREREiIiIiIRESIiIiIiIiIiIiIiAiIiIiIiIiCAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAQAA'
           envContentSecurityPolicy: >-
-            connect-src 'self' https://test.121.global https://westeurope-5.in.applicationinsights.azure.com https://westeurope.livediagnostics.monitor.azure.com https://*.ciamlogin.com;
+            connect-src 'self' https://test.121.global https://westeurope-5.in.applicationinsights.azure.com https://westeurope.livediagnostics.monitor.azure.com https://login.microsoftonline.com;
             form-action https://test.121.global;
-            frame-src blob: 'self' https://app.powerbi.com https://*.ciamlogin.com;
+            frame-src blob: 'self' https://app.powerbi.com https://login.microsoftonline.com;
             frame-ancestors 'self' https://flex.twilio.com;
         env:
           NG_ENV_NAME: 'test'
@@ -68,6 +68,8 @@ jobs:
           USE_SSO_AZURE_ENTRA: ${{ vars.USE_SSO_AZURE_ENTRA }}
           AZURE_ENTRA_CLIENT_ID: ${{ vars.AZURE_ENTRA_CLIENT_ID }}
           AZURE_ENTRA_TENANT_ID: ${{ vars.AZURE_ENTRA_TENANT_ID }}
+          AZURE_ENTRA_DOMAINS: ${{ vars.AZURE_ENTRA_DOMAINS }}
+          AZURE_ENTRA_URL: ${{ vars.AZURE_ENTRA_URL }}
 
       # More information on Static Web App workflow configurations,
       # See: https://aka.ms/swaworkflowconfig

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://github.com/global-121/121-platform/compare/v1.120.0...main)
 
+### Added
+
+- For Azure SSO Multi-tenancy, add these new Poral ENV-variables to the [GitHub (client-)environment](https://github.com/global-121/121-platform/settings/environments):  
+  See [`.env.example`](./interfaces/Portal/.env.example)
+  - `AZURE_ENTRA_DOMAINS`
+  - `AZURE_ENTRA_URL`
+
 ---
 
 ## [1.120.0](https://github.com/global-121/121-platform/compare/v1.119.2...v1.120.0)- 2024-05-29

interfaces/Portal/.env.example

@@ -24,10 +24,13 @@ NG_TWILIO_ERROR_CODES_URL=https://www.twilio.com/docs/api/errors
 USE_SSO_AZURE_ENTRA=
 
 # Azure Entra environment-specific IDs.
-# Make sure to set these values the same for the 121-service.
+# Make sure to set these two values the same for the 121-service.
 AZURE_ENTRA_CLIENT_ID=
 AZURE_ENTRA_TENANT_ID=
-
+# Set the allowed host names of entra users (comma-separated list, i.e: "example.com,example.net,example.org")
+AZURE_ENTRA_DOMAINS=
+# Azure API URL (should NOT end with a "/"!)
+AZURE_ENTRA_URL=https://login.microsoftonline.com
 
 # APIs:
 NG_URL_121_SERVICE_API=http://localhost:3000/api

interfaces/Portal/src/app/app.module.ts

@@ -116,7 +116,7 @@ if (environment.use_sso_azure_entra) {
       new PublicClientApplication({
         auth: {
           clientId: environment.azure_ad_client_id,
-          authority: `https://${environment.azure_ad_tenant_id}.ciamlogin.com/${environment.azure_ad_tenant_id}/v2.0`,
+          authority: `${environment.azure_ad_url}/common`,
           redirectUri: `${window.location.origin}/${AppRoutes.auth}`,
           postLogoutRedirectUri: `${window.location.origin}/${AppRoutes.login}`,
           navigateToLoginRequestUrl: false,

interfaces/Portal/src/app/auth/auth.service.ts

@@ -12,7 +12,10 @@ import { isIframed } from '../shared/utils/is-iframed.util';
 import Permission from './permission.enum';
 
 export const USER_KEY = 'logged-in-user-portal';
-
+export const SSO_ERROR_KEY = 'sso-error';
+export const SSO_ERRORS = {
+  notFound: 'not-found',
+};
 @Injectable({
   providedIn: 'root',
 })
@@ -186,8 +189,9 @@ export class AuthService {
     const userDto = await this.programsService.getCurrentUser();
 
     if (!userDto || !userDto.user) {
-      localStorage.removeItem(USER_KEY);
-      this.router.navigate(['/', AppRoutes.login]);
+      const username = userDto?.error?.username || null;
+      sessionStorage.setItem(SSO_ERROR_KEY, SSO_ERRORS.notFound);
+      this.logoutSsoUser(username);
       return;
     }
 
@@ -250,15 +254,37 @@ export class AuthService {
       return;
     }
 
+    const idTokenClaims = currentUser.idTokenClaims;
+    const preferredUsername =
+      idTokenClaims?.preferred_username || currentUser.username;
+    const emailDomain = preferredUsername.split('@')[1];
+    let authority;
+    let account;
+
+    const enabledDomains = environment.azure_ad_domains
+      .trim()
+      .toLowerCase()
+      .split(/\s*,\s*/);
+
+    if (enabledDomains.includes(emailDomain)) {
+      account = currentUser;
+      authority = `${environment.azure_ad_url}/${currentUser.tenantId}`;
+    } else {
+      account = this.msalService.instance.getActiveAccount();
+      authority = `${environment.azure_ad_url}/consumers`;
+    }
+
+    const logoutRequest: any = {
+      account,
+      authority,
+      mainWindowRedirectUri: `${window.location.origin}/${AppRoutes.login}`,
+      postLogoutRedirectUri: `${window.location.origin}/${AppRoutes.login}`,
+    };
+
     if (isIframed()) {
-      this.msalService.logoutPopup({
-        account: currentUser,
-        mainWindowRedirectUri: `${window.location.origin}/${AppRoutes.login}`,
-      });
+      await this.msalService.logoutPopup(logoutRequest);
     } else {
-      this.msalService.logoutRedirect({
-        account: currentUser,
-      });
+      await this.msalService.logoutRedirect(logoutRequest);
     }
   }
 

interfaces/Portal/src/app/components/header/header.component.html

@@ -128,9 +128,7 @@ <h1 class="ion-no-margin">
       <ion-col [size]="isIframeHeader ? 8 : 6">
         <ion-row class="ion-justify-content-end ion-align-items-center">
           <app-language-switcher class="ion-margin-end"></app-language-switcher>
-          <app-user-state
-            [showUserStateActions]="!isIframeHeader"
-          ></app-user-state>
+          <app-user-state></app-user-state>
         </ion-row>
       </ion-col>
     </ion-row>

interfaces/Portal/src/app/pages/login/login.page.html

@@ -211,9 +211,40 @@ <h1 class="text-uppercase">
               (click)="loginSso()"
               expand="block"
               color="primary"
+              [disabled]="isPopupBlocked"
             >
               {{ 'page.login.sso.btn-text' | translate }}
             </ion-button>
+            <div
+              class="error-message"
+              *ngIf="ssoUserIsNotFound"
+            >
+              <ion-text
+                color="danger"
+                class="error-message--text"
+              >
+                <ion-icon
+                  name="warning"
+                  aria-hidden="true"
+                ></ion-icon>
+                {{ 'page.login.sso.user-not-found' | translate }}
+              </ion-text>
+            </div>
+            <div
+              class="error-message"
+              *ngIf="isPopupBlocked"
+            >
+              <ion-text
+                color="danger"
+                class="error-message--text"
+              >
+                <ion-icon
+                  name="warning"
+                  aria-hidden="true"
+                ></ion-icon>
+                {{ 'page.login.sso.popup-is-blocked' | translate }}
+              </ion-text>
+            </div>
           </form>
         </div>
       </div>

interfaces/Portal/src/app/pages/login/login.page.scss

@@ -1,4 +1,13 @@
-.clickable {
-  cursor: pointer;
-  text-decoration: underline;
+.error-message {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.error-message--text {
+  display: flex;
+  align-items: center;
+}
+
+.error-message--text ion-icon {
+  margin-right: 0.2rem;
 }

interfaces/Portal/src/app/pages/login/login.page.ts

@@ -1,22 +1,27 @@
 import { HttpStatusCode } from '@angular/common/http';
-import { Component, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
 import { MsalService } from '@azure/msal-angular';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
+import { isPopupBlocked } from 'src/app/shared/utils/check-pop-up-is-blocked.utils';
 import { isIframed } from 'src/app/shared/utils/is-iframed.util';
 import { environment } from '../../../environments/environment';
 import { AppRoutes } from '../../app-routes.enum';
-import { AuthService } from '../../auth/auth.service';
+import {
+  AuthService,
+  SSO_ERRORS,
+  SSO_ERROR_KEY,
+} from '../../auth/auth.service';
 import { SystemNotificationComponent } from '../../components/system-notification/system-notification.component';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.page.html',
   styleUrls: ['./login.page.scss'],
 })
-export class LoginPage implements OnDestroy {
+export class LoginPage implements OnDestroy, OnInit {
   public useSso = environment.use_sso_azure_entra;
 
   @ViewChild('loginForm')
@@ -46,13 +51,29 @@ export class LoginPage implements OnDestroy {
 
   private msalSubscription: Subscription;
 
+  public ssoUserIsNotFound: boolean;
+  public isPopupBlocked = false;
+
   constructor(
     private authService: AuthService,
     private translate: TranslateService,
     private router: Router,
     private msalService?: MsalService,
   ) {}
 
+  ngOnInit(): void {
+    if (environment.use_sso_azure_entra) {
+      // Retrieve the error message from session storage
+      this.ssoUserIsNotFound =
+        sessionStorage.getItem(SSO_ERROR_KEY) === SSO_ERRORS.notFound;
+      sessionStorage.removeItem(SSO_ERROR_KEY);
+
+      if (isIframed()) {
+        this.isPopupBlocked = isPopupBlocked();
+      }
+    }
+  }
+
   ngOnDestroy(): void {
     if (this.msalSubscription) {
       this.msalSubscription.unsubscribe();

interfaces/Portal/src/app/services/programs-service-api.service.ts

@@ -965,11 +965,18 @@ export class ProgramsServiceApiService {
     );
   }
 
-  public async getCurrentUser(): Promise<{ user: User }> {
-    return this.apiService.get(
-      environment.url_121_service_api,
-      ApiPath.usersCurrent,
-    );
+  public async getCurrentUser(): Promise<{
+    user?: User;
+    error?: { message: string; username?: string };
+  }> {
+    return this.apiService
+      .get(environment.url_121_service_api, ApiPath.usersCurrent)
+      .then((response) => {
+        return response;
+      })
+      .catch((error) => {
+        return error;
+      });
   }
 
   createProgramFromKobo(token: string, assetId: string): Promise<Program> {

interfaces/Portal/src/app/shared/utils/check-pop-up-is-blocked.utils.ts

@@ -0,0 +1,21 @@
+/**
+ * Checks if the browser is blocking pop-up windows.
+ *
+ * This function attempts to open a small pop-up window. If the window cannot be opened,
+ * it means that pop-ups are blocked by the browser.
+ *
+ * @returns {boolean} - Returns true if pop-ups are blocked, otherwise false.
+ */
+export function isPopupBlocked(): boolean {
+  const testPopup = window.open('', '_blank', 'width=100,height=100');
+  if (
+    !testPopup ||
+    testPopup.closed ||
+    typeof testPopup.closed === 'undefined'
+  ) {
+    return true; // Popup is blocked
+  } else {
+    testPopup.close();
+    return false; // Popup is not blocked
+  }
+}

interfaces/Portal/src/assets/i18n/en.json

@@ -148,7 +148,9 @@
       "portalTitle": "Portal",
       "sso": {
         "btn-text": "Log in via SSO",
-        "label": "121 Portal uses Single Sign-On (SSO) to securely authenticate and log in all (121 & Redline) users."
+        "label": "121 Portal uses Single Sign-On (SSO) to securely authenticate and log in all (121 & Redline) users.",
+        "popup-is-blocked": "Please allow pop-up windows to login.",
+        "user-not-found": "Unknown user account or authentication failed."
       }
     },
     "program": {

interfaces/Portal/src/environments/environment.ts

@@ -24,4 +24,6 @@ export const environment = {
   use_sso_azure_entra: false, // Enable Azure AD login
   azure_ad_client_id: '',
   azure_ad_tenant_id: '',
+  azure_ad_domains: '',
+  azure_ad_url: '',
 };