Technical Articles
Extending SAP SuccessFactors using SAPUI5 and SCP Cloud Foundry Environment
Recently I was challenged to deploy our SAPUI5 application extending SAP SuccessFactors (SF) into SCP Cloud Foundry (SCP CF) environment using SF identity provider. And because it took some time and I needed to ask SAP support I decided to sum-up what needs to be done to deploy this kind of extension to CF.
At the beginning I would like to appreciate help of Iliyan Velichkov (iliyan.velichkov@sap.com) from SAP, who was able to help me with configuration files.
Prerequisites:
- SCP Instance with Cloud Foundry subaccount and application runtime. Trial is OK.
- SAP SuccessFactors instance with oData access
- Access to SAP SuccessFactors provisioning
- SAPUI5 app consuming SF oData API ready for deployment
- Have the Cloud Foundry command line interface (cf CLI) downloaded and installed. See Download and Install the Cloud Foundry Command Line Interface.
- Have Node.JS including its NPM Packager Manager installed. See https://nodejs.org/en/
This guide is following official SAP Documentation enhanced for detailed examples.
1. Configuring the SCP Subaccount for SAP SuccessFactors
To be able to use SAP SF as an identity provider, you have to perform two procedures mentioned in this documentation.
- Establish Trust Between SAP SuccessFactors and SAP Cloud Platform
- Register the SAP Cloud Platform Subaccount as an Authorized Assertion Consumer Service for Cloud Foundry Environment
At the end, you should have a new record in your provisioning looking like this:
https://XXXX.authentication.eu10.hana.ondemand.com/saml/SSO/alias/XXXX.aws-live-eu10
https://XXXX.authentication.eu10.hana.ondemand.com/saml/SingleLogout/alias/XXXX.aws-live-eu10
XXXX.aws-live-eu10
2. Installing and Configuring Extension Application for SCP CF Environment
To use OAuth 2.0 for authentication, you will first need to register your OAuth client in the SAP SuccessFactors system, and set up the permissions required for this registration. Then, you can register your OAuth client application.
Source: SAP Documentation
2.a Configuring Application Authentication
You need your own application router that connects your extension application to the centrally provided user account and authentication (UAA) service. This means that you need to deploy an approuter as part of your application that manages the user authentication for you.
Source: SAP Documentation
- In your CF CLI run follwing command to be able to set up the application router as part of your application
npm config set @sap:registry=https://npm.sap.com
- Navigate to your CF space using command:
cf login
- Create an empty folder and in your CF CLI navigate to this folder
- Create file xs-security.json with following content: (Detailed Documentation of security descriptor)
-
{ "xsappname": "xsuaa-demo", "tenant-mode": "dedicated", "scopes": [{ "name": "uaa.user", "description": "uaa.user" }], "role-templates": [{ "name": "uaauser", "scope-references": [ "uaa.user" ] }] }
- Create xsuaa service Instance with this command:
cf create-service xsuaa application xsuaa-demo -c xs-security.json
- Application router configuration – create file xs-app.json with following content: (Detailed Documentation)
{ "routes": [{ "source": "^/odata/v2/(.*)$", "target": "$1", "destination": "sap_hcmcloud_core_odata", "csrfProtection": false }, { "source": "^/webapp/(.*)$", "target": "$1", "localDir": "webapp" } ] }
- Create file package.json with content:
{ "name": "approuter-demo", "version": "1.0.0", "description": "", "scripts": { "start": "node node_modules/@sap/approuter/approuter.js", "test": "echo \"Error: no test specified\" && exit 1" }, "license": "ISC", "dependencies": { "@sap/approuter": "^5.10.1" } }
- Create file manifest.yml with content:
--- applications: - name: approuter-demo host: approuter-demo-blabla buildpack: nodejs_buildpack memory: 128M env: XS_APP_LOG_LEVEL: debug # XSAPPNAME: xsuaa-demo services: - xsuaa-demo - destination-demo-lite
- Create folder webapp with your SAPUI5 application (index.html file inside)
- Run following command to push this approuter to your space
cf push
- When your app is deployed, you should be able to see its link, or run cf apps to get the application link. Or you can see the link in your CF space
Folder Structure:
- manifest.yml
- package.json
- xs-app.json
- xs-security.json
- webapp
- index.html
2.b Configuring the Extension Applications’s Connectivity to SAP SuccessFactors
- Download the X509 Certificate in SAP Cloud Platform
Source: SAP Documentation
- Create an OAuth Client in SAP SuccessFactors:
- In your SF system, go to Manage OAuth2 Client Applications
- Choose Register Client Application
- In the Application URL field, enter the URL of the extension application followed by the subaccount ID. For example, <extension_application_URL>/<subaccount_ID>
- In the X.509 Certificate field, paste the content between —–BEGIN CERTIFICATE—– and —–END CERTIFICATE—– of the certificate you downloaded in the previous step
- Click on Register and you should be able to see this:
- Note API key
- Create an HTTP Destination in SAP Cloud Platform:
- Go to your application overview in SCP CF platform
- Service Bindings -> Bind Service
- Service From Catalog – destination – Create New Instance – instance name: destination-demo-lite (from manifest.yml)
- Navigate to this sevice and go to Destinations tab
- Create new Destination – description in SAP Documentation
- My Example:
And we are DONE. Now you can open the link of your approuter /webbapp and you will be redirected to SF login page. When you log in, you will be redirected to index.html file of your webapp folder.
In case of any not-working links or changes in SF or SCP, feel free to contact me – I will update the blog.
Hi Michal,
This is really great article, I am stuck in one of manifest file information, I set as per your suggestion, but getting error during push the project.
FAILED
Server error, status code: 400, error code: 210003, message: The host is taken: approuter-demo-blabla
Can you please help me on above issue?
Thank you,
Wajahat Imam
Hi Wajahat,
just change the host address to different string.
ex: approuter-demo-wajahat
Best Regards,
Michal
Hi Michal,
Thanks for your blog, it has been very helpful!
I am getting errors when consuming a successfactors API from a cloudfoundry application.
My service is responding:
Hi Thomas,
thank you. This morning we can not run all our apps in every customer landscapes. I already opened a ticket and SAP is working on it.
We are getting different message: "GET request to /odata/v2/odata/v2/$metadata?sap-language=EN completed with status 500 - Missing key pair for subaccount ***" but it seems to be also some authorization issue, when calling service.
Lets wait until this is fixed from SAP side and then you can send me some details.
Thanks,
Michal
Hi Michal,
thanks for your great input!
I've built a UI5 application and tried to call the OData service from there. However, I'm facing a similar issue: 500 (Internal Server Error).
Do you have a code example of how your API call looks like?
I followed this (kind of similar) instruction: https://blogs.sap.com/2019/02/19/2.sapui5-application-with-abap-odata-service-as-backend/
Looking at your error message, I'm wondering if the HTTP destination in SCP shouldn't rather be maintained without "/odata/v2" at the end.
Since this part is duplicated in your request!?
Thanks and Regards,
Maximilian
Hello Maxmilian,
it seems you now face the same issue as I am facing since last Friday for all our customers. Go to your SCP subaccount and check the log of your application.
There is something like this: GET request to /odata/v2/odata/v2/$metadata?sap-language=EN completed with status 500 - Missing key pair for subaccount ***
As you are an SAP intern, see VH 515348 / 2019 in BCP to see the progress.
Michal
Hi Michal Uhlir,
Can we add success factor tiles directly on Fiori launchpad? We also have Cloud platform integration.
Thanks & Regards,
Rajani
Hi Michal,
Extending Success Factors using SAP Ui5 and Cloud Foundry was really Challenging.
I am also facing some issues while deploying and running the App in BTP.
I have some questions as follows:
1) what template you have taken either SAP Fiori Application or Basic MTA Application.
2)Where you have deployed your app either in Cloud Foundry Space or HTML5 Applications.
3) After deploying the App to Cloud Foundry Space while running the APP URL showing "Not Found 404" error .
How to resolve the issue. Can you pls help.
Regards,
Mamatha