Setup an SCP App as a Tile on On-Premise Fiori

Goal

To have a tile in my On-Premise Fiori Launchpad, upon clicking it, it should open an SCP deployed CAP UI5 application, without asking for further authentication (SSO). This strategy should work for any SCP deployed UI5, CAP, XSA apps.

Update September 2021:

SAP has released a solution for S/4HANA.I have not tried it though.

https://help.sap.com/viewer/ad4b9f0b14b0458cad9bd27bf435637d/LATEST/en-US/48ff1b03f65f4661b642255881c5e890.html

Prerequisites:

• You have an SAP WebDispacther/reverse proxy as your entry point to your Fiori Launchpad (FLP)
• Both your FLP and SCP application use the same Identity Provider (IDP) for authentication
• You can access your SCP/CAP app via the SAP WebDispacther/Reverse Proxy (This blog can help)

My Setup

• Cloud Foundry SCP instance
• SAP WebDispacther as the reverse proxy for both FLP and CAP app
• Azure AD (via SAP Identity Authentication) as the IDP for both FLP and CAP app
• Within my CAP app, I have an app module and it has a subfolder containing the UI5 app I want to show from the FLP.

How to achieve it?

Step 1. Create a new UI5 app with just a component.js. This app will get the session cookie by triggering the OAuth dance. This application will be public (no-authentication) app. To host this new application, I created a new folder (called getSession) inside the ‘app’ module. In the application router (xs-app.json) I have set the authentication to ‘none’ so that ‘getSession’ is public.

Step 2. Within my target Fiori app, I created a new HTML file called LoadCookies.html. This HTML file can be hosted within SCP as another app as well. All it does is to inform it’s parent that the page is loaded. It has code as below. This should be an authenticated resource. (not public)

Step 3. Within the On-Premise FLP, I will be setting the ‘getSession’ app in the target mapping instead of the target Fiori app. The ‘getSession’ app does following things.

1. Create an iframe and load ‘LoadCookies.html’. (This is the most important step when the OAuth dance happens and the browser gets the required cookies.) You have to ensure that the browser does not cache this file. I added a URL parameter passing the current time so that SCP was always contacted.
2. Upon loading the iframe (listen to the message posted from LoadCookies.html), load the target Fiori app. You can load the target app using the below code.

   var oApplicationProperties = {
   	ui5ComponentName: "com.cis.scp.analytics",
   	url: this.getComponentData().config.TargetFioriAppURL
   };			
   
   sap.ushell.Container.getService("Ui5ComponentLoader").createComponent(oApplicationProperties);​

You can use the target mapping parameters to pass the target Fiori app’s URL and retrieve it using

this.getComponentData().config.TargetFioriAppURL

as done above.

That is it. When you click on the On-Premise Fiori tile, the browser will do the OAuth dance in an iframe and show the SCP deployed Fiori app.