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.
SAP Fiori_Blog.png
The scenario flow is as follows:
    1. 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.
    2. SAP Fiori Client sends an authentication request containing the passcode and the user’s name, password or cookie.
    3. The IdP processes the request and issues a SAML 2.0 assertion, which is sent back in the response to the SAP Fiori Client.
    4. SAP Fiori Client redirects the SAML 2.0 assertion to the SAP Fiori or AS ABAP service provider and the user accesses the application.


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:
  1. 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.
  2. 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.
  3. 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.
  4. Verify the Apache Cordova installation by entering the following command.
    cordova –v
  5. 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.
  6. Install the SMP SDK on your Mac
    Extract the archive and run installSDK.command.
  7. (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

    1. 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”]
      }
    2. 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.
    3. 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.
    4. 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.
  1. 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.
  2. Modify the following two JavaScript files within the project in order to allow SAP Fiori Client SSO from SAP Authenticator.
    1. 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);
          };
    2. 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);
      };
  3. 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

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Ravi Varma

    Hi  Nikola,

    I had created the custom Fiori client using the above steps also hardcoded our Fiori launchpad URL.

    When we use SAP Authenticator app to open the app with SSO it is going to our custom Fiori client and open our Fiori launchpad but SSO is not working

    Can you help me on this thanks in advance

    Thanks
    Ravi Varma

    (0) 
  2. D Mohanbabu

    Hi Nikola,

    It was a nice blog,

    I am trying to configure Custom Fiori Client by using above steps, but unfortunately, I am getting stuck with one issue.

    I followed the steps as mentioned in the above document, but while I am trying to run a command Sudo node create_fiori_client.js I am ending up with error.

    Please find the attached screen shot.

     

    can you please help me out of this issue.

    Thank You,
    Mohanbabu D

    (0) 
    1. Dimitar Mihaylov

       

      Hi Mohanbabu,

      Since last year we have out-of-box integration with Fiori Client and you don’t need to do any customizations on it. Please check the following blog for details – https://blogs.sap.com/2014/11/03/mobile-single-sign-on-for-sap-fiori-with-sap-authenticator/. At the end of the blog there is a link to a step-by-step guide – https://archive.sap.com/documents/docs/DOC-59553.
      In case you need to customize the Fiori Client for other purposes you can do this but for issues please post your questions in the Fiori Client forum or open a support ticket in the corresponding component.

      Regards,

      Dimitar

      (0) 
    1. Jens Schwendemann

      Hi Nikola,

      sorry, I don’t follow completely. Are you saying that the above blog post is not valid anymore and one should not follow the steps to create a custom Fiori client for SSO?

      Many thanks and kind regards
      Jens

      (0) 

Leave a Reply