Extending SAP SuccessFactors using SAPUI5 and SCP ...

MichalUhlir · ‎01-13-2019

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.