Configuring SAP Fiori Client for Single Sign-On wi...

Nikola_Simeonov · ‎05-07-2015

Overview

SAP Fiori Client is now available for signle sign-on (SSO) with SAP Authenticator. With this integration, users can benefit from the SAP Authenticator’s SSO feature that allows them to log on to SAP Fiori applications without providing credentials. For more information about the SSO configuration, see Setting Mobile Single Sign-On. Furthermore, you need to do minimal changes on SAP Fiori Client for this setup before you locally build and run your project. The official source code as well as the information how to rebuild SAP Mobile Platform (SMP) Kapsel plugins are publicly available.

To launch the SAP Fiori Client build described in the blog, SAP Authenticator uses the URL for an identity provider (IdP)
initiated SSO. The URL starts with sapfioriclient:// scheme and contains j_username=[username]&j_passcode=[passcode]
parameters. Moreover, the IdP should use TOTPLoginModule for authentication. For more information about the login module settings, see Configuring the Login Modules.
You can also use the standard solution for this scenario, which does not include the SAP Fiori Client. For more information, see Mobile Single Sign-On for SAP Fiori with SAP Authenticator.

Scenario Description

The following scenario describes how a user accesses an SAP Fiori or AS ABAP application through mobile single sign-on. That means the user does not have to provide credentials to log on to the application from the mobile device.

The scenario flow is as follows:

SAP Authenticator sends a URL for IdP-initiated SSO to SAP Fiori Client.
1. An employee chooses the SAP Fiori Client application from the SAP Authenticator’s list of favorite applications. Note: A user adds the application as favorite by activating mobile SSO and scanning a QR code.
2. SAP Authenticator generates a passcode and sets the username and passcode in the URL.
3. SAP Authenticator sends the URL to SAP Fiori Client.
4. SAP Fiori Client processes the URL by setting its scheme.

SAP Fiori Client sends an authentication request containing the passcode and the user’s name, password or cookie.

The IdP processes the request and issues a SAML 2.0 assertion, which is sent back in the response to the SAP Fiori Client.

SAP Fiori Client redirects the SAML 2.0 assertion to the SAP Fiori or AS ABAP service provider and the user accesses the application.

If you are using the AS ABAP service provider, see Mobile Single Sign-On for SAP Fiori.

If you are using the SAP Fiori service provider, see Using SAML 2.0 Authentication to Access Fiori Apps from the Public Internet.

Prerequisites

Mac OS X 10.10 (Yosemite)

XCode 6.3.1

iOS device with version 8.3 (or XCode simulator for iPhone 6)

node.js, v0.10.25

Apache Cordova 4.3.0

SAP Mobile Platform (SMP) SDK SP07

To fulfil these prerequisites, you should proceed as follows:

Install Git.

For more information, see Installing Git.

CAUTION

If you are using a proxy server, you must configure Git. For example, if your proxy is proxy:8080, enter the following commands on your Mac:

sudo git config --global http.proxy http://proxy:8080/

sudo git config --global https.proxy http://proxy:8080/

For more information about the sudo command, see Requirements for sudo Command.

Install Node.js v0.10.* and its package manager, npm, because it is necessary for the installation of Apache Cordova.

For more information, see Node.js.

CAUTION

We recommend you install v0.10.25 node version because the latest version, v0.12.0, has incompatibility problems and may produce an error like the following:

“…Request path contains unescaped characters…”

CAUTION

If you are using a proxy server you must configure npm. For example, if your proxy is proxy:8080, enter the following commands on your Mac:

sudo npm config --global http.proxy http://proxy:8080

sudo npm config --global https.proxy http://proxy:8080

For more information about the sudo command, see Requirements for sudo Command.

Install Apache Cordova version 4.3.0 with the following command.

sudo npm install -g cordova@4.3.0

CAUTION

