Technical Articles
Embedding SAP Cloud Portal and Launchpad Service into Microsoft Teams including SSO
Looking for self-hosted Fiori Launchpad guidance instead? Have a look at the second post of the series. |
Dear community,
Integrating SAP PaaS services from Business Technology Platform (BTP) into other portal environments is still en vogue nowadays. So, here goes a short guide how to make it happen with SAP Cloud Portal (same for Launchpad service) and Microsoft Teams as an example for the approach.
Off we go through the gate to find that new species of life that lives in both worlds – SAP and Microsoft – at the same time! (Stargate still a thing? Just curious)
Fig.1 Illustration of embedded BTP service in Teams; source for stargate illustration: Wikipedia, by Stefan Xp, CC BY-SA 3.0, image used as overlay as is
Embedding an external page into a web app (including the Teams desktop or web client) is straightforward. iFrames are an popular option to get it done.
Fig.2 Click path to embed external website
The beefy part starts with the ever present Single-Sign-On (SSO) requirement. By default, BTP comes with the SAP ID service. To pursue SSO you need to establish trust between the Identity Provider (IdP) that is attached to your hosting app and the SAP ID service. In my example case that is Azure Active Directory (AAD). In addition to that we need to configure XSUAA for CloudFoundry (excluding NEO environment here. See this post for more details).
Note: there is also the possibility to configure this with SAP Cloud Identity Services – Identity Authentication in between. See this Azure tutorial and best practice guide for further details. For simplicity I am describing direct integration. |
Let’s look at the moving parts
First, we establish trust with our IdP (Azure AD). The configuration is quite “established”, so it still reads “SAP Cloud Platform” on the Azure portal screen 😀 Find the official docs for the process here.
Fig.3 Setup trust between AAD and BTP
See below example for reference to “flesh out” the official guidance a little more.
Fig.4 SSO config example on AAD for BTP CF domain ms-demo
Once you have established trust you end up with two IdPs being available on your BTP Subaccount. Note that both are available for logon. We will come back to that a little further down.
Fig.5 Additional registered IdP on BTP Subaccount
Trust: Check! What about embedding?
Nowadays, web applications and particularly PaaS or SaaS apps prohibit embedding by default to protect user experience, limit attack vectors, or for branding reasons for instance. Fortunately, BTP allows selective relaxation of that policy. We are looking at the content-security-policy header.
Both the Launchpad and the Portal Service have the same setting and view to maintain it:
frame-ancestors iframe frame object embed 'self' https://teams.microsoft.com;
Fig.6 CSP setting in BTP Portal Service for Teams embedding
Ok great, but the initial login goes to the XSUAA before it hits either of the two available IdPs.
So, next we need to configure our “SAP Authorization and Trust Management Service in CF” (XSUAA) instance to allow embedding by our web application (Microsoft Teams in this example). There are differences by BTP Feature Set. Below example is described for Feature Set B. See the official SAP docs for the other parts.
Fig.7 Subaccount settings for embedding
During my testing I needed to use the Security REST API and PATCH the iframeDomains attribute from Postman instead of the cockpit, because it was not fully functional yet. Find my collection for ease of use here.
Awesome, let’s test!
Fig.8 SAP XSUAA login before redirect to IdP
Not quite there yet. On the upside, we have working trust and embedding! But on the downside, we don’t have immediate SSO, because our portal service doesn’t know which IdP it shall select. How do fix this?
On the NEO environment you were lucky because you could just add the smart URL parameter “saml2idp” to pick the IdP. Unfortunately for CF, SAP decided not to implement something like this yet. Check the customer voice to upvote.
Alternatively, design your CF subaccount in such a way that you can get away with switching off the SAP ID service for your subaccount for login completely.
Fig.9 Switch off default IdP for logon
With that, every single service and app running on that subaccount can only be logged-on using your custom IdP. That might be problematic though: Imagine you have a user split for end-users and developers. Often developers access Business Application Studio (BAS) running on that subaccount with their S-Users. After the switch, this is not possible anymore.
Possible mitigations could be onboarding all users only through the custom IdP or moving all services/apps that require default IdP to another subaccount. Speaking of BAS for instance, you can easily deploy to other subaccounts and CF spaces.
Choose wisely 😉 and once you did, you will find that breath-taking life form on the other end of our “Portal-Gate” illustrated in figure 1, that thrives both in the SAP and the Microsoft world…
Fig.10 Successful SSO from Microsoft Teams and SAP Cloud Portal Service
Beautiful, isn’t it?
Note: CF approuters offer custom config to “pre-pick” the IdP. However, it is currently not possible to front the Cloud Portal Service with a custom CF approuter, because the managed approuter of the PaaS service conflicts with that setting. Have a look at this blog post by Radu for more details. |
For now we need to stick to the subaccount design, if you want to avoid the “IdP picker-screen” (see fig.8).
What about self-hosted Fiori Launchpad (FLP)?
See my dedicated post on that matter.
Besides that there are FLP exposure topics. On Azure that usually involves Azure Application Gateway including Web Application Firewall. Have a look at below sources to address:
Pay attention to the automatic redirect setting for the IdP. Tobias Hofmann created a nice post for it.
Final Words
Not too bad, huh? Today, we investigated BTP application and service embedding challenges and shed some light on how to configure SSO with a custom Identity Provider. We used the SAP Cloud Portal Service, Azure AD and Microsoft Teams as examples to support the approach.
In case you want to get started for free find the trials here:
What do you think @community? Anything to add?
As always feel free to ask lots of follow-up questions.
Best Regards
Martin
Hi Martin,
thx for this blogpost, currently this could be a good alternative to Microsoft Viva, at least this is my opinion.
Henning
Hey Henning,
my pleasure. What exactly do you mean by alternative? Viva and BTP Cloud Portal serve completly different use cases. Or did you mean Cloud Portal embedded in Viva?
KR
Martin
From my understanding VIVA integrates Sharepoint as content provider to MS Teams? Or how can we sort the different use cases of Viva and Cloudportal ?
On a very high level the is overlap of the products on being content provider, I agree. From my perspective Viva is not a launchpad but rather an experience to learn, collaborate, community, and shape digital work.
We could now argue about how the Cloud Portal fosters these as well. That is something for another blog post 😀 are you keen to write one? Would be happy to chip in.
KR
Martin
Hi Martin, (Tak mal tiak)
awesome content and much love for the Stargate
Chel Nak
Nils
Hey Martin, awesome article and definitely yes! Stargate is still a thing
Hello Martin Pankraz
A nice write up of yours:)
Quick question: You showcased how to embed a BTP Fiori Portal/Launchpad as a web page into a web-based teams portal (https://teams.microsoft.com/ in most of your screenshots);
Indeed, using a browser-based version of Teams is pretty handy when it comes to troubleshooting all these issues related to iframes with CORS and trusted domains inclusion.
What about doing the same in a desktop based version of Teams ?
How can one get access to the developer view or its equivalent when doing the same type of integration in a desktop version of Teams?
kind regards; Piotr
Hi Piotr,
both approaches work (web and Desktop). I stuck in my Screenshots to web based version to look into the application topics you mentioned. For the Desktop app you can activate DevTools. Let me know how you like that.
KR
Martin
Thanks Martin,
sure but it was a "loaded" question; it looks like in my case Desktop Teams app (MacOS) is fully integrated with the company corporate SSO and the app itself is locked down (no access to developer preview option);
On the other hand when using a web-based teams app, when starting the app, I am always being redirected to login screens (microsoft's and then the company one) and then have access to whatever developer options are available in the company IT-managed browser.
cheers; Piotr
I see. So, you will stick to the web-based version then afterall 😉
A more appropriate title would be "Embedding rather than integrating"...
Embedding SAP Cloud Portal and Launchpad Service into Microsoft Teams including SSO
Agreed Nishant!
Can we do this full integration using a trial account ?
I am able to embed fiori lauchpad on to the teams but the iframes testing gets failed due to security reasons. Please clarify on how to use the restful api in cockpit irrespective of the postman.
Please advice any solution if possible.
Hi Yash Jangwan,
what is your security error? I am not sure what else I can provide. My linked Postman collection shows the required attributes to interact with the Security REST API in detail.
To my understanding BTP trial account should also work, but I tested with productive accounts only.
KR
Martin