diff --git a/container/cypress/e2e/test-app/iframe/iframe-container.cy.js b/container/cypress/e2e/test-app/iframe/iframe-container.cy.js index bc5fa13d93..74724c4ef6 100644 --- a/container/cypress/e2e/test-app/iframe/iframe-container.cy.js +++ b/container/cypress/e2e/test-app/iframe/iframe-container.cy.js @@ -39,4 +39,29 @@ describe('Iframe Container Test', () => { }); }); }); + + it('set auth token', () => { + const stub = cy.stub(); + cy.on('window:alert', stub); + + cy.visit('http://localhost:8080/iframe/iframeContainer.html'); + + cy.get('button[id="update-token"]').click(); + + cy.get('[data-test-id="iframe-based-container-test"]') + .shadow() + .get('iframe') + .then(iframe => { + const $body = iframe.contents().find('body'); + cy.wrap($body) + .contains('test get token') + .click() + .then(() => { + cy.wrap(stub).should( + 'have.been.calledWith', + 'Custom message recieved: {"id":"token.updated","_metaData":{},"data":{"value":"updated token"}}' + ); + }); + }); + }); }); diff --git a/container/src/LuigiContainer.svelte b/container/src/LuigiContainer.svelte index d3807e096e..e703f3d55a 100644 --- a/container/src/LuigiContainer.svelte +++ b/container/src/LuigiContainer.svelte @@ -23,7 +23,8 @@ hasBack: { type: 'Boolean', reflect: false, attribute: 'has-back' }, documentTitle: { type: 'String', reflect: false, attribute: 'document-title' }, allowRules: { type: 'Array', reflect: false, attribute: 'allow-rules' }, - sandboxRules: { type: 'Array', reflect: false, attribute: 'sandbox-rules' } + sandboxRules: { type: 'Array', reflect: false, attribute: 'sandbox-rules' }, + authData: { type: 'Object', reflect: false, attribute: 'auth-data' } }, extend: customElementConstructor => { let notInitFn = name => { @@ -35,8 +36,13 @@ updateContext = notInitFn('updateContext'); closeAlert = notInitFn('closeAlert'); attributeChangedCallback(name, oldValue, newValue) { - if (this.containerInitialized && name === 'context') { - this.updateContext(JSON.parse(newValue)); + if (this.containerInitialized) { + if (name === 'context') { + this.updateContext(JSON.parse(newValue)); + } + if (name === 'auth-data') { + ContainerAPI.updateAuthData(this.iframeHandle, JSON.parse(newValue)); + } } }; getNoShadow(){ @@ -78,6 +84,7 @@ export let userSettings: any; export let anchor: string; + export let authData: any; const iframeHandle: | { @@ -218,4 +225,4 @@ /> {/if} {/if} - \ No newline at end of file + diff --git a/container/src/api/container-api.ts b/container/src/api/container-api.ts index 6b07f5434a..4589077486 100644 --- a/container/src/api/container-api.ts +++ b/container/src/api/container-api.ts @@ -3,7 +3,7 @@ import { containerService } from '../services/container.service'; export class ContainerAPIFunctions { /** - * Updates the context of the microfrontend by sending a message to the iframe or webcomponent that sets the context of the microfrontend + * Updates the context of the microfrontend by sending a message to the iframe that sets the context of the microfrontend * @param contextObj The context data * @param internal internal luigi legacy data * @param iframeHandle a reference to the iframe that is needed to send a message to it internally @@ -17,7 +17,7 @@ export class ContainerAPIFunctions { context: contextObj, internal: internalParameter, // set withoutSync to true for the container case to avoid browser history changes from luigi client - withoutSync: true + withoutSync: true, }, LuigiInternalMessageID.SEND_CONTEXT_OBJECT ); @@ -26,6 +26,23 @@ export class ContainerAPIFunctions { } }; + /** + * Updates the auth data of the microfrontend by sending a message to the iframe that sets the authData of the microfrontend + * @param iframeHandle a reference to the iframe that is needed to send a message to it internally + * @param authData the authData object being sent to the microfrontend + */ + updateAuthData = (iframeHandle: any, authData: any) => { + if (iframeHandle && authData) { + containerService.sendCustomMessageToIframe( + iframeHandle, + {authData}, + LuigiInternalMessageID.AUTH_SET_TOKEN + ); + } else { + console.warn('Attempting to update auth data on inexisting iframe or authData'); + } + }; + /** * Send a custom message to the referenced iframe or web component * @param id a string containing the message id diff --git a/container/src/constants/internal-communication.ts b/container/src/constants/internal-communication.ts index 5125d9e367..bddedb866e 100644 --- a/container/src/constants/internal-communication.ts +++ b/container/src/constants/internal-communication.ts @@ -112,4 +112,9 @@ export namespace LuigiInternalMessageID { * A message emmitted from the Microfrontend when a request to set the 'dirty status' (ex: avoid closing if usaved changes) is sent */ export const SET_DIRTY_STATUS_REQUEST = 'luigi.set-page-dirty'; + + /** + * A message emmitted from the Microfrontend when a request to set the 'token auth' is sent + */ + export const AUTH_SET_TOKEN = 'luigi.auth.tokenIssued'; } diff --git a/container/src/services/container.service.ts b/container/src/services/container.service.ts index 081de511e1..24237a4b45 100644 --- a/container/src/services/container.service.ts +++ b/container/src/services/container.service.ts @@ -106,7 +106,8 @@ export class ContainerService { { msg: LuigiInternalMessageID.SEND_CONTEXT_HANDSHAKE, context: targetCnt.context || {}, - internal: {} + internal: {}, + authData: targetCnt.authData || {}, }, '*' ); diff --git a/container/test-app/iframe/iframeContainer.html b/container/test-app/iframe/iframeContainer.html index 60c77ff9d5..f3e252cdfc 100644 --- a/container/test-app/iframe/iframeContainer.html +++ b/container/test-app/iframe/iframeContainer.html @@ -11,12 +11,14 @@

+
@@ -38,6 +40,7 @@

// Some glue code const sendCustomMessageBtn = document.getElementById('btn-1'); const updateContextButton = document.getElementById('update-ctx'); + const updateAccessTokenButton = document.getElementById('update-token'); // for testing send Custom message functionality sendCustomMessageBtn.addEventListener('click', () => { @@ -50,6 +53,10 @@

luigiContainer.updateContext({ myContext: 'some context data' }); }); + updateAccessTokenButton.addEventListener('click', () => { + luigiContainer.setAttribute('auth-data', '{"accessToken": "updated token"}'); + }); + luigiContainer.addEventListener(Events.NAVIGATION_REQUEST, event => { if (confirm('Do you want to leave this page?')) { window.location = event.detail.link; diff --git a/container/test-app/iframe/microfrontend.html b/container/test-app/iframe/microfrontend.html index dbe180c44a..bc88bc581e 100644 --- a/container/test-app/iframe/microfrontend.html +++ b/container/test-app/iframe/microfrontend.html @@ -63,6 +63,7 @@

Multi purpose demo page

+