We have an Outlook Javascript Add-In which:
a. opens a Task Pane I-Frame, which will show a HTML page (that has some JS functions)
b. The page will have JS functions that will make HTTP calls to a Web API which is secured by Keycloak; i.e. each API call will need the JWT send in the “Authentication” header.
c. This Add-In is available in the Desktop Outlook application as well as the OutlookOnTheWeb application in a Internet browser.
My initial implemention was to use the Client-side Javascript Adapter from Keycloak, as it will make use of the Keycloak coookies. Specifically, allow retrieval of the access token JWT without explicitly submitting credientials);
My main question is if the JS adapter is meant to work in this scenario ?
Has anyone successfully implemented the JS adapter in a Outlook JS Add-In ? (if so, with what Keycloak and Outlook versions)
I have run into two blocking issues below. Would someone be able to tell if this is due to a bug, intended behaviour or incorrect implementation on my part ?
Thanks!
Clayton
Issue #1: Desktop Outlook cannot use the adapter as MS Add-In does not explicitly support “window.history.replace”.
Code flow that produces error:
-
When Task Pane HTML page initially loads, it calls “keycloak.init” (with “login-required” option).
-
In “init”, the page is redirected to the Keycloak login page.
-
User enters credientials.
-
HTML page is redirected back to original page; which then calls “keycloak.init” when it loads.
-
When the below code is run in “init”, there is an “Object is null” error as the Add-In JS library (i.e. office.js) sets “window.replaceState” to null.
if (callback) { window.history.replaceState(window.history.state, null, callback.newUrl); }
Issue #2: OutlookOnTheWeb page cannot load the Keycloak JS adapter as the Keycloak login page has “Content Security Policy directive” is set to “frame-ancestors ‘self’”
Therefore, the Keycloak page is not meant to be displayed within an I-Frame.