import npm package instead of script

Author: eiman-eltigani-ttd

docker-compose.yml

@@ -23,7 +23,7 @@ services:
   javascript-sdk-server-side:
     build:
       context: .
-      dockerfile: web-integrations/javascript-sdk/server-side/Dockerfile
+      dockerfile: web-integrations/javascript-sdk/server-side-node/Dockerfile
     ports:
       - "3034:3034"
     container_name: javascript-sdk-server-side

web-integrations/javascript-sdk/server-side-node/Dockerfile

@@ -3,13 +3,13 @@ FROM node:20.11.0-alpine3.18
 WORKDIR /usr/src/app
 
 # Copy package files first for better caching
-COPY web-integrations/javascript-sdk/server-side/package*.json ./
+COPY web-integrations/javascript-sdk/server-side-node/package*.json ./
 RUN npm install
 
 # Copy application files
-COPY web-integrations/javascript-sdk/server-side/server.js ./
-COPY web-integrations/javascript-sdk/server-side/public ./public/
-COPY web-integrations/javascript-sdk/server-side/views ./views/
+COPY web-integrations/javascript-sdk/server-side-node/server.js ./
+COPY web-integrations/javascript-sdk/server-side-node/public ./public/
+COPY web-integrations/javascript-sdk/server-side-node/views ./views/
 
 ENV PORT=3034
 EXPOSE 3034

web-integrations/javascript-sdk/server-side-node/README.md

