Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Nikola_Simeonov
Advisor
Advisor

Overview

You can locally build an SAP Fiori Client plugin to work with Android SAP Authenticator by installing Apache Cordova. After this implementation, your users will be able to log on to SAP Fiori Client through single sign-on (SSO). For more information about the SSO configuration, see Setting Mobile Single Sign-On.

For this process, SAP Authenticator should use the URL for an identity provider (IdP) initiated SSO, starting with sapfioriclient:// scheme and containing j_username=[username]&j_passcode=[passcode] parameters, in order to launch a SAP Fiori Client build as described in this blog. The IdP should use TOTPLoginModule for authentication. For more information about the login module settings, see Configuring the Login Modules.

NOTE

If you already have SAP Fiori Client on your system, skip the first two sections and go to Running SAP Fiori Client with Android SAP Authenticator section.

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:
    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

  • SAP Mobile Platform (SMP)
  • Android 3.0 (API level 11)
  • Apache Ant
  • JDK
  • Android SDK
  • Eclipse plugins
  • Git
  • Node.js
  • Apache Cordova


To fulfill these prerequisites, you should proceed as follows:

  1. Install SAP Mobile Platform SDK.

    For more information about this installation, see Installation: SAP Mobile Platform SDK for Windows.

  2. Download and extract a binary Apache Ant distribution.

    For more information, see Prerequisites at Setting Up the Development Environment.

  3. Install Java JDK.

    For more information, see Setting Up the Development Environment.

  4. Install Android SDK.

    For more information, see Setting Up the Development Environment.

    Make sure that in the Android SDK Manager you have installed the required packages listed in SDK Manager. In addition, if you are using a proxy server, configure HTTP proxy and port.

  5. If you are using Eclipse, download and install the plugins.

    For more information, see Setting Up the Development Environment.

  6. Install Git.

    For more information, see Installing Git at Setting Up the Development Environment.

  7. 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 more information, see Setting Up the Development Environment.

  8. Install Apache Cordova with the following command.

    npm install -g cordova@<version>

    CAUTION

    You have to install the Apache Cordova version according to the description in Installing Apache Cordova with Node.js. You can check the available Apache Cordova version on your Windows OS with the following info command: npm info cordova.

  9. Restart the command prompt and verify the Apache Cordova installation by entering the following command.

    cordova -v

Creating SAP Fiori Client with Apache Cordova

  1. Modify C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\config.json file with the following code.

    {

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

        "targetFolder": "FioriClient",

      "appName": "FioriClient",

      "platforms": ["android"],

      "crosswalkLocation" : "C:\\Crosswalk\\crosswalk cordova-10.39.235.15-arm\\bin"

    }

    Note: In the above example I use version 10.39.235.15 of Crosswalk Cordova. If you have installed another version, set the path with your correct bin directory location.

  2. If necessary, install Crosswalk and plugman.

    As of SMP SDK 3.0 SP06, the Fiori Client on Android should use Crosswalk to render HTML pages rather than the Android WebView for improved performance. When Crosswalk is used, the platform must be Android only as plugman is used rather than the Cordova command-line interface (CLI) which can build cross-platform projects. For more information about the Crasswalk installation, see Cordova with Crosswalk. You install plugman with the npm install -g plugman command. For more information, see Installing Plugman.

  3. Create a Cordova project containing Kapsel and Cordova plugins.

    Go to folder C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client and run the following commands:

    npm install

    node create_fiori_client.js

    The create_fiori_client.js script creates the project.

  4. Build and run the project.
    • If you are using Crosswalk, you can build and run the project with C:\SAP\MobileSDK3\KapselSDK\apps\fiori_client\FioriClient\cordova\run.bat.
    • If you are not using Crosswalk, but the standard WebView, copy the files to the platform directory by running cordova -d prepare and use the Android IDE to deploy and run the project.

Running SAP Fiori Client with Android SAP Authenticator

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

  1. Add a plugin to support a custom URL scheme.

    You need to add a specific plugin to your SAP Fiori Client project in order to handle the sapfioriclient URL scheme. You can use the following Apache Cordova plugin: http://plugins.telerik.com/plugin/custom-url-scheme.You can install the plugin according to the following conditions:

    As a result, a new folder with the plugin is created, which contains LaunchMyApp.js.

  2. Add the following new method at the end of the LaunchMyApp.js plugin file.

    function handleOpenURL(url) {

        // wrapping in a little timeout, so it doesn't interfere with other apps’ setup

        setTimeout(function() {

                customScheme = "sapfioriclient";

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

        }, 300);

    };

  3. Update fioriclient.js to use the handled URL.

    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);
        };
    ...
  4. Build and run the SAP Fiori Client project on your Android device (emulator).

    For more information, see step 4 in Creating SAP Fiori Client with Apache Cordova section.

SAP Fiori Client should be ready to handle any mobile SSO requests from SAP Authenticator. That means when a user adds SAP Fiori Client account and application in SAP Authenticator, the user will be able to log on to the SAP Fiori Client through mobile SSO.

More Information

7 Comments