Integrate app into Work Zone from a different subaccount

[JulianKuipers]

I'm Julian Kuipers, a Full Stack SAP Developer in The Netherlands, currently working with a company called INNOV8iON. We focus on creating new and better ways to use SAP.

Introduction

Not long ago, I was given a task that looked easy at first but turned out to be quite a puzzle. My job was to integrate a custom Fiori application, which has its own standalone approuter, into SAP Build Work Zone, standard edition. The tricky part was that the Fiori app and the SAP Build Work Zone were in different subaccounts, which made things more complicated.

To figure out how to do this, I first looked at the official SAP instructions, which you can find here: SAP Help Portal. These instructions are pretty good, but I found they didn't cover everything I needed to know.

So, I came up with my own plan to make it work:

• Turn on something called allowListService in the Fiori app: This is like saying, "It's okay for this app to be used in the SAP Build Work Zone."
• Use whitelistService in the standalone approuter: This makes sure the router activates the whitelist-service.
• Add specific user-provided variables to the app: This will add Work Zone as trusted URI to embed this app as an iFrame.
• Make a trusted connection in the subaccount for the app: This is like making sure the app has a secure line to talk on.

I also learned a couple of important tips along the way:

• SAP says it's best if the app and the Work Zone use the same custom domain. This makes a lot of the setup simpler because you don't have to do extra steps to make them work together.
• The way I made it possible for users to log in isn't the fanciest solution, but it works well if you're only using one IDP (Identity Provider).
• This project really made me think and helped me learn a lot about how SAP works and how to make different parts of it work together. I wanted to share what I learned so others who might be trying to do the same thing can find it a bit easier.

Solution

Following the steps outlined in the SAP Documentation, along with the additional instructions I’ll provide, will ensure a smooth integration process for your custom Fiori application into SAP Build Work Zone. Let's break down these steps for clarity and implementation ease:

1. Activate the allowListService in the Custom Fiori App

To activate the allowlist service in your application, you'll need to insert a specific script before the sap-ui-bootstrap code in your HTML file. This script configures the allowlist service, enabling the application to determine if it's allowed to run within a given frame. Here's the code snippet you should place:

<script> 
    window["sap-ui-config"] = { 
        allowlistService: '/allowlist/service', 
        frameOptions: 'trusted', 
        frameOptionsConfig: { 
            callback: function (bSuccess) { 
	        if (bSuccess) { 
	            console.log("App is allowed to run!"); 
	        } else { 
	            console.error("App is not allowed to run!"); 
	        } 
            } 
        } 
    }; 
</script>

index.html

This snippet ensures your application checks if it's permitted to run, based on the allowlist service configuration. For further details, visit the SAPUI5 SDK Documentation.

2. Activate the whitelistService in the Standalone Approuter

In your standalone approuter configuration, add the following segment to activate the whitelistService, pointing to the allowlist service endpoint:

"whitelistService": { 
    "endpoint": "/allowlist/service" 
}

xs-app.json

This configuration enables your approuter to utilize the whitelist service, ensuring it recognizes and permits communications from your Fiori application. For comprehensive instructions, refer to the SAP Documentation.

3. Add User-Provided Variables to the Application

To allow the SAP Work Zone to embed your application in an iFrame securely, you must specify certain variables and HTTP headers. This involves declaring a whitelist of origins that are permitted to frame your content without risking click-jacking attacks. Here's how you configure it:

properties:
    CJ_PROTECT_WHITELIST: '[{"host":"<WORKZONE_RUNTIME_HOST>"}]' 
    httpHeaders: '[{"Content-Security-Policy":"frame-ancestors <WORKZONE_RUNTIME_HOST>"}]'

mta.yaml

This configuration ensures that your application can only be framed by the SAP Work Zone, enhancing security and compliance with SAP's guidelines. More details on these settings can be found in the SAP Developer Guide.

4. Adding Work Zone Host as a Trusted Domain

The last piece of our integration puzzle is to ensure that the Work Zone runtime host is recognized as a trusted domain by the XSUAA service of the Fiori app. This step is vital for embedding the app securely within the SAP Build Work Zone environment, ensuring that authorization and authentication flows are handled correctly without compromising security.

To accomplish this, you'll need to follow the guidelines outlined by SAP for configuring trusted domains specifically for the SAP Authorization and Trust Management service. The detailed steps for this configuration can be found in the SAP documentation: Configure Trusted Domains for SAP Authorization and Trust Management Service. This resource provides a comprehensive guide on how to add your Work Zone host as a trusted domain, ensuring that your custom Fiori app can be securely embedded and accessed within the SAP Build Work Zone.

Implementing these steps will facilitate the integration of your custom Fiori application with SAP Build Work Zone, ensuring both functionality and security are maintained.

Conclusion

As I've journeyed through the process of integrating a custom Fiori application into SAP Build Work Zone, it's clear that while the steps are straightforward once understood, there's a particular aspect of this integration that merits a closer look—the propagation of user login information, especially in contexts where multiple Identity Providers (IDPs) are involved.

This workaround is okay for now if you're just dealing with one IDP. It's not the slickest solution, but it does the job. However, if you're trying to make things work with several IDPs, that's where it gets trickier. If you're stuck in this spot, I found a blog that might just be your lifesaver. It's all about figuring out SAP Cloud Identity Services and making them work with SAP Build Work Zone when you've got multiple IDPs. Check it out right here: De-mystifying SAP Cloud Identity Services Integration.

Now for some good news—SAP's got our backs and is working on making this whole process a lot easier. They've hinted at some new improvements that are on the way, which you can sneak a peek at in their roadmap right here. I'm all in for seeing how they're going to make our lives simpler in the near future.

So, as we wrap this up, I just want to say it's been quite the ride figuring out all these SAP integration quirks. The thought of SAP making things smoother down the road is something I'm really looking forward to. In the meantime, we've got our workarounds and the helpful tips we've shared along the way.

Thanks for sticking with me through this journey. Here's to making things work and looking forward to easier days ahead!

Kind regards,

Julian Kuipers