@@ -10,10 +10,11 @@ For more information on the JavaScript SDK, refer to the [UID2 SDK for JavaScrip
 
 Unlike the browser where the SDK runs natively in the DOM, this example uses **jsdom** to simulate a browser environment within Node.js:
 
-1. **Creates a virtual DOM**: Uses jsdom to provide `window`, `document`, and `navigator` objects that the SDK expects
-2. **Polyfills browser APIs**: Adds Node.js equivalents for Web Crypto API (`crypto.subtle`) and text encoding APIs (`TextEncoder`/`TextDecoder`)
-3. **Loads the SDK**: Fetches and executes the browser-based SDK code within the simulated environment
-4. **Runs SDK methods**: Calls `setIdentityFromEmail` just like in a browser, with the same public credentials
+1. **Imports the SDK**: Uses npm packages `@uid2/uid2-sdk` or `@unified-id/euid-sdk` (selected dynamically based on `IDENTITY_NAME`)
+2. **Creates a virtual DOM**: Uses jsdom to provide `window`, `document`, and `navigator` objects that the SDK expects
+3. **Polyfills browser APIs**: Adds Node.js equivalents for Web Crypto API (`crypto.subtle`) and text encoding APIs (`TextEncoder`/`TextDecoder`)
+4. **Instantiates the SDK**: Creates a new instance of `UID2` or `EUID` class
+5. **Runs SDK methods**: Calls `setIdentityFromEmail` just like in a browser, with the same public credentials
 
 This demonstrates that the client-side SDK can be compatible with server-side Node.js environments when given the proper browser-like context.
 
@@ -61,10 +62,10 @@ The following table lists the environment variables that you must specify to sta
 | `UID_SERVER_BASE_URL` | The base URL of the UID2/EUID service. For details, see [Environments](https://unifiedid.com/docs/getting-started/gs-environments) (UID2) or [Environments](https://euid.eu/docs/getting-started/gs-environments) (EUID). | UID2: `https://operator-integ.uidapi.com`<br/>EUID: `https://integ.euid.eu/v2` |
 | `UID_CSTG_SUBSCRIPTION_ID` | Your UID2/EUID subscription ID for Client-Side Token Generation. **These are public credentials.** | Your assigned subscription ID (e.g., `DMr7uHxqLU`) |
 | `UID_CSTG_SERVER_PUBLIC_KEY` | Your UID2/EUID server public key for Client-Side Token Generation. **These are public credentials.** | Your assigned public key |
-| `UID_JS_SDK_URL` | URL to the UID2/EUID JavaScript SDK | UID2: `https://cdn.integ.uidapi.com/uid2-sdk-4.0.1.js`<br/>EUID: `https://cdn.integ.euid.eu/euid-sdk-4.0.1.js` |
-| `UID_JS_SDK_NAME` | Global variable name for the SDK | UID2: `__uid2`<br/>EUID: `__euid` |
 | `SESSION_KEY` | Used by the cookie-session middleware to encrypt the session data stored in cookies. | Any secure random string |
 
+> **⚠️ Important**: Your CSTG subscription must be configured with `http://localhost:3034` as an allowed origin. Contact your UID2/EUID representative to add this origin to your subscription's allowed origins list.
+
 ### Display/UI Configuration
 
 | Variable | Description | Example Values |

web-integrations/javascript-sdk/server-side-node/package.json

@@ -16,13 +16,15 @@
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
-    "axios": "^1.6.0",
+    "@uid2/uid2-sdk": "^4.0.1",
+    "@unified-id/euid-sdk": "^4.0.1",
     "cookie-session": "^2.0.0",
     "dotenv": "^16.0.3",
     "ejs": "^3.1.9",
     "express": "^4.18.2",
     "jsdom": "^23.0.0",
-    "nocache": "^4.0.0"
+    "nocache": "^4.0.0",
+    "xhr2": "^0.2.1"
   },
   "devDependencies": {
     "nodemon": "^3.0.1"

web-integrations/javascript-sdk/server-side-node/server.js

@@ -8,76 +8,94 @@ const ejs = require('ejs');
 const express = require('express');
 const nocache = require('nocache');
 const { JSDOM } = require('jsdom');
-const axios = require('axios');
 const crypto = require('crypto');
 const util = require('util');
+const XMLHttpRequest = require('xhr2');
 
 const app = express();
 const port = process.env.PORT || 3034;
 
 let uidBaseUrl = process.env.UID_SERVER_BASE_URL;
 const subscriptionId = process.env.UID_CSTG_SUBSCRIPTION_ID;
 const serverPublicKey = process.env.UID_CSTG_SERVER_PUBLIC_KEY;
-const uidJsSdkUrl = process.env.UID_JS_SDK_URL;
-const uidJsSdkName = process.env.UID_JS_SDK_NAME;
 
 // UI/Display configuration
 const identityName = process.env.IDENTITY_NAME;
 const docsBaseUrl = process.env.DOCS_BASE_URL;
 
+// SDK will be loaded dynamically (it's an ES module)
+let SdkClass = null;
+
 // Initialize UID JavaScript SDK in a simulated browser environment using jsdom
 // This demonstrates that the client-side SDK works in Node.js with jsdom
 let uidSdk = null;
 let dom = null;
 
 async function initializeSDK() {
-  // Create a virtual DOM environment
+  // Create a virtual DOM environment for the SDK to run in
+  // NOTE: The origin 'http://localhost:3034' must be added to your CSTG subscription's
+  // allowed origins list by your UID2/EUID representative
   dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
-    url: 'http://localhost',
+    url: 'http://localhost:3034',
     runScripts: 'dangerously',
     resources: 'usable',
     pretendToBeVisual: true,
   });
 
-  // Set global variables for the SDK
+  // Set global variables for the SDK (SDK expects browser globals)
   global.window = dom.window;
   global.document = dom.window.document;
   global.navigator = dom.window.navigator;
   global.localStorage = dom.window.localStorage;
 
-  // Polyfill Web Crypto API for jsdom
-  // The SDK needs window.crypto.subtle for encryption
+  // Polyfill Web Crypto API for jsdom (SDK uses crypto.subtle for encryption)
   Object.defineProperty(dom.window, 'crypto', {
     value: crypto.webcrypto,
     writable: false,
     configurable: true
   });
 
-  // Polyfill TextEncoder and TextDecoder (required by the SDK)
+  // Polyfill TextEncoder and TextDecoder (required by SDK for string/byte conversion)
   global.TextEncoder = util.TextEncoder;
   global.TextDecoder = util.TextDecoder;
   dom.window.TextEncoder = util.TextEncoder;
   dom.window.TextDecoder = util.TextDecoder;
 
-  // Load the UID SDK script from CDN
-  try {
-    const response = await axios.get(uidJsSdkUrl);
-    
-    // Execute the SDK code in the jsdom context
-    const scriptEl = dom.window.document.createElement('script');
-    scriptEl.textContent = response.data;
-    dom.window.document.body.appendChild(scriptEl);
-    
-    // Wait for the SDK to initialize
-    await new Promise(resolve => setTimeout(resolve, 100));
+  // Polyfill XMLHttpRequest with Origin header support
+  // The SDK needs the Origin header to be set for CSTG validation
+  const OriginalXHR = XMLHttpRequest;
+  class XMLHttpRequestWithOrigin extends OriginalXHR {
+    constructor() {
+      super();
+      this._origin = 'http://localhost:3034';
+    }
 
-    // Get reference to the SDK
-    uidSdk = dom.window[uidJsSdkName];
-    if (!uidSdk) {
-      throw new Error(`SDK not found at window.${uidJsSdkName}`);
+    open(method, url, async) {
+      const result = super.open(method, url, async);
+      // Set Origin header immediately after open (required for CSTG)
+      super.setRequestHeader('Origin', this._origin);
+      return result;
     }
+  }
+  
+  global.XMLHttpRequest = XMLHttpRequestWithOrigin;
+  dom.window.XMLHttpRequest = XMLHttpRequestWithOrigin;
+  
+  try {
+    // Dynamically import the SDK (it's an ES module)
+    const isEUID = identityName && identityName.toUpperCase() === 'EUID';
+    if (isEUID) {
+      const { EUID } = await import('@unified-id/euid-sdk');
+      SdkClass = EUID;
+    } else {
+      const { UID2 } = await import('@uid2/uid2-sdk');
+      SdkClass = UID2;
+    }
+    
+    // Instantiate the SDK (UID2 or EUID based on config)
+    uidSdk = new SdkClass();
 
-    // Initialize the SDK
+    // Initialize the SDK with base URL
     uidSdk.init({ baseUrl: uidBaseUrl });
 
     return uidSdk;