Skip to Content
Technical Articles
Author's profile photo Michal Uhlír

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.

 

 

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Wajahat Imam
      Wajahat Imam

      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.

        host: approuter-demo-blabla
      

      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

      Author's profile photo Michal Uhlír
      Michal Uhlír
      Blog Post Author

      Hi Wajahat,

       

      just change the host address to different string.

      ex: approuter-demo-wajahat

      Best Regards,

      Michal

      Author's profile photo Thomas Nelissen
      Thomas Nelissen

      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:

      {
      "errorHttpCode": "401",
      "errorMessage": "Unable to authenticate the client (Login failed - invalid user)"
      }
      I think this message is coming from the oauth token endpoint. My successfactors user ID is cased ( DeveloperTN), and successfactors user id's are case sensitive. SAP Cloud Platform converts this username to lower cases, which is why I get an "invalid user" error.
      Do you have any idea how to solve this problem?
      Thanks!
      Thomas
      Author's profile photo Michal Uhlír
      Michal Uhlír
      Blog Post Author

      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 

      Author's profile photo Maximilian Rupp
      Maximilian Rupp

      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

      Author's profile photo Michal Uhlír
      Michal Uhlír
      Blog Post Author

      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

      Author's profile photo Rajani Talla
      Rajani Talla

      Hi Michal Uhlir,

       

      Can we add success factor tiles directly on Fiori launchpad? We also have Cloud platform integration.

       

      Thanks & Regards,

      Rajani

      Author's profile photo Mamatha Majji
      Mamatha Majji

      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