Do not use version 4.2.0 because it has a bug which affects the cold start after a navigation by custom scheme. For more information, see handleOpenURL not working correctly on cold start (handler ….

Do not use the latest Apache Cordova version 5.0 because it is not supported by Kapsel plugins earlier than SMP SDK 3.0 SP09.

Verify the Apache Cordova installation by entering the following command.

cordova –v

Once you have installed Apache Cordova, download SAP Mobile Platform SDK.

Latest version of SAP Mobile Platform (SMP) SDK 3.0 is available under index M at SAP Support Portal.

Direct link to SMP SDK SP07 for Mac OS used for this configuration: https://websmp130.sap-ag.de/sap/bc/bsp/spn/download_basket/download.htm?objid=0120025231000041728020....

Install the SMP SDK on your Mac

Extract the archive and run installSDK.command.

(Optional) If you want to allow the Apache Cordova command line to start the iOS simulator on Mac, you must install ios-sim.
1. Download the ios-sim tool files from https://github.com/phonegap/ios-sim and execute sudo npm install -g ios-sim. For more information about the sudo command, see Requirements for sudo Command.
2. Verify the ios-sim installation by entering the following command in the terminal window: ios-sim –version.
3. If you want to access the SAP Fiori URL by HTTPS instead of HTTP, you need to import a server certificate on the simulator. For more information, see Installing certificate in iOS Simulator trust store.

For more information about this procedure, see Setting Up the Development Environment.

Creating SAP Fiori Client with Apache Cordova 4.3.0

Modify /Users/<your user>/SAP/MobileSDK3/KapselSDK/apps/fiori_client/config.json file with the following code.

{

    "packageName": "com.sap.fiori.client",

    "targetFolder": "FioriClient",

    "appName": "FioriClient",

    "platforms": ["ios"]

}

Modify /Users/<your user>/SAP/MobileSDK3/KapselSDK/apps/fiori_client/create_fiori_client.js file.

Add the code marked in green and remove the one marked in red:

...

console.log('Adding SAP plugins...');

var kapsel_plugins = [

'com.sap.mp.cordova.plugins.logon',

'com.sap.mp.cordova.plugins.logger',

'com.sap.mp.cordova.plugins.apppreferences',

'com.sap.mp.cordova.plugins.settings',

'com.sap.mp.cordova.plugins.authproxy',

'com.sap.mp.cordova.plugins.online',

'com.sap.mp.cordova.plugins.toolbar',

'com.sap.mp.cordova.plugins.cachemanager',

'com.sap.mp.cordova.plugins.encryptedstorage',

'com.sap.mp.cordova.plugins.push',

'com.sap.mp.cordova.plugins.e2etrace',

'com.sap.mp.cordova.plugins.barcodescanner',

'com.sap.mp.cordova.plugins.fioriclient',

'com.sap.mp.cordova.plugins.attachmentviewer'

];

var plugins = [

//path.join(sdk_root,'plugins','logon'),

//path.join(sdk_root,'plugins','logger'),

//path.join(sdk_root,'plugins','apppreferences'),

//path.join(sdk_root,'plugins','settings'),

//path.join(sdk_root,'plugins','authproxy'),

//path.join(sdk_root,'plugins','online'),

//path.join(sdk_root,'plugins','toolbar'),

//path.join(sdk_root,'plugins','cachemanager'),

//path.join(sdk_root,'plugins','encryptedstorage'),

//path.join(sdk_root,'plugins','push'),

//path.join(sdk_root,'plugins','e2etrace'),

//path.join(sdk_root,'plugins','barcodescanner'),

//path.join(sdk_root,'plugins','fioriclient'),

//path.join(sdk_root,'plugins','attachmentviewer'),

'org.apache.cordova.camera',

'org.apache.cordova.file',

'org.apache.cordova.geolocation',

'org.apache.cordova.statusbar',

'org.apache.cordova.media',

'org.apache.cordova.splashscreen@0.3.0'

];

if (!useCrosswalkForAndroid) {

shelljs.exec('cordova plugin add ' + kapsel_plugins.join(' ') + " --searchpath " + path.join(sdk_root, 'plugins'));

//rebuild Kapsel plugins against local search path and not remote Cordova repository

shelljs.exec('cordova plugin add ' + plugins.join(' '));

shelljs.exec('cordova plugin add https://github.com/EddyVerbruggen/LaunchMyApp-PhoneGap-Plugin.git --variable URL_SCHEME=sapfioriclient'); // add custom scheme plugin for the hybrid app

}

else {

plugins.forEach(function (plugin, index) {

shelljs.exec('plugman install --platform android --project . --plugin ' + plugin + " --searchpath " + path.join(sdk_root, 'plugins'));

});

}

...

This is necessary to allow Apache Cordova to run with the original script and a new custom scheme Apache Cordova plugin to listen to the sapfioriclient scheme.

Remove plugman cache under /Users/<your user>/.plugman/cache to avoid any problems with cached plugins if you had used other Apache Cordova version before you switched to 4.3.0.

Once the script is changed, run it with the following commands.

sudo npm install

sudo node create_fiori_client.js

For more information about the sudo command, see Requirements for sudo Command.

Running SAP Fiori Client with iOS SAP Authenticator

The iOS SAP Authenticator is a mobile application installed on iPhones, which is used to generate passcodes for one-time password authentication. For more information, see SAP Authenticator Mobile Application.

Generate a new FioriClient folder with the corresponding XCode project.To be able to open and modify it with XCode, you might need to give write permission with the following command:

sudo chmod -R 777 FioriClient

For more information about the sudo command, see Requirements for sudo Command.

Modify the following two JavaScript files within the project in order to allow SAP Fiori Client SSO from SAP Authenticator.

Do the following changes inside fioriclient.js.

The code to be added is marked in green.

...

var goToFioriURL = function(errorCallback) {

sap.FioriClient.getFioriURL(function (retrievedFioriURL) {

if (!context.smpRegContext){

// If sap.FioriClient.context.smpRegContext is null,

// don't allow the user to skip

// the logon plugin by changing the URL.

// sap.FioriClient.context.smpRegContext will be set

//once logon is successful.

// Once logon completes and the app navigates to the URL,

//sap.FioriClient.context.smpRegContext will

// be undefined, so it will pass this test.

return;

}

if (!isUrl(retrievedFioriURL)) {

errorCallback();

return;

}

if (!sap.FioriClient.MobileSSO) {

setFioriURL(retrievedFioriURL);

}

// Add extra query string to force page reload.

var buster = "smphomebuster=" + Math.random()*10000000000000000;

...

var getFioriURL = function(callback) {

function getFioriURLFromAppPreferencesFailed(error) {

sap.Logger.info(error, 'FIORI_CLIENT');

// The Fiori URL wasn't found, so use the hardcoded value.

doHttpsConversionIfNeeded(context.appConfig.fioriURL, callback);

}

function getFioriURLFromAppPreferencesSuccess(url) {

if (sap.FioriClient.MobileSSO) {

url = sap.FioriClient.MobileSSO;

}

if (url != null) {

doHttpsConversionIfNeeded(url, callback);

} else {

doHttpsConversionIfNeeded(context.appConfig.fioriURL, callback);

}

sap.AppPreferences.getPreferenceValue('fioriURL', getFioriURLFromAppPreferencesSuccess, getFioriURLFromAppPreferencesFailed);

};

...

Add the following new method inside LaunchMyApp.js.

The code to be added is marked in green.

cordova.define("nl.x-services.plugins.launchmyapp.LaunchMyApp", function(require, exports, module) { "use strict";

/*

Q: Why an empty file?

A: iOS doesn't need plumbing to get the plugin to work.

- Including no file would mean the import in index.html would differ per platform.

- Also, using one version and adding a userAgent check for Android feels wrong.

- And if you're not using PhoneGap Build, you could paste your handleOpenUrl JS function here.

*/

});

function handleOpenURL(url) {

setTimeout(function() {

if (url.indexOf("sapfioriclient://") === 0) {

sap.FioriClient.MobileSSO = url.replace("sapfioriclient://", "https://");

}

}, 300);

};

Build and run the project on any iOS device (simulator).

SAP Fiori Client should be ready to handle any mobile SSO requests from SAP Authenticator.

More Information

SAP Fiori Client (New in SP04)

One-Time Password Authentication