feat(auth): btp auth with cert service (#649)

.github/workflows/wdi5-tests_auth.yml

@@ -28,6 +28,8 @@ env:
   BROWSERSTACK_ACCESS_KEY: ${{secrets.BROWSERSTACK_ACCESS_KEY}}
   SAUCE_USERNAME: ${{secrets.SAUCE_USERNAME}}
   SAUCE_ACCESS_KEY: ${{secrets.SAUCE_ACCESS_KEY}}
+  SAPPFX_BASE64: ${{secrets.SAPPFX_BASE64}}
+  SAPPFX_PASSPHRASE: ${{secrets.SAPPFX_PASSPHRASE}}
 
 jobs:
   authorize:
@@ -64,10 +66,19 @@ jobs:
           npm pkg delete scripts.prepare
           npm ci
 
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
       # build things
       - name: build
         run: npm run build
 
+      - name: Create PFX file from secret
+        env:
+          SAPPFX_BASE64: ${{ secrets.SAPPFX_BASE64 }}
+        run: |
+          echo "$SAPPFX_BASE64" | base64 -d > examples/ui5-ts-app/sap.pfx
+
       # this against the submodule cloned from https://github.com/SAP-samples/cap-bookshop-wdi5
       - name: local CAP authentication
         run: npm run test:capAuth

docs/authentication.md

@@ -190,6 +190,70 @@ capabilities: {
 
 <!-- tabs:end -->
 
+### SAP BTP with Client Certificate Authentication
+
+?> only available in `wdi5` >= 2
+
+This authentication method will authenticate you with the certificate you get from [SAP Passport](https://support.sap.com/en/my-support/single-sign-on-passports.html).  
+This way avoids the need to use the login process of the application you are testing.  
+It is recommended to put the passphrase in an environment variable.  
+For pipelines, you can create the PFX file from the base64 encoded secret and put the passphrase in an environment variable.  
+See the [GitHub Actions workflow](https://github.com/ui5-community/wdi5/blob/main/.github/workflows/wdi5-tests_auth.yml#L76) as an example on how to use this authentication method in a pipeline.
+
+<!-- tabs:start -->
+
+#### **single browser**
+
+```js
+baseUrl: "https://your-deployed-ui5-on-btp.app",
+capabilities: {
+    // browserName: "..."
+    "wdi5:authentication": {
+        provider: "Certificate",
+        certificateOrigin: "https://accounts.sap.com", // this should always be accounts.sap.com
+        certificateUrl: "https://emea.cockpit.btp.cloud.sap/cockpit#/", // this is opened in the browser for authentication, if not specified the configured `baseUrl` is used
+        certificatePfxPath: "./sap.pfx",
+        certificatePfxPassword: process.env.SAPPFX_PASSPHRASE
+    }
+}
+```
+
+#### **multiremote**
+
+```js
+baseUrl: "https://your-deployed-ui5-on-btp.app",
+capabilities: {
+    // "one" is the literal reference to a browser instance
+    one: {
+        capabilities: {
+            // browserName: "..."
+            "wdi5:authentication": {
+                provider: "Certificate",
+                certificateOrigin: "https://accounts.sap.com", // this should always be accounts.sap.com
+                certificateUrl: "https://emea.cockpit.btp.cloud.sap/cockpit#/", // this is opened in the browser for authentication, if not specified the configured `baseUrl` is used
+                certificatePfxPath: "./sap.pfx",
+                certificatePfxPassword: process.env.SAPPFX_PASSPHRASE
+            }
+        }
+    },
+    // "two" is the literal reference to a browser instance
+    two: {
+        capabilities: {
+            // browserName: "..."
+            "wdi5:authentication": {
+                provider: "Certificate",
+                certificateOrigin: "https://accounts.sap.com", // this should always be accounts.sap.com
+                certificateUrl: "https://emea.cockpit.btp.cloud.sap/cockpit#/", // this is opened in the browser for authentication, if not specified the configured `baseUrl` is used
+                certificatePfxPath: "./sap.pfx",
+                certificatePfxPassword: process.env.SAPPFX_PASSPHRASE
+            }
+        }
+    }
+}
+```
+
+<!-- tabs:end -->
+
 ### Office 365
 
 <!-- tabs:start -->

examples/ui5-ts-app/.gitignore

@@ -15,4 +15,7 @@ node_modules/
 
 # do not add dependency lock files to this repo because it should remain independent from specific dependency managers
 package-lock.json
-yarn.lock
+yarn.lock
+
+# PFX file
+sap.pfx

examples/ui5-ts-app/package.json

@@ -17,6 +17,7 @@
     "test:lateInject": "wdio run wdio-ui5-late.conf.ts",
     "test:wz": "wdio run test/e2e/workzone/wdio-ui5-workzone.conf.ts",
     "authentication:btp": "wdio run test/e2e/authentication/wdio-btp-authentication.conf.ts",
+    "authentication:cert": "wdio run test/e2e/authentication/wdio-cert-authentication.conf.ts",
     "authentication:basic-auth": "wdio run test/e2e/authentication/wdio-basic-auth-authentication.conf.ts",
     "authentication:custom": "wdio run test/e2e/authentication/wdio-custom-authentication.conf.ts",
     "authentication:multiRemote": "wdio run test/e2e/authentication/wdio-btp-authentication-multiremote.conf.ts",
@@ -40,6 +41,7 @@
     "ui5-middleware-livereload": "latest",
     "ui5-middleware-simpleproxy": "latest",
     "ui5-tooling-transpile": "latest",
-    "wdio-ui5-service": "*"
+    "wdio-ui5-service": "*",
+    "dotenv": "16.4.5"
   }
 }

examples/ui5-ts-app/test/e2e/AuthenticationCert.test.ts

@@ -0,0 +1,37 @@
+import { wdi5 } from "wdio-ui5-service"
+
+describe("wdi5 authentication", async () => {
+    it("wdi5.isLoggedIn", async () => {
+        expect(await wdi5.isLoggedIn()).toBeTruthy()
+    })
+
+    it("should contain 'Zeis' in header title", async () => {
+        await browser.waitUntil(
+            async () => {
+                const state = await browser.execute(() => {
+                    return (
+                        window.document.readyState === "complete" &&
+                        (!(window as any)._pendingFetchRequests || (window as any)._pendingFetchRequests === 0)
+                    )
+                })
+                return state
+            },
+            {
+                timeout: 10000,
+                timeoutMsg: "Network did not reach idle state after 10s"
+            }
+        )
+
+        const logger = wdi5.getLogger()
+        logger.log("Starting test to check header title")
+
+        const headerTitle = await $("span[id='cockpitObjectPageHeader-innerTitle']")
+        logger.log("Found header title element")
+
+        const titleText = await headerTitle.getText()
+        logger.log(`Retrieved title text: "${titleText}"`)
+
+        expect(titleText).toContain("Zeis")
+        logger.log("Successfully verified title contains 'Zeis'")
+    })
+})

examples/ui5-ts-app/test/e2e/authentication/wdio-cert-authentication.conf.ts

@@ -0,0 +1,54 @@
+import { resolve } from "path"
+import { merge } from "ts-deepmerge"
+import { config as baseConf } from "./wdio-base.conf.js"
+import "dotenv/config"
+
+const _config = {
+    baseUrl: "https://emea.cockpit.btp.cloud.sap/cockpit",
+    capabilities: baseConf.capabilities ? [...baseConf.capabilities] : []
+}
+
+delete baseConf.capabilities
+delete baseConf.specs
+
+baseConf.specs = [resolve("./test/e2e/AuthenticationCert.test.ts")]
+
+if (process.env.BROWSERSTACK) {
+    _config.capabilities = _config.capabilities.map((capability) => {
+        const enhancedCapability = {
+            ...capability,
+            "wdi5:authentication": {
+                provider: "Certificate",
+                certificateOrigin: "https://accounts.sap.com",
+                certificateUrl: "https://emea.cockpit.btp.cloud.sap/cockpit#/",
+                certificatePfxPath: "./sap.pfx",
+                certificatePfxPassword: process.env.SAPPFX_PASSPHRASE
+            }
+        }
+        return enhancedCapability
+    })
+} else {
+    _config.capabilities = [
+        {
+            "wdi5:authentication": {
+                provider: "Certificate",
+                certificateOrigin: "https://accounts.sap.com",
+                certificateUrl: "https://emea.cockpit.btp.cloud.sap/cockpit#/",
+                certificatePfxPath: "./sap.pfx",
+                certificatePfxPassword: process.env.SAPPFX_PASSPHRASE
+            },
+            browserName: "chrome",
+            "goog:chromeOptions": {
+                args:
+                    process.argv.indexOf("--headless") > -1
+                        ? ["headless", "disable-gpu"]
+                        : process.argv.indexOf("--debug") > -1
+                          ? ["window-size=1440,800", "--auto-open-devtools-for-tabs"]
+                          : ["window-size=1440,800"]
+            },
+            acceptInsecureCerts: true
+        }
+    ]
+}
+
+export const config = merge(baseConf, _config)

examples/ui5-ts-app/wdio-ui5.conf.ts

@@ -16,6 +16,7 @@ export const config: wdi5Config = {
         "./test/e2e/multiremote.test.ts",
         "./test/e2e/BasicMultiRemoteAuthentication.test.ts",
         "./test/e2e/Authentication.test.ts",
+        "./test/e2e/AuthenticationCert.test.ts",
         "./test/e2e/ui5-late.test.ts",
         "./test/e2e/protocol/**/*.test.ts",
         "./test/e2e/workzone/**/*.test.ts"
@@ -31,8 +32,8 @@ export const config: wdi5Config = {
                     process.argv.indexOf("--headless") > -1
                         ? ["--headless"]
                         : process.argv.indexOf("--debug") > -1
-                        ? ["window-size=1440,800", "--auto-open-devtools-for-tabs"]
-                        : ["window-size=1440,800"]
+                          ? ["window-size=1440,800", "--auto-open-devtools-for-tabs"]
+                          : ["window-size=1440,800"]
             },
             acceptInsecureCerts: true
         }