feat(ui5-middleware-onelogin): possible to provide certificate to login directly

[marianfoo]

fix #1078

i added a sample app to login to BTP Cockpit

TODO:

• Login was successfull but still says looks like a login page, reloading...
• Don´t know how to implement the parameter for clientCertificates, currently just use some of the directly
  • ClientCertificate is currently a Array Object Property as defined in playwright api reference.
• Just reuse useCertificate like i did in the sample?
  • Currently the Property ClientCertificate is only used if useCertficate is true and ClientCertificate is defined.
• Add Documentation
• Avoid having passphrase in log output?

Playwright API Reference for clientCertificates:

https://playwright.dev/docs/api/class-testoptions#test-options-client-certificates

Array<Object>
origin string

Exact origin that the certificate is valid for. Origin includes https protocol, a hostname and optionally a port.

certPath string (optional)

Path to the file with the certificate in PEM format.

cert Buffer (optional)

Direct value of the certificate in PEM format.

keyPath string (optional)

Path to the file with the private key in PEM format.

key Buffer (optional)

Direct value of the private key in PEM format.

pfxPath string (optional)

Path to the PFX or PKCS12 encoded private key and certificate chain.

pfx Buffer (optional)

Direct value of the PFX or PKCS12 encoded private key and certificate chain.

passphrase string (optional)

Passphrase for the private key (PEM or PFX).

Current Output

npm start 

> [email protected] start
> ui5 serve --port 8080 -o index.html

info graph:helpers:ui5Framework Using OpenUI5 version: 1.120.20
info server:custom-middleware:ui5-middleware-livereload Livereload server started!
Server started
URL: http://localhost:8080
info server:custom-middleware:ui5-middleware-onelogin Fetching cookie, hang on!
info server:custom-middleware:ui5-middleware-onelogin Default options:
info server:custom-middleware:ui5-middleware-onelogin {
  configuration: { subdirectory: 'sap/bc/ui2/flp/', useCertificate: false }
}
info server:custom-middleware:ui5-middleware-onelogin Env options:
info server:custom-middleware:ui5-middleware-onelogin { configuration: { useCertificate: false, debug: false } }
info server:custom-middleware:ui5-middleware-onelogin Yaml options:
info server:custom-middleware:ui5-middleware-onelogin {
  configuration: {
    debug: true,
    path: 'https://emea.cockpit.btp.cloud.sap',
    subdirectory: 'cockpit#/',
    useCertificate: true,
    clientCertificatesOrigin: 'https://accounts.sap.com',
    clientCertificatesPfxPath: 'sap.pfx',
    clientCertificatesPfxPpassphrase: 'XXX'
  },
  middlewareName: 'ui5-middleware-onelogin'
}
info server:custom-middleware:ui5-middleware-onelogin Effective options:
info server:custom-middleware:ui5-middleware-onelogin {
  configuration: {
    subdirectory: 'cockpit#/',
    useCertificate: true,
    debug: true,
    path: 'https://emea.cockpit.btp.cloud.sap',
    clientCertificatesOrigin: 'https://accounts.sap.com',
    clientCertificatesPfxPath: 'sap.pfx',
    clientCertificatesPfxPpassphrase: 'XXX'
  },
  middlewareName: 'ui5-middleware-onelogin'
}
info server:custom-middleware:ui5-middleware-onelogin Trying to fetch cookie from "https://emea.cockpit.btp.cloud.sap/cockpit#/"
info server:custom-middleware:ui5-middleware-onelogin "https://emea.cockpit.btp.cloud.sap/cockpit#/" looks like a login page, reloading...
info server:custom-middleware:ui5-middleware-onelogin "https://emea.cockpit.btp.cloud.sap/cockpit#/" looks like a login page, reloading...
info server:custom-middleware:ui5-middleware-onelogin "https://emea.cockpit.btp.cloud.sap/cockpit#/" looks like a login page, reloading...
info server:custom-middleware:ui5-middleware-onelogin Couldn't login using a certificate!
info server:custom-middleware:ui5-middleware-onelogin Parsed cookie is dtCookie=v_4_srv_24_sn_8A31D654D1F57B8420411A106CD110CB_perc_100000_ol_0_mul_1_app-3Acab67a9e1543df82_1; Domain=.cloud.sap; Path=/; SameSite=Lax; IDP_USER=NzY0OTYwMzY

[petermuessig]

@marianfoo : you also need to update the package-lock.json otherwise the build fails

[marianfoo]

@marianfoo : you also need to update the package-lock.json otherwise the build fails

done

[marianfoo]

added property ClientCertificate defined in

ui5-ecosystem-showcase/packages/ui5-middleware-onelogin/src/index.ts

Lines 18 to 28 in e555a5e

	/**
	* @typedef {Object} ClientCertificate
	* @property {string} origin - Exact origin that the certificate is valid for. Origin includes https protocol, a hostname and optionally a port.
	* @property {string} [certPath] - Path to the file with the certificate in PEM format.
	* @property {Buffer} [cert] - Direct value of the certificate in PEM format.
	* @property {string} [keyPath] - Path to the file with the private key in PEM format.
	* @property {Buffer} [key] - Direct value of the private key in PEM format.
	* @property {string} [pfxPath] - Path to the PFX or PKCS12 encoded private key and certificate chain.
	* @property {Buffer} [pfx] - Direct value of the PFX or PKCS12 encoded private key and certificate chain.
	* @property {string} [passphrase] - Passphrase for the private key (PEM or PFX).
	*/

usage as object in env like in this sample

ui5-ecosystem-showcase/packages/ui5-middleware-onelogin/sample/certificate/.envTEMPLATE

Line 3 in e555a5e

UI5_MIDDLEWARE_ONELOGIN_CLIENT_CERTIFICATES=[{"origin": "https://accounts.sap.com","pfxPath": "sap.pfx","passphrase": "XXX"}]

or in yaml like this

ui5-ecosystem-showcase/packages/ui5-middleware-onelogin/sample/certificate/ui5.yaml

Lines 25 to 33 in e555a5e

	# clientCertificates:
	# - origin: "https://accounts.sap.com"
	# #certPath: "path/to/cert.pem"
	# # cert: Buffer value (not applicable in YAML)
	# #keyPath: "path/to/key.pem"
	# # key: Buffer value (not applicable in YAML)
	# pfxPath: "sap.pfx"
	# # pfx: Buffer value (not applicable in YAML)
	# #passphrase: "your_passphrase_here"