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.